02
2013-09

css3创建动画过渡效果

最近研究了一下css3,可以通过CSS样式就能够实现动画效果,而且效果很好哦

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.div1{width:80px; height:50px; background:#9C0; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; position:relative; margin:5px;
opcity:0.8;
-moz-transition-property:-moz-transform,width,height,background,opcity;
-moz-transition-duration:1s,1s,1s,1s,1s;
-webkit-transition-property:-webkit-transform,width,height,background,opcity;
-webkit-transition-duration:1s,1s,1s,1s,1s;
-o-transition-property:-o-transform,width,height,background,opcity;
-o-transition-duration:1s,1s,1s,1s,1s;
}
         
.div1:hover{width:120px; height:90px; transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); background:#09F; opcity:0.4;}
</style>
</head>
         
<body>
<div class="div1">css3动画过度</div>
</body>
</html>

动画Demo效果:点击预览


除非注明,文章均为史亚永原创,欢迎转载!转载请注明本文地址,谢谢。

本文地址:http://www.shiyayong.cn/post/217.html

评论列表:

4  空城旧梦  2013-10-11 21:40:09 回复该留言  IP:49.75.185.3
无demo。。。不好看效果。
空城旧梦
3  萝卜头  2013-9-4 9:53:40 回复该留言  IP:59.51.114.221
这个效果不错,发现用搞清楚html、css、js、php真的做项目,不然没用
  茶馆老板  2014-1-17 16:01:47 回复该留言  IP:117.121.48.242
我也是刚学的html5和css3很不错的
茶馆老板
萝卜头
2  泉州期货  2013-9-3 19:21:36 回复该留言  IP:210.22.59.26
css3弄出来的效果蛮好用的,以后要努力学习这方面的知识了。
  茶馆老板  2014-1-17 16:00:36 回复该留言  IP:117.121.48.242
我刚添加了demo你可以打开预览一下
茶馆老板
泉州期货
1  海蓝  2013-9-3 15:03:57 回复该留言  IP:114.246.78.115
要是有一个demo 来看看 就更直观了
  茶馆老板  2014-1-17 15:53:44 回复该留言  IP:117.121.48.242
好的,我现在就添加上Demo
茶馆老板
海蓝

发表评论:

(设置个性头像)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

无觅相关文章插件,快速提升流量