css3写的比较好玩的动画

最新推荐文章于 2024-05-13 11:05:12 发布

Little_Pig_Bug

最新推荐文章于 2024-05-13 11:05:12 发布

阅读量760

点赞数

分类专栏： CSS 文章标签： transform transition css3动画 rotate

本文链接：https://blog.csdn.net/Little_Pig_Bug/article/details/82377817

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果是鼠标放在图片上，图片会旋转一定的角度，鼠标移开，又会回到原来的位置上，效果前后对比如下:

前: 后：

实现上述效果，首先了解以下css动画属性

1.transform-origin：设置元素的旋转中心

2.transform:rotate(-110deg); 2D旋转，角度自定义，负数代表逆时针旋转

3.transition:all 0.3s ease-in-out; 设置动画的对象，时间和速度

下面还是直接贴代码吧

//html
<div class="img-rotate">
    <span>
        图片
    </span>
    <img src="../../assets/avatar.jpg" alt="avatar">
</div>

//scss
.img-rotate{
     display: inline-block;
     span,img{
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 2px solid #dafffd;
        cursor: pointer;
    }
    span{
        position:absolute;
        left:260px;
        text-align: center;
        line-height: 100px;
    }
    img{
        position: relative;
        transform-origin: 95% 40%;
        transition: all 0.3s ease-in-out;
    }
    &:hover{
        img{
            transform: rotate(-110deg);
            transition: all 0.3s ease-in-out;
        }
    }
}