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>



  • 相关阅读:
    day22 面向对象
    springMVC中 POST 请求数据变乱码问题
    Handler dispatch failed; nested exception is java.lang.AbstractMethodError: Method com/mchange/v2/c3p0/impl/NewProxyResultSet.isClosed()Z is abstract
    java.sql.SQLException: Unknown system variable 'tx_isolation'
    Mysql命令
    paas相关,添加ing
    Angular2中实现基于TypeScript的对象合并方法:extend()
    NgStyle和NgIf控制HTML标签显示的区别
    执行ng build --prod --aot命令报错
    JavaScript中的小陷阱(不定期更新。。)
  • 原文地址:https://www.cnblogs.com/zhouzme/p/5758428.html
Copyright © 2011-2022 走看看