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;
width: 24px;
height: 35px;
overflow: hidden;
}
.td img {
width: 24px;
height: 35px;
}
.mask {
position: absolute;
width: 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>
css3实现画对号动画的更多相关文章
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
- css3实现循环执行动画，且动画每次都有延迟
一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- css3 实现逐帧动画
css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- [CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...
随机推荐
- 12、java5锁java.util.concurrent.locks.Lock之ReentrantLock
JDK文档描述: public interface LockLock 实现提供了比使用 synchronized 方法和语句可获得的更广泛的锁定操作.此实现允许更灵活的结构,可以具有差别很大的属性,可 ...
- python之函数用法startswith()
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法startswith() #http://www.runoob.com/python/ ...
- 洛谷 P1736 创意吃鱼法
题目描述 题目链接:https://www.luogu.org/problemnew/show/P1736 回到家中的猫猫把三桶鱼全部转移到了她那长方形大池子中,然后开始思考:到底要以何种方法吃鱼呢( ...
- 基于SpringSecurity和JWT的用户访问认证和授权
发布时间:2018-12-03 技术:springsecurity+jwt+java+jpa+mysql+mysql workBench 概述 基于SpringSecurity和JWT的用户访 ...
- 第一个go的web程序；调用七牛云存储的音频api问题解决；条件搜寻文件中的内容,字符串拼接+在上一行
package main import ( "html/template" "io" "io/ioutil" "log" ...
- 初始建库SGA该设多大、PGA该设多大的建议
1.背景情况 非常多新业务系统上线,大部分DBA也不懂业务.就闷着头建库,SGA值设多大,PGA设多大,随便指定一个值就得了,执行一段时间后,或许就由于这个值是随便指定的.比如SGA+PGA大于总物理 ...
- JavaScript判断是否全为中文，是否含有中文
来源于:http://blog.csdn.net/yenange/article/details/7463897 第一种代码(全为中文则返回"true",不全为中文则返回" ...
- Android短信管家视频播放器代码备份
自己保留备份,增强记忆 这是video的类 public class VideoActivity extends Activity { /** * 解析网络页面 */ private WebVie ...
- url 中非法字符替换,java 正则替换
url在传输时不允许的一些字符串,参考自:http://www.ietf.org/rfc/rfc1738.txt 以下字符用java正则替换为"_",一句话搞定: "{& ...
- 看过这两张图，就明白 Buffer 和 Cache 之间区别
Buffer常见的是这个: 对,就是铁道端头那个巨大的弹簧一类的东西.作用是万一车没停住,撞弹簧上减速慢,危险小一些.叫缓冲. Cache常见的是这个: 没错,就是一种保管箱.看到右边那个被锈掉的Fo ...