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>



  • 相关阅读:
    【译文】纯HTML5捕获音频流和视频流
    Vue中scoped属性浅析
    jmeter 在liunx 环境下的测试问题汇总
    windows Jmeter 安装环境配置
    基于ghz 对grpc 服务进行压测
    使用powershell脚本自动发布
    SqlServer 重建索引脚本
    配置nginx代理本地多个站点到制定域名
    Xposed 插件开发入门教程(一)
    python 字典
  • 原文地址:https://www.cnblogs.com/zhouzme/p/5758428.html
Copyright © 2011-2022 走看看