很酷的光线滚动效果

简介:

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

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>



目录
相关文章
|
2月前
宇宙星星转动特效带背景音乐引导页源码
宇宙星星转动特效带背景音乐引导页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
51 7
宇宙星星转动特效带背景音乐引导页源码
|
3月前
|
开发框架
threejs做特效:实现物体的发光效果-EffectComposer详解!
【8月更文挑战第7天】实现物体的发光效果-EffectComposer详解!
315 6
threejs做特效:实现物体的发光效果-EffectComposer详解!
|
3月前
|
前端开发
CSS动画新境界:打造逼真的水罐摇晃动效!
CSS动画新境界:打造逼真的水罐摇晃动效!
|
5月前
|
数据安全/隐私保护 计算机视觉
图像处理之玻璃水印特效(祝大家圣诞节快乐)
图像处理之玻璃水印特效(祝大家圣诞节快乐)
41 8
|
6月前
|
前端开发
纯css实现的3D立体鸡蛋动画视觉效果
纯css实现的3D立体鸡蛋动画视觉效果
66 6
纯css实现的3D立体鸡蛋动画视觉效果
|
6月前
超简单的html+css魔幻霓虹灯文字特效
超简单的html+css魔幻霓虹灯文字特效
50 3
超简单的html+css魔幻霓虹灯文字特效
|
11月前
|
前端开发
HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果
|
JavaScript 前端开发
WebGL 手撸3d贺卡+小草飘动滤镜
前言 图片 2022-2-15 webGL初始化(常规操作) 获取 WebGLRenderingContext const gl = canvas.getContext('webgl'); 编译shader并把编译好的shader附加到创建好的program中 //顶点着色器 const vertShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertShader,vertSource);//vertSource:着色器源码 gl.compileShader(vertShader);
WebGL 手撸3d贺卡+小草飘动滤镜
|
前端开发 JavaScript 容器
跟着音乐学习CSS放松一下眼睛吧
最近还在学习Javascript,然后晚上写个东西复习一下CSS,这里是小森,IT人一定要保护好眼睛哦,这次带来了我最喜欢的宫崎骏的纯音,听着纯音来学习一下这个特效的实现逻辑吧! 纯音乐-回到那个夏天 你也可以点击这几查看效果
137 0
跟着音乐学习CSS放松一下眼睛吧
|
前端开发 容器 Web App开发
纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/QxbmxJ 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1160 0