深入理解transition属性、transform属性实现过渡及变形效果

最新推荐文章于 2023-10-11 13:34:16 发布

Mr_jianghanlin

最新推荐文章于 2023-10-11 13:34:16 发布

阅读量744

点赞数 1

分类专栏：前端文章标签： html css css3

本文链接：https://blog.csdn.net/mr_jianghanlin/article/details/105078771

版权

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

深入理解transition属性、transform属性实现过渡及变形效果

话不多说先看效果图

在这里插入图片描述

a当鼠标移到第一幅图片上面产生了边框过渡为圆角边框的效果，阴影效果；主要代码：

 border-radius: 50%;
 box-shadow: 0 0 20px 5px white;

在这里插入图片描述

b当鼠标移到第二幅图片上面产生了逐渐放大的过渡的效果，阴影效果：主要代码：

transform: scale(2);
box-shadow: 0 0 20px 5px white;

在这里插入图片描述

c当鼠标移到第三幅图片上面产生了旋转的过渡的效果，阴影效果：主要代码：

 transform: rotate(15deg);
 box-shadow: 0 0 20px 5px white;

在这里插入图片描述

d当鼠标移到第四幅图片上面产生了透明度逐渐变暗的的过渡的效果，阴影效果：主要代码：

  transform: perspective(50px);
  box-shadow: 0 0 20px 5px white;
  filter: grayscale(1);

在这里插入图片描述

下面是实现的代码HTML：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="one.css">
    <title>transition</title>
</head>
<body>
    <div class="one">
        <div class="two1">
            <span>SHAPE</span>
            <img src="images/mountain.jpeg" >
        </div>
        <div class="two2">
            <span >DISPLACEMENT</span>
            <div class="gu">
            <img src="images/water-1.jpeg" >
            </div>

        </div>
        <div class="two3">
            <span>POSITION</span>
            <img src="images/water-2.jpg" >
        </div>
        <div class="two4">
            <span>COLOR</span>
            <img src="images/water.jpg">
        </div>
    </div>

</body>
</html>

在配合css样式修饰，就可以实现以上效果：

body{
    background-color: black;
    padding: 40px;
}
.one{
    display: flex;
    justify-content: space-between;

}
.two1,.two2,.two3,.two4{
    display: flex;
    color: white;
    flex-direction: column;
}
span{
    text-align: center;
}
img{
    margin-top: 20px;
    width: 200px;
    height: 200px;
    border: 8px solid white;
    border-radius:10px ;
    transition: all 3s ;
}
.two1 img:hover {
    border-radius: 50%;
    box-shadow: 0 0 20px 5px white;
}
.gu{
    margin-top: 20px;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 8px solid white;
    display: inline-block;
    border-radius:10px ;
    transition: all 3s;
}
.two2 img{
    margin-top: 0;
    border: 0px;
    border-radius:0 ;
}
.two2 img:hover{
    transform: scale(2);
}
.gu:hover{
     box-shadow: 0 0 20px 5px white;
 }
.two3 img:hover{
    transform: rotate(15deg);
    box-shadow: 0 0 20px 5px white;
}
.two4 img:hover{
    transform: perspective(50px);
    box-shadow: 0 0 20px 5px white;
    filter: grayscale(0.9);
}

上述代码用的图片也可以自己换喜欢的图：

在这里插入图片描述

以上就可以实现上图效果，不懂的可以可留言。

Mr_jianghanlin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深入理解transition属性、transform属性实现过渡及变形效果

深入理解transition属性、transform属性实现过渡及变形效果话不多说先看效果图a当鼠标移到第一幅图片上面产生了边框过渡为圆角边框的效果，阴影效果；主要代码： border-radius: 50%; box-shadow: 0 0 20px 5px white;b当鼠标移到第二幅图片上面产生了逐渐放大的过渡的效果，阴影效果：主要代码：transform: scale(...
复制链接

扫一扫