旋转动画效果

旋转动画效果

<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    .mainDiv{
        width:100px;
        height:100px;
        margin:100px auto;
        text-align: center;
        line-height: 100px;
        font-weight: bold;
        color:#ddd;
        background:#ddd;
        border:1px solid #ddd;
        -webkit-transform:rotate(0deg) scale(1);
        -moz-transform:rotate(0deg) scale(1);
        transform:rotate(0deg) scale(1);
        -webkit-transition:1s;
        -moz-transition:1s;
        transition:1s;
    }
    .mainDiv:hover{
       box-shadow:5px 6px 10px red ;
       -webkit-transform:rotate(360deg) scale(1);
       -moz-transform:rotate(360deg) scale(1);
       transform:rotate(360deg) scale(1.25);
       z-index:1;
    }
</style>
<title>css3特效</title>
</head>
<body>
<div class="mainDiv">您好</div>
</body>
</html>

 

posted @ 2019-03-12 16:54  蓝雨冰城  阅读(104)  评论(0)    收藏  举报