css3样式3D扫光效果简介

Home / Article MrLee 2016-3-30 3773

网上随便搜索一下,关于这个技术文章不在少数,不过基本上代码都一样。然后没有啥注释。博主今天实验了一下,然后也搞了一个效果。总结了下,首先要位置对的上,其次是颜色和扫描背景能融合在一起,不然看起来不舒服。先看代码。
[css] .logo { overflow:hidden; position:relative } .logo:before { content:""; position:absolute; left:-665px; top:-460px; width:200px; height:15px; background-color:rgba(247,247,247,.5); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-animation:searchLights 1s ease-in 1s infinite; -o-animation:searchLights 1s ease-in 1s infinite; animation:searchLights 1s ease-in 1s infinite; } @-webkit-keyframes searchLights { 0% { left:-100px; top:0; } to { left:200px; top:100px; } }@-o-keyframes searchLights { 0% { left:-100px; top:0; } to { left:200px; top:100px; } }@-moz-keyframes searchLights { 0% { left:-100px; top:0; } to { left:200px; top:100px; } }@keyframes searchLights { 0% { left:-100px; top:0; } to { left:200px; top:100px; } } [/css]
首先,Logo是一个div的class值,当然,你可以是一个其它span啥的。然后我的背景不是纯白色,所以我的颜色值为:background-color: rgba(244,244,244,.5);最后就恼火就是位置,我反正似懂非懂搞定了。首先有4个searchLights,不知道为啥要4个,然后里面有2个left,我猜第一个是起始left,第二个为终点的left,然后居然是对的!看来验证成功。单位原来是px,但是看到单位是pc,应该是按比例来着的。然后keyframes查了下,这4个属性是4个浏览器的内核。分别是

浏览器支持

IE Firefox Chrome Safari Opera
目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
最后说一点,要达到完美,还是需要慢慢调节的。比如.logo还要有一个相对布局的属性,超过不显示
[css].logo{overflow:hidden;position:relative}[/css]
如果没有这个设置,效果看起来相当别扭!

本文链接:https://www.it72.com/8703.htm

推荐阅读
最新回复 (0)
返回