当前位置 CSS模版园 >> 酷炫特效 >> 纯css3制作出来的狐狸尾巴燃烧效果

纯css3制作出来的狐狸尾巴燃烧效果

纯css3制作出来的狐狸尾巴燃烧效果

纯css3制作出来的狐狸尾巴燃烧效果

最初的效果还是Mozilla在合作伙伴官方网页上发布的这个绚丽的狐狸尾巴动画效果

看起来就像尾巴在燃烧一样,是不是很神奇,很羡慕吧。

当然,是有两种方法可以制作出来的,首先要跟大家介绍的是方法一:

利用CSS3的动画属性animation 设置关键词,并分步移动图片,视觉感官上尾巴就在燃烧了。

背景图片很大,有7020 X 156像素单位大,使用CSS step来移动背景图片位置,这个动画可以无限循环下去,只要把背景图位置重置为0,重头运行一遍就行了。但是有人要问了,这个是CSS3哦,低版本浏览器不支持怎么办,那么简单,这一点可以利用jQuery和背景动画工具,叫做 Spritely,写法是:$(“#lanren”).sprite({fps:12,no_of_frames:44,rewind:true});

这样写对于客户端来说,最大的问题在于内存占用率很高,不能跟我们这高大上的CSS3相比

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯css3制作出来的狐狸尾巴燃烧效果 - CSS模版园(www.cssteach.com)</title>
<style>
*{margin:0;padding:0;}
body{background-color:#0096dd;}
#lanren{
width:156px;
height:156px;
margin:100px auto;
background:url(images/foxtail.png) no-repeat 0 0;
animation:animate-tail 3.75s steps(44) infinite;
}
@keyframes animate-tail{
0%{background-position:-6864px 0;}
100%{background-position:0 0;}
}
</style>
</head>
<body>
<div id="lanren"></div>
</body>
</html>


 

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-39.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)