zoukankan      html  css  js  c++  java
  • css3中的动画功能

    直接用我的一段代码演示下css3中实现动画效果的事例,让一个div自动旋转起来

    代码如下:

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
      <style type="text/css">
        .ellipsis{
            200px;
            height:200px;
            line-height:200px;
            border:1px solid red;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            animation: 5.5s linear 0s normal none infinite rotate;
        }
        @-webkit-keyframes rotate{
            from{-webkit-transform:rotate(0deg)}
            to{-webkit-transform:rotate(360deg)}
        }
        @-moz-keyframes rotate{
            from{-moz-transform:rotate(0deg)}
            to{-moz-transform:rotate(360deg)}
        }
        @-ms-keyframes rotate{
            from{-ms-transform:rotate(0deg)}
            to{-ms-transform:rotate(360deg)}
        }
        @-o-keyframes rotate{
            from{-o-transform:rotate(0deg)}
            to{-o-transform:rotate(360deg)}
        }
      </style>
     </head>
     <body>
      <div class="ellipsis">ellipsisellipsisellipsisellipsisellipsisellipsisellipsis</div>
    
     </body>
    </html>
  • 相关阅读:
    json格式转换
    早该知道的7个JavaScript技巧
    SPFA加上SLF时判负环的条件
    HDU 4061 A Card Game
    线性筛法求素数
    STL之deque
    POJ 3219 二项式系数
    HDU 4296 Buildings
    HDU 4292 Food (成都赛区网络赛第五题,拆点网络流)
    拆点网络流(POJ3281)
  • 原文地址:https://www.cnblogs.com/double405/p/5351296.html
Copyright © 2011-2022 走看看