zoukankan      html  css  js  c++  java
  • CSS3+HTML5特效7

     效果如下

     
     
     
     
     
     
     
     
     
     
     

    实现原理:

    1. 利用CSS3的@keyframes规则创建动画效果;
    2. 使用CSS3的animation效果完成滚动切换。

    代码说明:

    1. 样式表中@-webkit-keyframes@keyframes定义了旋转360度的操作;
    2. 样式表中.border div定义了div的基本样式,红色的10px圆形;
    3. 10个div嵌套使用;
    <style>
    @-webkit-keyframes rotate {
      100% {
        -webkit-transform: rotate(-360deg);
      }
    }
    
    @keyframes rotate {
      100% {
        transform: rotate(-360deg);
      }
    }
    
    .border{
      position: absolute;
      top: 10px;
      left: 10px;
       300px;
      height: 300px;
      border: 1px solid #ccc;
    }
    
    .border div {
      position: absolute;
      top: 50%;
      left: 50%;
       10px;
      height: 10px;
      border-radius: 50%;
      box-shadow: 0px 30px #FF0000;
      -webkit-animation: rotate 8s infinite linear ;
      animation: rotate 8s infinite linear ;
    }
    
    </style>
    
    <div class="border">
    <div> 
    <div> 
    <div> 
    <div> 
    <div> 
    <div> 
    <div> 
    <div> 
    <div> 
    <div> </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    

      

  • 相关阅读:
    poj 1080 dp
    Codeforces Round #280 (Div. 2)
    Codeforces Round #279 (Div. 2)f
    Codeforces Round #278 (Div. 1)
    Codeforces Round #276 (Div. 1)
    搜索
    debug 心得
    ZOJ 1633
    DRF 一对多序列化与反序列化
    HTTP协议
  • 原文地址:https://www.cnblogs.com/z-gia/p/3708968.html
Copyright © 2011-2022 走看看