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

      

  • 相关阅读:
    node 第一天
    VUE全局api
    VUE01指令
    位置属性
    dom总结
    animate.css与wow.js制作网站动效
    继承要点
    css3
    linux创建程序启动
    https://www.meitulu.com/ java下载图片
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/4146841.html
Copyright © 2011-2022 走看看