首页 > 代码库 > 实现页面的3D效果
实现页面的3D效果
html:
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery实现3D的跑马灯动画特效</title> <link rel="stylesheet" href="http://www.mamicode.com/css/style.css"> <!--[if lt IE9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body> <div id="marquee"> <div><span>欢迎访问html5tricks</span></div> <div aria-hidden="true"><span>欢迎访问html5tricks</span></div> </div> <form onsubmit="setText(event)"> <label for="textsource">使用你自己的文本</label> <input type="text" id="textsource" value="http://www.mamicode.com/欢迎访问html5tricks" autocapitalize="characters" pattern=".{5,60}" title="5-30个字符长度"> <input type="submit" class="btn" value="http://www.mamicode.com/使用"> </form> <script src="http://www.mamicode.com/js/jquery-2.1.1.min.js" type="text/javascript"></script> <script type="text/javascript"> function setText(event) { event.preventDefault(); leftText.innerText = textsource.value.toUpperCase(); rightText.innerText = textsource.value.toUpperCase(); } var leftText = document.querySelector("#marquee div:first-of-type span"); var rightText = document.querySelector("#marquee div:last-of-type span"); var textsource = document.getElementById("textsource"); setText(); </script></body></html>
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%; }}
实现页面的3D效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。