很酷的光线滚动效果

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

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-09-21 22:09:12

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

jQuery实现的向下图文信息滚动效果

  jquery实现的图文滚动效果,图文内容经过指定的间隔时间自动向下滚动显示,效果非常酷.有需要的小伙伴可以参考下. WEB页面需要展示网站最新信息,如微博动态.余票信息.路况监控等项目中常见的实时数据滚动效果,我们可以用jQuery来实现前端信息滚动效果.本文我们将结合实例为大家讲解如何使用jQuery来实现图文信息滚动效果. 我们以新浪微博信息滚动为背景,html中包含了多条微博图文信息,结构如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 <div id="con&

js实现图片上下滚动:js实现文字定时上下滚动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

jquery实例代码:链接调整平滑滚动效果

文章简介:jquery实现锚点跳转平滑滚动效果. <!DOCTYPE html> <head> <title>jquery实现锚点跳转平滑滚动效果</title> <style type="text/css"> body{padding:0; margin:0;} a,a:visited{text-decoration:none; color:#000; cursor:pointer;} a:hover{text-decora

30个JS滑动和滚动效果

现在jQuery.Mootools.Scriptallicious.YUI和Prototype等JavaScript框架可以用轻量的代码来获得和Flash一样的效果. 现在jQuery.Mootools.Scriptallicious.YUI和Prototype等JavaScript框架可以用轻量的代码来获得和Flash一样的效果,从而可以替换掉Flash,这也同样给网站开发人员和设计师很大的创意空间. 但是如何在不让用户分散注意力并增加网站的价值的情况下高效的使用这些框架? 看一下下面的这30

网页设计技巧:视差滚动效果和图形化在网页中的呈现

文章描述:ONE 视差滚动效果 Parallax Scrolling. ONE 视差滚动效果 Parallax Scrolling 大家小时候是否玩过红白机或小霸王上面的游戏? 这些游戏基本上都是通过前景与背景在场景移动时产生不同的视差,从而达到简单的立体效果 所以说视差滚动不是啥新鲜事儿,我们小时候就玩过了-- 目前这种视差滚动效果被越来越多的国外网站所应用, 成为网页设计的热点趋势 给它以重新定义 不过这类效果的使用也需要看具体环境和最终页面出来的整体性能,防止页面过于拖沓. 其次,设计上要

网页设计视觉体验:WEBJX收集国外滚动效果网页设计案例

文章描述:网页设计中30个惊人的滚动效果. 近些年来,用户对视觉体验的要求不断提高,而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求.滚动效果被越来越多的国外网站所应用,成为网页设计的热点趋势.在本文中,将为你展示网页设计中30个惊人的滚动效果,厌倦了千篇一律,呆板网页设计的你也不妨一试. Peter Pearson Campaign Monitor Buero-Buero Lewers Siebennull Kalendiar [1] [2] [3] [4] [5]  下一页

图片组的连续滚动效果

现在的网页上常常见到图片组的连续滚动效果,如果你掌握了AS的基础知识,也能做出这样的效果,如果你想学,那么跟我来吧! 由于源码中只有一帧,所以就不贴图示了.主要的东东是一个图片MC,实例名是"m".制作步骤是这样的.先把一组图连起来,组合,相对舞台选择水平和垂直居中,再复制两个图片组合,分别放在两侧衔接好.新建一个MC,把图片MC(实例名为"m")放进去,相对舞台选择水平和垂直居中,不做别的处理.给这个MC起实例名为"mc".接下来该写代码了,在

Flash中实现JS的图片滚动效果

js 网页中的图片滚动效果,js的对象不太熟,就用flash来了. 大体的流程. 图片加载,效果层加载,设定效果层的_x,_y,使之于图片一一对应. 然后鼠标事件,鼠标经过,stopMove,鼠标点击,openPIC in IE. 图片循环不见断的实现模型: var picNum:Number;//总图片数,解析xml可得.  var picMargin:Number=5;//设置pic的间隔;  if(pic._x<(0-pic._width)){  pic._x=(pic._width+pi

FW制作照片连续滚动效果

本文中我们建立一个具有胶片形式的动态影视Banner,首先制作一个具有胶片效果的边框,接着使用帧面板制作GIF动画效果.主要熟悉Fireworks MX 2004中组合.帧面板.修改画布大小.动画面板等使用.文章末尾提供原文件供大家下载参考. 下面我们看具体操作步骤. 1) 新建一个353×51的文件,设置背景颜色为黑色,如图1. 图1  新建一个文件 2) 由于图像相对较小,为了方便编辑需要改变视图大小,点击"视图"菜单,选择"缩放比例"150%,如图2所示. 图