zoukankan      html  css  js  c++  java
  • css3 图标上下移动动画

    @-webkit-keyframes bird{
         0% {
             -moz-transform: translate(0,0);
    	     -webkit-transform: translate(0,0);
    	     -o-transform: translate(0,0);
    	     -ms-transform: translate(0, 0);
    	     transform: translate(0,0);
         }
    
         25% {
             -moz-transform: translate(0,-10px);
    	     -webkit-transform: translate(0,-10px);
    	     -o-transform: translate(0,-10px);
    	     -ms-transform: translate(0, -10px);
    	     transform: translate(0,-10px);
         }
         50% {
             -moz-transform: translate(0,-20px);
    	     -webkit-transform: translate(0,-20px);
    	     -o-transform: translate(0,-20px);
    	     -ms-transform: translate(0, -20px);
    	     transform: translate(0,-20px);
         }
    
          75% {
             -moz-transform: translate(0,-10px);
    	     -webkit-transform: translate(0,-10px);
    	     -o-transform: translate(0,-10px);
    	     -ms-transform: translate(0, -10px);
    	     transform: translate(0,-10px);
         }
    
          100% {
             -moz-transform: translate(0,0);
    	     -webkit-transform: translate(0,0);
    	     -o-transform: translate(0,0);
    	     -ms-transform: translate(0, 0);
    	     transform: translate(0,0);
         }
    }
    

      

    .qi:not(:target),.birds:not(:target),.hong:not(:target){
    	-webkit-animation-name: bird;
    	-webkit-animation-duration: 5s;
    	-webkit-animation-timing-function: linear;
    	-webkit-animation-iteration-count: infinite;
    	-moz-animation-name: bird;
    	-moz-animation-duration: 5s;
    	-moz-animation-timing-function: linear;
    	-moz-animation-iteration-count: infinite;
    	-o-animation-name: bird;
    	-o-animation-duration: 5s;
    	-o-animation-timing-function: linear;
    	-o-animation-iteration-count: infinite;
    	-ms-animation-name: bird;
    	-ms-animation-duration: 5s;
    	-ms-animation-timing-function: linear;
    	-ms-animation-iteration-count: infinite;
    	animation-name: bird;
    	animation-duration: 5s;
    	animation-timing-function: linear;
    	animation-iteration-count: infinite;
    }
    

      

  • 相关阅读:
    POJ3928 Pingpong(统计比 K 小的个数 + 树状数组)
    C++ Primer Plus读书笔记
    HDU1698Just a Hook(线段树 + 区间修改 + 求和)
    POJ3468A Simple Problem with Integers(区间加数求和 + 线段树)
    POJ2528Mayor's posters(离散化 + 线段树)
    约瑟夫环
    编写一个JavaWeb项目
    四则运算在线答题系统
    JAVA项目中的常用的异常处理情况
    第八周动手动脑
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/4146841.html
Copyright © 2011-2022 走看看