过渡与变形的综合应用

最新推荐文章于 2020-04-16 18:50:32 发布

洋毛

最新推荐文章于 2020-04-16 18:50:32 发布

阅读量252

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_45968014/article/details/105067693

版权

html 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

transition属性、2D变形的使用，transform属性实现过渡及变形效果。

当鼠标移上第一张图像时，产生直角边框过渡为圆角边框的效果。
当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果。
当鼠标移上第三张图像时，产生图片旋转的过渡效果
当鼠标移上第四张图像时，产生图片透明逐渐变暗的过渡效果，并且伴随盒子阴影效果过渡。

<!DOCTYPE<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>

        body{
            background: black;
        }

        img{
            width: 100px;
            height: 100px; 
            border:white solid 5px;
            border-radius: 5px;
        }
        h5{
            color: white;
            text-size-adjust: 20px;;
        }
        div{
            width: 130px;
            float: left;
            text-align: center;
            margin-left: 20px;
        }
        .tu1:hover{
            border-radius: 50%;
            transition: ease 3s;
        }
        .tu2:hover{
            width:120px;
            height: 110px;
            transition: ease 3s;
            
        }
        .tu3:hover{
            transform: rotate(10deg);
            transition: ease all 2s;
        }
        .tu4:hover{
            box-shadow:rgb(99, 100, 99);
            transition: ease 3s all;
            filter:grayscale(100%);

        }
    </style>
</head>
<body>

<div class="one"> 
       <h5>SHAPE</h5>
    <img src="image/1 (1).jpg" alt="" class="tu1">

</div>
<div class="one">
    <h5>DISPLACEMENT</h5>
    <img src="image/1 (2).jpg" alt="" class="tu2">
    
</div>
<div class="one">
    <h5>POSITION</h5>
    <img src="image/1 (3).jpg" alt="" class="tu3">
    
</div>
<div class="one">
    <h5>COLOR</h5>
    <img src="image/u=3419227979,1522419926&fm=26&gp=0.jpg" alt="" class="tu4">
</div>

</body>
</html>

效果图如下：
在这里插入图片描述

洋毛

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
过渡与变形的综合应用

transition属性、2D变形的使用，transform属性实现过渡及变形效果。当鼠标移上第一张图像时，产生直角边框过渡为圆角边框的效果。当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果。当鼠标移上第三张图像时，产生图片旋转的过渡效果当鼠标移上第四张图像时，产生图片透明逐渐变暗的过渡效果，并且伴随盒子阴影效果过渡。<!DOCTYPE<!DOCTYPE html&gt...
复制链接

扫一扫