28
2013-08

CSS3过度动画效果

<!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">
div{
    width:80px; 
    height:auto; 
    text-align:center; 
    padding:5px 0px 5px 0px; 
    border:1px solid #ccc; 
    background:#CF9;
    /*border-radius:25px; 
    -moz-border-radius:25px; 
    box-shadow:10px 10px 5px #888;*/
            
    /*border-image:url(border1.png) 30 30 round;
    -webkit-border-image:url(border.png) 30 30 round;
    -o-border-image:url(border.png) 30 30 round;*/
            
    /*background:url(border1.png) no-repeat;
    background-size:50px 50px;*/
            
    /*transform:skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg);
    -webkit-transform: skew(30deg,20deg);
    -o-transform: skew(30deg,20deg);
    -moz-transform: skew(30deg,20deg);*/
            
    /*transform:rotateZ(120deg);
    -moz-transform:rotateZ(120deg);
    -ms-transform:rotateZ(120deg);
    -o-transform:rotateZ(120deg);
    -webkit-transform:rotateZ(120deg);*/
            
    transition:width 2s;
    -moz-transition:width 2s;
    -o-transition:width 2s;
    -ms-transition:width 2s;
    -webkit-transition:width 2s;
    }
div:hover{width:200px;}
        
.animated_div {
    background: none repeat scroll 0 0 #92B901;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    float: left;
    font: 12px '微软雅黑',Verdana,Arial,Helvetica,sans-serif;
    height: 40px;
    margin: 5px;
    opacity: 0.4;
    padding: 20px 10px 0;
    position: absolute;
    transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
    transition-property: width, height, transform, background, font-size, opacity;
    width: 65px;
}
.animated_div:hover {
    background: none repeat scroll 0 0 #1EC7E6;
    font-size: 16px;
    height: 60px;
    opacity: 1;
    transform: rotate(360deg);
    width: 90px;
}
</style>
</head>
        
<body>
<div>确定</div>
<p class="animated_div">CSS动画</p>
</body>
</html>

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

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

评论列表:

发表评论:

(设置个性头像)

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

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