鼠标移入旋转动画

效果图：

七夕节快乐

html代码：

<div class="box">
  <img src="picture/lover.jpg" id="picture1"/>
  <p>七夕节快乐</p>
</div>

css代码：

p{
            margin: 0;
            padding: 0;
            background: #000000;
            color: #FFFFFF;
        }
        .box img{
            width: 100%;
            background: #fff;
            border: 1px solid #000;
        }
        .box{     
            width: 120px;
            height: 120px;
            position: relative;
        }
        p{
            position: absolute;
            left: 21px;
            top: 120px;
            opacity: 1;
            transition: all 1s;
        }
        .box:hover p{
            top: 95px;
            transform: scale(1.5,1.5) rotate(360deg);
            background: rgba(0,0,0,.4);
        }

 

转载于:https://www.cnblogs.com/ash-sky/p/9479325.html