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转换, ...
随机推荐
- 【Linux】使用cat命令创建文本文件
在Linux界面输入 Linux:/usr/test # cat >test01.sh 接着按回车,输入内容:"echo hello world !" 回车后按 ctrl+d ...
- P2093 零件分组【贪心算法练习题】
题目链接: http://codevs.cn/problem/4888/ https://www.luogu.org/problem/show?pid=2093 题目描述 某工厂生产一批棍状零件,每个 ...
- 转:Ogre内部渲染流程
以下是 Ogre 的代码中的详细说明: Renderable是OGRE中所有可渲染对象的抽象接口 这个接口抽象出了在渲染管线中的被分组的离散的可渲染对象基本的方法. 此接口的实现类必须是基于单一的材质 ...
- 微信小程序与手机APP区别
微信小程序与手机APP区别 ------------------<><><><>------------------ 微信小程序自去年年初,张小龙放话要 ...
- Linux经常使用命令-权限管理命令-其它权限管理命令
命令名称:chown 英文: change file ownership 命令所在路径:/bin/chown 语法:chown [用户][文件或者文件夹] 功能描写叙述:改变文件或者文件夹的全部者 范 ...
- cnpm不是内部或外部命令 cnpm: command not found
问题是处在于 你没用用淘宝的镜像 安装cnpm 不信 你打下cnpm -v, 看是 是不是也不是内部命令: 好了,那就安装下吧 npm install cnpm -g --registry=htt ...
- ios中创建自己的框架
如果你是IOS的新手,并有.net开发的背景(就像我一样),你可能到处去找,哪里有dll呢? 其实,IOS平台是使用框架而不是dll,框架里面包含公共头文件和二进制文件.很不幸,XCode并不支持你自 ...
- <转>LUA语法分析
本文选自:http://www.cnblogs.com/nazhizq/p/6516561.html 一步步调试,在lparser.c文件中luaY_parser函数是语法分析的重点函数,词法分析也是 ...
- std::string begin end
std::string 的begin到end是不包含 ‘\0’的
- webDriver.Close() 和 webDriver.Quit() 、webDriver.Dispose() 的区别
1. webDriver.Close() - Close the browser window that the driver has focus of //关闭当前焦点所在的窗口2. webDriv ...