css3 keyframes animation
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img,ins,small,strong,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{margin:0;padding:0;}ol,ul{list-style:none;}:focus{outline:0;}a img{border:0;}img{vertical-align:top;}table{empty-cells:show;}ins{text-decoration:none;}del{text-decoration:line-through;}em{font-style:normal;}button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{border:none;padding:0;}.clearfix{*zoom:1;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}body{font:14px/1.5 "宋体";background:#fff;}a{color:#000;text-decoration:none;}a:hover{ text-decoration:underline;}.fl{float:left;}.fr{float:right;}.hide{display:none;}.show{display:block}.ad{display:block;height:auto;clear:both;margin-bottom:8px;overflow:hidden;zoom:1;}
#wrap{width:1000px;
height:auto;
clear:both;
margin:0 auto;
padding-left:12px;
padding-right:12px;
overflow:hidden;
*zoom:1;}
.item-a li{_display:inline;float:left;margin:0 0 10px 7px}
.item-a .pic{width:312px;height:184px;border:solid 6px #e6e6e6}
@keyframes pulse {
0% {
transform:scale(1)
}
50% {
transform:scale(1.3)
}
100% {
transform:scale(1)
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform:scale(1)
}
50% {
-webkit-transform:scale(1.3)
}
100% {
-webkit-transform:scale(1)
}
}
@-moz-keyframes pulse {
0% {
-moz-transform:scale(1)
}
50% {
-moz-transform:scale(1.1)
}
100% {
-moz-transform:scale(1)
}
}
.item-a li:hover .pic{
border:solid 6px #c00202;
animation:pulse 1s 0s ease both;
-webkit-animation:pulse 1s 0s ease both;
-moz-animation:pulse 1s 0s ease both;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml%22%3E%3Chead>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>爱漫莎</title>
<link href="css/master.css" rel="stylesheet" />
<body>
<div id="wrap">
<ul class="item-a">
<li>
<p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_001.jpg" height="184" width="312"></a></p>
</li>
<li>
<p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_002.jpg" height="184" width="312"></a></p>
</li>
<li>
<p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_003.jpg" height="184" width="312"></a></p>
</li>
<li>
<p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_004.jpg" height="184" width="312"></a></p>
</li>
<li>
<p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_005.jpg" height="184" width="312"></a></p>
</li>
<li>
<p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_006.jpg" height="184" width="312"></a></p>
</li>
</ul>
</div>
</body></html>
css3 keyframes animation的更多相关文章
- CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
- CSS3 @keyframes 规则
今天来给大家分享一下CSS3 @keyframes 规则! 在你了解CSS3 @keyframes 规则时我先来给大家说说什么是css3中的动画 动画是使元素从一种样式逐渐变化为另一种样式的效果. 您 ...
- css3中Animation
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
- 第100天:CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...
- 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- CSS3 & transition & animation
CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- CSS3 @keyframes 规则以及animation介绍和各种动画样式说明
一个好网站:http://www.jqhtml.com/ 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规 ...
随机推荐
- wince下的CPU和内存占用率计算
#include <Windows.h> DWORD Caculation_CPU(LPVOID lpVoid) { MEMORYSTATUS MemoryInfo; DWORD Perc ...
- Android 测试工具
有时候会发现给手机烧入的信息里少了某一些文件,比如一个图标,或者一个mp3文件之类的等等,为此做了一个小工具检查指定手机里面是否包含相应的文件. 通过程序执行手机的命令来操作手机,感觉还挺有意思的. ...
- MyEclipse中文乱码解决方法
在Myeclipse导入一个项目,有中文乱码问题,解决方法如下: 一.将整个project设置编码UTF-8(UTF-8可以最大的支持国际化) windows->Preferences-> ...
- [转载] tcp那些事1
原文: http://coolshell.cn/articles/11564.html TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较 ...
- Android activity之间传值关键性代码
从当前activity中获取et 表单中的值,并跳转到myactivity.java所绑定的xml布局文件上. private EditText et; Intent intent=new Inten ...
- Android 代码混淆 防止反编译
为了防止代码被反编译,因此需要加入混淆.混淆也可以通过第三方进行apk混淆,也可以用android中的proguard进行混淆. 混淆步骤: 1.配置混淆文件,名字可以随意,在这里使用proguard ...
- android瀑布流效果(仿蘑菇街)
Android 转载分享(10) 我们还是来看一款示例:(蘑菇街) 看起来很像我们的gridview吧,不过又不像,因为item大小不固定的,看起来是不是别有一番风味,确实如此. ...
- 一张图看懂360°全景和VR的区别
2016年开始,Facebook.谷歌.腾讯.阿里等互联网巨头都已开始抢食VR(虚拟现实)这块的大蛋糕,虚拟现实发展速度惊人.在这样强势发展的背景下,一些产品也开始打着VR的幌子,挂着VR的噱头卖起来 ...
- windows下重新安装TCP/IP协议栈
一.windows重装TCP/IP协议 前两天在windows下安装开发环境的时候,把系统的TCP/IP协议栈给搞跪了,导致系统无法ping localhost.无法在程序中创建socket等 ...
- dom jaxp详解
转自 http://blog.csdn.net/java958199586/article/details/7277904 一.XML解析技术概述 1.XML解析方式分为两种:dom和sax (1)d ...