zoukankan      html  css  js  c++  java
  • 很酷的光线滚动效果

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

    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; 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-180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(20deg);  0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
        <div style="border-180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(40deg);  0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
        <div style="border-180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(60deg);  0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
        <div style="border-180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(80deg);  0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
        <div style="border-180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(100deg);  0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
        <div style="border-180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(120deg);  0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
        <div style="border-180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(140deg);  0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
        <div style="border-180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(160deg);  0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
        <div style="border-180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(180deg);  0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div>
        </div>
    </div>



  • 相关阅读:
    SQL清除数据库日志方法
    TFS服务器及服务帐号迁域的处理
    about WBS
    ASP.NET URL Rewrite. URL重写
    查看SQL Server中某数据库下每个表占用的空间大小
    [西安招聘] 微软西安分公司 招聘.NET软件工程师,MOSS开发工程师
    企业微信的数据打通
    常见Post请求与实现
    Python解释器与__pycache__文件夹的生成
    微信开放平台OpenID与UnionID的区别
  • 原文地址:https://www.cnblogs.com/zhouzme/p/5758428.html
Copyright © 2011-2022 走看看