CSS3实现光束和波浪

发布时间:2017-03-16

概述

经常在网上看到一些网站做一些波浪和光束的特效,以为是flash实现,看过代码后,突然发现,竟然是css3实现的,太强大了。于是分享这个案例,希望能帮到您。

详细

页面html代码:

<div class="wrap">    <div class="content">      <div class="text">         <p>人生在旅途,需要您的指引</p>      </div>      <div class="miscbox">         <div class="tower"></div>         <div class="towerlight"></div>         <div class="beam"></div>      </div>   </div>   <div class="wave1">     <div class="wave"></div>    </div></div>

样式代码:

<style type="text/css">html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,em,button{margin:0;padding:0;}body{font-size:12px;font-family:Simsun,sans-serif;color:#333;}img,fieldset{border:0 none}input,textarea{font-size:12px;}textarea{resize:none;}table{border-collapse:collapse;border-spacing:0;}a{color:#003d7e;text-decoration:none;}a:hover{text-decoration:underline;}h1,h2,h3,h4,h5,h6{font-family:"Times New Roman",Simsun;}ul,ol,li{list-style:none outside none;}dfn{font-style:normal;}.content,.text,#footer{width:800px;}.logo,.tower,.cruise{background:url(images/un_pic.png) no-repeat;}.wrap{background:#1158e7 url(images/bg.jpg) no-repeat center bottom;width:100%;overflow:hidden;}.content{position:relative;z-index:1;height:480px;margin:0 auto;padding-top:100px;}.logo{ position: relative;z-index:5; width:144px;height:54px;margin:0 auto;overflow:hidden;text-indent:-500px;background-position:0 0;}.text{color:#fff;display:block;font-family:"microsoft yahei","simhei",sans-serif;font-size:24px;font-weight:normal;text-align:center;margin:30px auto;padding:0;}a.goback{display:block;position: relative;z-index: 4; width:112px;margin:20px auto;padding:8px 0;color:#fff;font-family:"microsoft yahei","simhei",sans-serif;font-size:16px;text-align:center;text-decoration:none;background-color:#0f4dc5;}a.goback:hover{background-color:#3f92f0;}.tower{background-position:0 -127px;position:absolute;z-index:2;top:140px;left:20px;width:116px;height:264px;}.towerlight{position:absolute;z-index:1;left:52px;top:166px;width:52px;height:52px;background-color:#fefa90;box-shadow:0 0 50px rgba(255,248,74,1);-webkit-animation:3s linear 0s none infinite light;-moz-animation:3s linear 0s none infinite light;animation:3s linear 0s none infinite light;}@-webkit-keyframes light{0%{box-shadow:0 0 50px rgba(255,254,165,1);}50%{box-shadow:0 0 10px rgba(255,248,74,1);}100%{box-shadow:0 0 50px rgba(255,254,165,1);}}@-moz-keyframes light{0%{box-shadow:0 0 50px rgba(255,254,165,1);}50%{box-shadow:0 0 10px rgba(255,248,74,1);}100%{box-shadow:0 0 50px rgba(255,254,165,1);}}@keyframes light{0%{box-shadow:0 0 50px rgba(255,254,165,1);}50%{box-shadow:0 0 10px rgba(255,248,74,1);}100%{box-shadow:0 0 50px rgba(255,254,165,1);}}.beam{position:absolute;z-index:3;left:-232px;top:75px;width:973px;height:198px;background:url(images/beam.png) no-repeat;-webkit-transform:rotate(15deg);transform:rotate(15deg);-webkit-transform-origin:308px 115px;transform-origin:308px 115px;-webkit-animation:10s linear 0s none infinite beam;-moz-animation:10s linear 0s none infinite beam;animation:10s linear 0s none infinite beam;}@-webkit-keyframes beam{0%{ -webkit-transform:rotate(15deg);}50%{ -webkit-transform:rotate(65deg);}100%{ -webkit-transform:rotate(15deg);}}@keyframes beam{0%{transform:rotate(15deg);}50%{transform:rotate(65deg);}100%{transform:rotate(15deg);}}.wave1{position:relative;z-index:3;width:100%;margin-top:-220px;color:#999;background:url(images/bl.png) repeat-x 0 0;-webkit-animation:8s linear 0s none infinite tweenxx;-moz-animation:8s linear 0s none infinite tweenxx;animation:8s linear 0s none infinite tweenxx;}.wave{height:220px;background:url(images/bl.png) repeat-x 330px 0;-webkit-animation:10s linear 0s none infinite tweenx;-moz-animation:10s linear 0s none infinite tweenx;animation:10s linear 0s none infinite tweenx;}@-webkit-keyframes tweenx{0%{background-position:0 0;}100%{background-position:1600px 0;}}@-moz-keyframes tweenx{0%{background-position:0 0;}100%{background-position:1600px 0;}}@keyframes tweenx{0%{background-position:0 0;}100%{background-position:1600px 0;}}@-webkit-keyframes tweenxx{0%{background-position:0 0;}100%{background-position:-1600px 0;}}@-moz-keyframes tweenxx{0%{background-position:0 0;}100%{background-position:-1600px 0;}}@keyframes tweenxx{0%{background-position:0 0;}100%{background-position:-1600px 0;}}/*-----footer-----*/#footer{margin:0 auto;text-align:center;color:#0053aa;font-family:arial;line-height:1.6;padding:8px 0 0 0;}#footer a{color:#0053aa;}.copyright{color:#333333;}/*-----media-----*/@media screen and (max-width:640px) {body{min-width:320px;}.content,.text,#footer{width:320px;}.content { height: 500px;padding-top: 20px;}.text{font-size: 18px;}.miscbox{position: relative;z-index: -1;height: 264px;width: 116px;margin: 0 auto;}.tower{left: 0;top: 0; }.towerlight {left: 32px;top: 30px;}.beam {left: -255px;top: -62px;}.wave1 {margin-top: -75px;}}</style>


语法解析:

animation 属性是一个简写属性,用于设置六个动画属性:


animation-name规定需要绑定到选择器的 keyframe 名称。。
animation-duration规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。


animation: name duration timing-function delay iteration-count direction;


keyframes定义和用法: 

通过 @keyframes 规则,您能够创建动画。 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中,您能够多次改变这套 CSS 样式。 以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。 0% 是动画的开始时间,100% 动画的结束时间。 为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

@keyframes animationname {keyframes-selector {css-styles;}}
animationname必需。定义动画的名称。
keyframes-selector

必需。动画时长的百分比。

合法的值:

  • 0-100%

  • from(与 0% 相同)

  • to(与 100% 相同)

css-styles必需。一个或多个合法的 CSS 样式属性。
本实例支付的费用只是购买源码的费用,如有疑问欢迎在文末留言交流,如需作者在线代码指导、定制等,在作者开启付费服务后,可以点击“购买服务”进行实时联系,请知悉,谢谢
手机上随时阅读、收藏该文章 ?请扫下方二维码