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

      

  • 相关阅读:
    flexbox弹性盒子布局
    LAMP环境 源码包安装
    用条件注释判断浏览器版本,解决兼容问题
    事件冒泡和事件捕获
    为js和css文件自动添加版本号
    uEditor独立图片上传
    修改netbeans模版头部的说明
    thinkphp多表关联并且分页
    thinkphp 独立分组配置
    荣耀路由HiLink一键组网如何实现?
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/4146841.html
Copyright © 2011-2022 走看看