很酷的光线滚动效果

简介:

今天看到一个国外的网站有这么个效果,很好奇如何实现的,研究了一番,将效果实现了,很酷,不用任何图片

http://abemedia.co.uk/content-management-systems-cms


<style type="text/css">
    @-webkit-keyframes rotate1 {
        from { -webkit-transform: rotate(0deg); }
        to	{ -webkit-transform: rotate(20deg); }
    }
</style>
<div style="height: 1000px; background-color: #23869D; overflow: hidden;">
    <div style="padding-top:2180px; margin:-2000px 0 0 -2000px; width:4000px; height: 4000px;-webkit-animation-name: rotate1; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;box-sizing: border-box;">
    <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(20deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
    <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(40deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
    <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(60deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
    <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(80deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
    <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(100deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
    <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(120deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
    <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(140deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
    <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(160deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
    <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(180deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
    </div>
</div>



目录
相关文章
|
5月前
|
前端开发
CSS动画新境界:打造逼真的水罐摇晃动效!
CSS动画新境界:打造逼真的水罐摇晃动效!
|
8月前
|
前端开发
纯css实现的3D立体鸡蛋动画视觉效果
纯css实现的3D立体鸡蛋动画视觉效果
79 6
纯css实现的3D立体鸡蛋动画视觉效果
|
8月前
如何用SCSS制作小铃铛振动/震动/摇晃/晃动的特效/效果?
如何用SCSS制作小铃铛振动/震动/摇晃/晃动的特效/效果?
|
前端开发
HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果
|
前端开发 程序员 图形学
WebGL小姐姐教我学画画之起手式
WebGL小姐姐教我学画画之起手式
132 0
|
前端开发 JavaScript 容器
跟着音乐学习CSS放松一下眼睛吧
最近还在学习Javascript,然后晚上写个东西复习一下CSS,这里是小森,IT人一定要保护好眼睛哦,这次带来了我最喜欢的宫崎骏的纯音,听着纯音来学习一下这个特效的实现逻辑吧! 纯音乐-回到那个夏天 你也可以点击这几查看效果
146 0
|
前端开发 安全
仅使用 CSS 旋转制作八卦迷惑动画 🧘‍♀️
我之所以将其拿出来分享,一方面觉得它看起来比较酷,也像原作者所说的那样:看起来是个令人生畏的病毒,另一方面觉得作者的编码思路和代码值得了解学习下。
仅使用 CSS 旋转制作八卦迷惑动画 🧘‍♀️
|
前端开发 容器 Web App开发
如何用纯 CSS 创作一个圆环旋转错觉动画
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/oPWJNj/ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1233 0
|
前端开发 容器 Web App开发
纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/QxbmxJ 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1174 0
|
C#
好玩的WPF第三弹:颤抖吧,地球!消失吧,地球!
原文:好玩的WPF第三弹:颤抖吧,地球!消失吧,地球! 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https://blog.csdn.net/NoMasp/article/details/46476421 我承认这一篇比较标题党,不过下面这个GIF貌似也和适合这个标题嘛。
873 0