旋转 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋转动画(原创)-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
    margin:0;
    padding:0;
}
div {
    width:200px;
    height:200px;
    /*最后把下面这个去掉*/
        /* background:#f00;
    */
        /*圆边框 50% 上右下左 0px 0px 0px 0px*/
        border-radius:50%;
    /*     上边距 右边距 下边距 左边距  */
        margin:100px 10px 200px 100px;
    /*float:left;
    */
        position:relative;
}
p {
    width:160px;
    height:160px;
    background:yellowgreen;
    border-radius:50%;
    border:20px solid rgba(255, 255, 255, 0.534);
    background-origin:border-box;
    position:absolute;
    z-index:1;
    transition:1S;
}
h1 {
    width:200px;
    height:200px;
    background:#333;
    border-radius:50%;
    margin:0 auto;
    text-align:center;
    /*line-height和height组合到一块儿，还有一种效果，就是如果把它们的值设置的一样了，文字就会在垂直方向居中*/
        line-height:200px;
    position:absolute;
    transform:scale(0,0 ) rotate(0deg);
    transition:1S;
    color:#fff;
}
div:hover p {
    transform:scale(0,0) rotate(360deg);
}
div:hover h1 {
    transform:scale(1,1) rotate(360deg);
}
</style>
</head>
<body>
<div>
    <p></p>
    <h1>你猜这是什么</h1>
</div>
<div>
    <p></p>
    <h1>这是旋转</h1>
</div>

<script>

</script>

</body>
</html>

 

posted @ 2018-10-17 17:08  逐梦武威  阅读(139)  评论(0)    收藏  举报