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;
    }
    

      

  • 相关阅读:
    《OD大数据实战》HDFS入门实例
    Python-操作Excel
    python操作word
    pandas操作Excel
    pyqt5-表格TableWidGet
    pyqt5-动画组QAnimationGroup
    pyqt5--动画
    pyqt5-QTDesigner--UI文件的使用方式
    pyqt5-QTDesigner--控件操作
    nodejs中cookie、session的使用
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/4146841.html
Copyright © 2011-2022 走看看