网站logo扫光效果CSS写法
现在许多网站可以看到logo上一道光芒扫过的效果,这种效果最早是用flash实现,后来gif动画也可以做出来,不过现在流行的是纯CSS实现。本人也是从别人网站看到CSS写法,加到我的网站中,结果发现logo处光芒扫过超出了范围,用overflow:hidden语法也不管用,可有知道哪里问题朋友还请赐教。下面是网上找到的CSS光芒扫过logo代码
logo:before{ /**根据logo外div样式名称修改before前名称**/ content:""; position: absolute; left: -665px; /**第一个数字参数控制扫光速度,数字越大越慢**/ top: -460px; width: 200px; height: 10px; /**光标的宽度,可根据实际调整**/ background-color: rgba(255,255,255,.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 1.5s ease-in 1s infinite;/**第一个数字参数控制扫光速度,数字越大越慢**/ } @-webkit-keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @-o-keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @-moz-keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } }
使用类似效果网站如知更鸟:https://zmingcx.com/ https://101dh.cn/
版权声明:本文由指尖十年发布,如需转载请注明出处,如有问题可在下面留言。
本站提供的一切软件、教程和内容信息来自网络收集整理,版权争议与本站无关,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系。