CSS3场景动画：从日出、云开到月亮升起

发布时间：2018-08-18 17:54:35 所属栏目：交互来源：站长网

导读：基于 jQuery 和CSS3实现的一幅场景动画，在这个物资中演示了：从日出云开、到日落傍晚，再到月亮升起的完整一天，兼容的浏览器有： Chrome , Safari , Firefox 5+,IE10 PP3，并且在网页中还提供了每个场景使用的CSS代码，方便大家阅读。为解决一些网页特

　　基于jQuery和CSS3实现的一幅场景动画，在这个物资中演示了：从日出云开、到日落傍晚，再到月亮升起的完整一天，兼容的浏览器有：Chrome, Safari, Firefox 5+,IE10 PP3，并且在网页中还提供了每个场景使用的CSS代码，方便大家阅读。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>CSS3 Keyframe Animation Demo</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="" name="description" /> <style> html,body,div,span, applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, a,abbr,acronym,address,big,cite,code, del,dfn,font,img,ins,kbd,q,s,samp, small,strike,sub,sup,tt,var, dd,dl,dt,li,ol,ul, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; text-align: left; } table { border-collapse: collapse; border-spacing: 0; } ol,ul { list-style: none; } q:before,q:after, blockquote:before,blockquote:after { content: ""; } #container { width: 1080px; margin: 0 auto; overflow: hidden; padding: 50px 20px 0 20px; } h1 { font-size: 30px; padding: 0 0 20px 0; } h1 span { font-size: 18px; } #left { overflow: hidden; float: left; } #left p { width: 470px; padding: 20px 0 0 0; font-family: Arial, Helvetica, sans-serif; } #sky { width: 500px; height: 500px; position: relative; z-index: 1; overflow: hidden; background-color: #525252; } #sky.VeryHuo { -webkit-animation-name: sky; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: sky; -moz-animation-duration: 10s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: sky; -ms-animation-duration: 10s; -ms-animation-timing-function: ease; -ms-animation-iteration-count: 1; -ms-animation-direction: normal; -ms-animation-delay: 0; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: sky; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @-webkit-keyframes sky { 0% { background-color: #525252; } 33% { background-color: #6293e5; } 66% { background-color: #6293e5; } 100% { background-color: #525252; } } @-moz-keyframes sky { 0% { background-color: #525252; } 33% { background-color: #6293e5; } 66% { background-color: #6293e5; } 100% { background-color: #525252; } } @-ms-keyframes sky { 0% { background-color: #525252; } 33% { background-color: #6293e5; } 66% { background-color: #6293e5; } 100% { background-color: #525252; } } @keyframes sky { 0% { background-color: #525252; } 33% { background-color: #6293e5; } 66% { background-color: #6293e5; } 100% { background-color: #525252; } } #ground { position: absolute; bottom: 0; left: 0; width: 500px; height: 154px; background: #6c5228; z-index: 4; } #ground.VeryHuo { -webkit-animation-name: ground; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: ground; -moz-animation-duration: 10s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: ground; -ms-animation-duration: 10s; -ms-animation-timing-function: ease; -ms-animation-iteration-count: 1; -ms-animation-direction: normal; -ms-animation-delay: 0; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: ground; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @-webkit-keyframes ground { 0% { background: #6c5228; } 33% { background: #48a037; } 66% { background: #48a037; } 100% { background: #6c5228; } } @-moz-keyframes ground { 0% { background: #6c5228; } 33% { background: #48a037; } 66% { background: #48a037; } 100% { background: #6c5228; } } @-ms-keyframes ground { 0% { background: #6c5228; } 33% { background: #48a037; } 66% { background: #48a037; } 100% { background: #6c5228; } } @keyframes ground { 0% { background: #6c5228; } 33% { background: #48a037; } 66% { background: #48a037; } 100% { background: #6c5228; } } #sun { background: #ffd630; width: 130px; height: 130px; position: absolute; border-radius: 70px; z-index: 2; bottom: 0; left: 340px; } #sun.VeryHuo { -webkit-animation-name: sunrise; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: sunrise; -moz-animation-duration: 10s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: sunrise; -ms-animation-duration: 10s; -ms-animation-timing-function: ease; -ms-animation-iteration-count: 1; -ms-animation-direction: normal; -ms-animation-delay: 0; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: sunrise; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @-webkit-keyframes sunrise { 0% { bottom: 0; left: 340px; background: #f00; } 33% { bottom: 340px; left: 340px; background: #ffd630; } 66% { bottom: 340px; left: 40px; background: #ffd630; } 100% { bottom: 0; left: 40px; background: #f00; } } @-moz-keyframes sunrise { 0% { bottom: 0; left: 340px; background: #f00; } 33% { bottom: 340px; left: 340px; background: #ffd630; } 66% { bottom: 340px; left: 40px; background: #ffd630; } 100% { bottom: 0; left: 40px; background: #f00; } } @-ms-keyframes sunrise { 0% { bottom: 0; left: 340px; background: #f00; } 33% { bottom: 340px; left: 340px; background: #ffd630; } 66% { bottom: 340px; left: 40px; background: #ffd630; } 100% { bottom: 0; left: 40px; background: #f00; } } @keyframes sunrise { 0% { bottom: 0; left: 340px; background: #f00; } 33% { bottom: 340px; left: 340px; background: #ffd630; } 66% { bottom: 340px; left: 40px; background: #ffd630; } 100% { bottom: 0; left: 40px; background: #f00; } } #cloud { position: relative; top: 50px; left: -100px; opacity: 0; z-index: 3; } #cloud.VeryHuo { -webkit-animation-name: cloud; -webkit-animation-duration: 12s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: cloud; -moz-animation-duration: 12s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: cloud; -ms-animation-duration: 12s; -ms-animation-timing-function: ease; -ms-animation-iteration-count: 1; -ms-animation-direction: normal; -ms-animation-delay: 0; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: cloud; animation-duration: 12s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @-webkit-keyframes cloud { 0% { opacity: 0; left: -100px; } 50% { opacity: 1; left: 60px; } 75% { opacity: 1; left: 100px; } 100% { opacity: 0; left: 500px; } } @-moz-keyframes cloud { 0% { opacity: 0; left: -100px; } 50% { opacity: 1; left: 60px; } 75% { opacity: 1; left: 100px; } 100% { opacity: 0; left: 500px; } } @-ms-keyframes cloud { 0% { opacity: 0; left: -100px; } 50% { opacity: 1; left: 60px; } 75% { opacity: 1; left: 100px; } 100% { opacity: 0; left: 500px; } } @keyframes cloud { 0% { opacity: 0; left: -100px; } 50% { opacity: 1; left: 60px; } 75% { opacity: 1; left: 100px; } 100% { opacity: 0; left: 500px; } } .cloud { border-radius: 90px / 30px; width: 160px; height: 50px; background: #fff; position: absolute; top: 10px; } .cloud-2 { left: 50px; top: 0; } .cloud-3 { left: 110px; top: 20px; } #moon { position: relative; opacity: 0; top: 50px; left: -100px; } #moon.VeryHuo { -webkit-animation-name: moon; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: moon; -moz-animation-duration: 10s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: moon; -ms-animation-duration: 10s; -ms-animation-timing-function: ease; -ms-animation-iteration-count: 1; -ms-animation-direction: normal; -ms-animation-delay: 0; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: moon; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @-webkit-keyframes moon { 0% { opacity: 0; left: -100px; } 50% { opacity: 0; left: -100px; } 90% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 50px; } } @-moz-keyframes moon { 0% { opacity: 0; left: -100px; } 50% { opacity: 0; left: -100px; } 90% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 50px; } } @-ms-keyframes moon { 0% { opacity: 0; left: -100px; } 50% { opacity: 0; left: -100px; } 90% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 50px; } } @keyframes moon { 0% { opacity: 0; left: -100px; } 50% { opacity: 0; left: -100px; } 90% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 50px; } } .moon { width: 100px; height: 100px; border-radius: 50px; background: #fff; position: absolute; } .moon-2 { background: #525252; position: absolute; top: -20px; left: 20px; } #code { float: left; margin: 0 0 0 20px; width: 494px; } ul.headers { overflow: hidden; } ul.headers li { float: left; width: 85px; border: dashed 1px #ccc; margin: 0 4px; } ul.headers li a { display: block; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; padding: 10px; } ul.headers li a:hover, ul.headers li a:active { background: #ccc; color: #fff; } #tab_content { border: #ccc 1px dashed; margin: 20px 0 20px 3px; padding: 0 0 20px 10px; width: 456px; } div.tab { font-family: Arial, Helvetica, sans-serif; margin: 30px 0 0 10px; } div.tab pre { font-family: "Courier New", Courier, monospace; font-size: 13px; } input[type="button"] { margin: 20px 0 0 165px; padding: 5px; } </style> </head> <body style="width: 98%;"> <div id="container"> <h1>A Simple Scene Animated with CSS3 <span>(requires Chrome, Safari, Firefox 5+, or IE10 PP3)</span></h1> <div id="left"> <div id="sky" class="target"> <div id="cloud" class="target"> <div class="cloud cloud-1"></div> <div class="cloud cloud-2"></div> <div class="cloud cloud-3"></div> </div> <div id="sun" class="target"></div> <div id="moon" class="target"> <div class="moon"> </div> <div class="moon moon-2"> </div> </div> <div id="ground" class="target"></div> </div> <input type="button" value="Animate THE SCENE" id="startbutton"> <p><strong>Use the button above to start and reset the animation.</strong></p> <p>Use the tabs at top right to view the code for each element of the animation. No images, no <b>Java</b>Script. The only JavaScript on this page is for the button that starts and resets the animation, and for the tabs.</p> <p>This demo was created for <a href="#">this article</a> on Smashing Magazine.</p> </div> <div id="code"> <div id="sidebar_tabs"> <ul class="headers"> <li><a href="#" class="tablink">Sun</a></li> <li><a href="#" class="tablink">Sky</a></li> <li><a href="#" class="tablink">Ground</a></li> <li><a href="#" class="tablink">Cloud</a></li> <li><a href="#" class="tablink">Moon</a></li> </ul> <div id="tab_content"> <div class="tab tab1"> <pre> #sun.VeryHuo { animation-name: sunrise; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @keyframes sunrise { 0% { bottom: 0; left: 340px; background: #f00; } 33% { bottom: 340px; left: 340px; background: #ffd630; } 66% { bottom: 340px; left: 40px; background: #ffd630; } 100% { bottom: 0; left: 40px; background: #f00; } } </pre> </div> <div class="tab tab2"> <pre> #sky.VeryHuo { animation-name: sky; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @keyframes sky { 0% { background-color: #525252; } 33% { background-color: #6293e5; } 66% { background-color: #6293e5; } 100% { background-color: #525252; } } </pre> </div> <div class="tab tab3"> <pre> #ground.VeryHuo { animation-name: ground; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @keyframes ground { 0% { background: #6c5228; } 33% { background: #48a037; } 66% { background: #48a037; } 100% { background: #6c5228; } } </pre> </div> <div class="tab tab4"> <pre> #cloud.VeryHuo { animation-name: cloud; animation-duration: 12s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @keyframes cloud { 0% { opacity: 0; left: -100px; } 50% { opacity: 1; } 75% { opacity: 1; left: 100px; } 100% { opacity: 0; left: 500px; } } </pre> </div> <div class="tab tab5"> <pre> #moon.VeryHuo { animation-name: moon; animation-duration: 10s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-delay: 0; animation-play-state: running; animation-fill-mode: forwards; } @keyframes moon { 0% { opacity: 0; left: -100px; } 50% { opacity: 0; left: -100px; } 90% { opacity: 0; left: -100px; } 100% { opacity: 1; left: 50px; } }</pre> </div> </div> </div> </div> </div> <script src="http://www.veryhuo.com/uploads/common/js/jquery-1.7.min.js"></script> <script> $(function () { var s = null, AnimationSpace = { settings: { tabHeaders: null, tabSections: null, currentIndex: null, speed: 800, collection: null, i: null, j: null, startButton: $("#startbutton") }, init: function () { s = this.settings; s.tabSections = $("div.tab"); $(s.tabSections[0]).slideDown(s.speed); $(s.tabSections[1]).slideUp(s.speed); $(s.tabSections[2]).slideUp(s.speed); $(s.tabSections[3]).slideUp(s.speed); $(s.tabSections[4]).slideUp(s.speed); this.getClickedTab(); this.startAnimation(); }, getClickedTab: function () { s = this.settings; s.tabHeaders = $("#sidebar_tabs ul.headers a"); s.collection = $("#tab_content div.tab"); $(s.tabHeaders).click(function () { s.currentIndex = $(this).parent().index(); for (s.i = 0, s.j = s.collection.length; s.i < s.j; s.i += 1) { if (s.i !== s.currentIndex) { $(s.tabSections[s.i]).slideUp(s.speed); } else { $(s.tabSections[s.i]).slideDown(s.speed); } } return false; }); }, startAnimation: function () { s = this.settings; s.startButton.click(function() { $("div.target").toggleClass("VeryHuo"); if (s.startButton.attr("value") === "Animate THE SCENE") { s.startButton.attr("value", "RESET THE ANIMATION"); } else { s.startButton.attr("value", "Animate THE SCENE"); } }); } }; AnimationSpace.init(); }); </script> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>  <div style="display:none;"> <script type="text/javascript" src="/liehuo.net/js/stat.js"></script> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!