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>



  • 相关阅读:
    四则运算3.2
    第二周进度条
    构建之法阅读笔记02
    四则运算2
    第一周进度条
    构建之法阅读笔记01
    四则运算 Python
    第一周第二周学习进度条
    《构建之法》学习中疑问
    小学四则运算1.0
  • 原文地址:https://www.cnblogs.com/zhouzme/p/5758428.html
Copyright © 2011-2022 走看看