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>



  • 相关阅读:
    JavaScript的BOM编程,事件-第4章
    C#获取程序目录
    e3商城_day05
    第三届中国云计算用户大会笔记和心得
    Android应用源码 概览
    电脑用bat脚本给手机批量自动安装apk文件 autoInstall.bat
    网上的很多Android项目源码有用吗?Android开发注意的地方。
    Android 简历 怎么写? 月薪10K,20K+, 怎么拿到面试?
    android 职业 转行
    我的Python学习之路(2)
  • 原文地址:https://www.cnblogs.com/zhouzme/p/5758428.html
Copyright © 2011-2022 走看看