纯CSS实现图片抖动
实现方法:
1.将上文提到的以下JS内容删除:
$(".imagelogo").mouseover(function() {
obj = $(this);
i = 5;
timer = null;
clearInterval(timer);
timer = setInterval(function(){
obj.css({"position":"relative","left":i+"px"});
i = -i;
},50);
}); $(".imagelogo").mouseout(function() {
clearInterval(timer);
});
2.在CSS样式里加上以下内容:
@keyframes mylogo
{
from {left: 5px;}
to {left: -5px;}
} @-moz-keyframes mylogo /* Firefox */
{
from {left: 5px;}
to {left: -5px;}
} @-webkit-keyframes mylogo /* Safari 和 Chrome */
{
from {left: 5px;}
to {left: -5px;}
} @-o-keyframes mylogo /* Opera */
{
from {left: 5px;}
to {left: -5px;}
}
.imagelogo {
background: url(images/logo.png) no-repeat;
float: left;
position:relative;
width: 180px;
height: 60px;
margin: 15px 0px 0px 0px;
padding: 0px;
cursor: pointer;
animation: mylogo 1s linear 0s infinite alternate;
/* Firefox: */
-moz-animation: mylogo 1s linear 0s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: mylogo 1s linear 0s infinite alternate;
/* Opera: */
-o-animation: mylogo 1s linear 0s infinite alternate;
}
好了,有点像钟摆的样子了,上文的animation: mylogo 1s linear 0s infinite alternate是简写,展开后就是:
animation-name: mylogo ;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
纯CSS实现图片抖动的更多相关文章
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
- 纯CSS实现图片
在Web开发中.通过CSS代码也能够实现一些简单的图片,当然,假设你有耐心,也能够实现较为复杂的图片噢. 那么请问为什么有图片不去用而须要用CSS来实现呢?一是由于性能的原因,图片带给server和c ...
- css图片居中,通过纯css实现图片居中的多种实现方法
在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...
- 纯CSS 多图片轮播
今天做东西的时候,遇到一个问题关于图片轮播的问题,以前也接触过(百度 人家的demo改改..),再次遇到这个问题的时候,根据以前的印象找到了demo正信心满满的准备改一下嵌进去,发现 jquery.m ...
- 纯css实现图片的灯光照射效果,高逼格图片展示
先不说技术,看实现的效果, 与原图(左图)相比,‘灯光’ 照射(右图)下的小姐姐是不是更有魅力了!! 那么下面就说说大家关心的技术实现过程. 其实这是我在学习css属性 mix-blend-mode ...
- 纯css用图片代替checkbox和radio,无js实现方法
html <ul id="is_offical_post_links"> <li> <label> <input type="c ...
- 纯css实现图片或者页面变灰色
前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...
- 通过纯css实现图片居中的多种实现方式
html结构: <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd ...
随机推荐
- HTTP 头部
通用头域(即通用头) 通用头域包含请求和响应消息都支持的头域,通用头域包含Cache-Control. Connection.Date.Pragma.Transfer-Encoding.Upgra ...
- 关于Repository模式
定义(来自Martin Fowler的<企业应用架构模式>): Mediates between the domain and data mapping layers using a co ...
- ubuntu 14.04下 horizon openstack_dashboard 的开发环境搭建
序:公司要在openstack的基础上,做开发做产品,网上资料也不是很多,很多都是在来回copy,在此做个blog,慢慢更新,推动自己进步. 首先老话题:开发环境的搭建. 一个纯净的ubunt ...
- SQL 注入
我们的团队项目中有课程名称输入框,其中的内容会拼接到类sql查询语句中. 所以可能会产生类sql注入的问题,我们团队采用了利用正则表达式判断输入内容的形式来规避这类注入. 下面简单介绍一下sql注入 ...
- 移植到Windows CE 的经验
Windows CE 是微软早期推出的嵌入式设备和移动设备的开发运行平台,虽然目前移动端几乎都是android和ios的天下,但是,在嵌入式设备领域,Windows CE仍然占有一块地盘.很多用户希望 ...
- [ACM_动态规划] POJ 1050 To the Max ( 动态规划 二维 最大连续和 最大子矩阵)
Description Given a two-dimensional array of positive and negative integers, a sub-rectangle is any ...
- memcached与.NET的融合使用(二)
memcached部署完成之后,对当前缓存中数据的监控就显得比较迫切,这里看到网上开源的memadmin比较小巧好用,决定用它来查看监控memcached. 下载memadmin1.0.11,地址:h ...
- AngularJS快速入门指南06:过滤器
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- 网站标题ico那些事
浏览器打开一个网页都会有一个标题,用来显示当前页面的相关内容,如网站名称或者一篇文章的大标题,而定义它应该显示啥的话完全由HTML中title标签的内容决定. 如我们的大博客园:
- (转)雅虎WEB前端网站优化 -- 34条军规
雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). 1.Minimize HTTP Requests 减少HTTP请求 ...