很酷的光线滚动效果

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

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>

很酷的光线滚动效果

时间： 2024-07-31 22:47:57

很酷的光线滚动效果的相关文章

利用原生JS实现网页1920banner图滚动效果

内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920banner图的切换效果,并针对低分辨率电脑设备进行了适配,实现了JS代码与HTML代码的完全分离,符合w3c的标准使用规范,希望能给各位开发者朋友以帮助和参考.如发现有缺陷和不足,欢迎大家予以指正,如有更好的意见或解决方法,可在评论区交流互动.一下为代码内容: <!DOCTYPE html> <

jQuery 随滚动条滚动效果（适用于内容页长文章）

直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollOut = $('.cookie-list'); //隐藏rollStart之后的区块 rollStart.before('<div class="da_rollbox">

信息无缝滚动效果marquee

横向滚动.纵向滚动 1. 解决滚动的空白向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动上下滚动实现无缝滚动1. innerHTML2. scrollTop3. offsetHeight4. setInterval()5. clearInterval() HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset

2016/2/26 <marquee></marquee>实现多种滚动效果

页面的自动滚动效果,可由javascript来实现,但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记不仅可以移动文字,也可以移动图片,表格等.语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容.重要属性:1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee direction=&

JS魔法堂：通过marquee标签实现信息滚动效果

一.前言有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签是其中一个较简单的实现方式.下面记录一下,供日后查阅. 二. marquee标签的基础知识示例: <marquee behavior="scroll" direction="left" loop="-1" scrollAmount="12" scrollDelay="

jquery实现多行文字图片滚动效果

今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function(opt,callback){if(!opt) var opt={};var _this=this.eq(0).find("ul:first");var lineH=_this.find("li:first").height(), line=opt.line?parse

jQuery 随滚动条滚动效果（固定版）

//侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的随动区块 rollStart.before('<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"

ios:仿照安卓小米商城head左右滚动效果（多屏滚动）

1.之前做的应用需要这个效果但是当时用的比较复杂(绘图)的方法来实现,现在想到了一个新的方法. 2.用到了http://www.cnblogs.com/yoon/p/3616503.html 里面的小技巧 3.思路: 主要是在新的scrollview中重写Layoutsubviews 代码如下: - (void)layoutSubviews { [super layoutSubviews]; for (UIView *view in self.subviews) { if (view.tag =

HTML标签marquee实现滚动效果

HTML标签marquee实现滚动效果转载自:http://www.cnblogs.com/zzuIvy/p/marqueeTest_1.html 页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要