html:
jQuery实现3D的跑马灯动画特效 欢迎访问html5tricks
css:
body{ background: #494A5F; color: #D5D6E2; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;}a{color: #2fa0ec;outline: none;text-decoration: none;}a:hover,a:focus{color:#74777b;text-decoration: none;}@font-face { font-family: Agency;}body { font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; marging: 0;}#marquee { margin-top: 3rem; -webkit-perspective: 500px; perspective: 500px; font-size: 0; font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;}#marquee div { display: inline-block; height: 12rem; width: 30rem; position: relative;}#marquee div:first-of-type { background: #e5233e; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: rotateY(-40deg); transform: rotateY(-40deg); color: #fff;}#marquee div:last-of-type { background: #b31e31; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotateY(45deg); transform: rotateY(45deg); color: #f8c9d9;}#marquee div { font-size: 8rem; overflow: hidden;}#marquee div span { position: absolute; width: 400%; line-height: 1.4;}@-webkit-keyframes leftcrawl { to { -webkit-transform: translateX(-100rem); transform: translateX(-100rem); }}@keyframes leftcrawl { to { -webkit-transform: translateX(-100rem); transform: translateX(-100rem); }}@-webkit-keyframes rightcrawl { to { -webkit-transform: translateX(-130rem); transform: translateX(-130rem); }}@keyframes rightcrawl { to { -webkit-transform: translateX(-130rem); transform: translateX(-130rem); }}#marquee div:first-of-type span { -webkit-transform: translateX(60rem); transform: translateX(60rem); -webkit-animation: leftcrawl 14s linear infinite; animation: leftcrawl 14s linear infinite; text-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3);}#marquee div:last-of-type span { -webkit-transform: translateX(30rem); transform: translateX(30rem); -webkit-animation: rightcrawl 14s linear infinite; animation: rightcrawl 14s linear infinite;}form { margin-top: 3rem; background: #334; padding: 1rem; text-align: center; color: #fff;}input[type="text"] { padding: .5rem; font-size: 1.2rem; width: 22rem;}input[type="text"] { padding: .5rem;}label { margin: 1rem;}@media all and (max-width: 993px) { #marquee { -webkit-perspective: none; perspective: none; } #marquee div:last-of-type { opacity: 0; height: 0; } #marquee div:first-of-type { width: 80%; }}
