zoukankan      html  css  js  c++  java
  • css3实现画对号动画

    目标:实现对号动画,慢慢画出来的感觉;

    原理:外层div的背景是一个对号图片,用一个div做遮罩,让遮罩div层从左到右做运动一次即可实现动画,需要注意的是遮罩div的初始位置应该在外层div的外面;

    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>css对号动画</title>
    <style type="text/css">
    .td {
    	position: relative;
    	background: #5bd8ca url(d.png) no-repeat;
    	 24px;
    	height: 35px;
    	overflow: hidden;
    }
    .td img {
    	 24px;
    	height: 35px;
    }
    .mask {
    	position: absolute;
    	 24px;
    	height: 35px;
    	animation: myfirst 2s;
    	-moz-animation: myfirst 2s;
    	-webkit-animation: myfirst 2s;
    	-o-animation: myfirst 2s;
    	top: 0;
    	background: #5bd8ca;
    	left: 24px;
    }
    @keyframes myfirst {
    0% {
    left: 0;
    }
    100% {
    left:24px;
    }
    }
     @-moz-keyframes myfirst {
    0% {
    left: 0;
    }
    100% {
    left:24px;
    }
    }
     @-webkit-keyframes myfirst {
    0% {
    left: 0;
    }
    100% {
    left:24px;
    }
    }
     @-o-keyframes myfirst {
    0% {
    left: 0;
    }
    100% {
    left:24px;
    }
    }
    </style>
    </head>
    
    <body>
    <div class="td">
      <div class="mask"></div>
    </div>
    </body>
    </html>
    
  • 相关阅读:
    redis 数据类型详解 以及 redis适用场景场合
    angular.js记录
    Python chr() 函数
    Python frozenset() 函数
    Python 字典 dict() 函数
    Python set() 函数
    Python tuple 函数
    Python eval() 函数
    Python repr() 函数
    Python str() 函数
  • 原文地址:https://www.cnblogs.com/axl234/p/7000694.html
Copyright © 2011-2022 走看看