js+css实现三维立体云层滚动视觉差异展示效果代码
代码语言:html
所属分类:视觉差异
代码描述:js+css实现三维立体云层滚动视觉差异展示效果代码
代码标签: js css 三维 立体 云层 滚动 视觉 差异 展示
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,700); html, body { height: 100%; overflow: hidden; font-family: "Fira Sans", sans-serif; font-weight: 300; } body { background: #68a8bd; background-image: linear-gradient(180deg, #68a8bd, #fff); } .hidden { display: none; } h1 { position: absolute; top: 0; right: 40px; font-size: 50px; color: #fff; font-weight: 300; } #viewport, #viewport .world, .worldLayer { position: absolute; } #viewport { top: 0; right: 0; bottom: 0; left: 0; perspective: 600px; overflow: hidden; } #viewport .world, #viewport .worldLayer { height: 512px; width: 512px; top: 50%; left: 50%; margin: -256px 0 0 -256px; transform-style: preserve-3d; } #viewport .world { background: rgba(255, 0, 0, 0.5); } #viewport .worldLayer:after { content: ""; display: block; position: absolute; top: 20px; bottom: 20px; left: 20px; right: 20px; } #viewport .cloud, #viewport .cloudPart { position: absolute; width: 256px; height: 256px; margin: -128px 0 0 -128px; top: 0; left: 0; } #viewport .cloud { transform-style: preserve-3d; -webkit-animation: cloudRotation 400s infinite linear; animation: cloudRotation 400s infinite linear; } #viewport .cloud .cloudPart { background: url(//repo.bfw.wiki/bfwrepo/icon/637efbe001358.png) no-repeat; } .worldLayer:nth-child(5n) { background: rgba(255, 0, 0, 0.5); } .worldLayer:nth-child(4n) .content { right: 0; left: auto; } .worldLayer:nth-child(3n) .content { top: auto; bottom: 0; } .content { position: absolute; top: 0; left: 0; padding: 20px; width: 258px; font-size: 20px; color: #000; text-transform: uppercase; font-weight: 700; transform: translate3d(0, 0, 25px); } .content strong { font-size: 80px; font-weight: 300; margin-left: -0.075em; } @-webkit-keyframes cloudRotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <!-- partial:index.partial.html --> <div id="main" role="main"> <div id="viewport"> <div class="world"></div> </div> <div id="timeline"> <section data-timeline="0"> <h1 class="hidden">1800</h1> </section> <section data-timeline="1"> <h1 class="hidden">1810</h1> </section> <section data-timeline="1.5"> <h1 class="hidden">1815</h1> </section> <section data-timeline="2"> <h1 class="hidden">1820</h1> </section> <section data-timeline="3"> <h1 class="hidden">1830</h1> </section> <section data-timeline="4"> <h1 class="hidden">1840</h1> </section> <section data-timeline="5"> <h1 class="hidden">1850</h1> </section> <section data-timeline="10"> <h1 class="hidden">1900</h1> </section> </div> </div> <!-- partial --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <script> var TimeLine, Layer, World, /* Constats */ $doc, nameSpace, /* helpers */ nameSpaced; $doc = $(document); nameSpace = "TimeLine"; nameSpaced = function( eventNames,ns ){ var i, events, nameSpaced; events = eventNames.split(" "); for(i = 0; i < events.length; i++){ events[i] = events[i] + "." +(ns || nameSpace); } return events.join(" "); }; TimeLine = function( $timeLine,groupsSelector,layersSelector,$world,$viewport ){ this.$timeLine = $timeLine; this.groupsSelector = groupsSelector; this.layersSelector = laye.........完整代码请登录后点击上方下载按钮下载查看
网友评论0