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>
  • 相关阅读:
    boost开发指南
    boost bind function用法说明
    boost库 bind/function的使用
    OpenCV——PS滤镜, 碎片特效
    pthread_join()
    基于用例点来度量软件规模并管理进度 之中的一个
    tomcat的JK和JK2
    rackup工具
    ORACLE EXP命令
    很好的理解遗传算法的样例
  • 原文地址:https://www.cnblogs.com/double405/p/5351296.html
Copyright © 2011-2022 走看看