HTML CSS 动画实现图片过渡与变换（图片不超过边框范围局部放大）

最新推荐文章于 2024-07-24 17:10:28 发布

Dogboss233

最新推荐文章于 2024-07-24 17:10:28 发布

阅读量2.6k

点赞数 4

分类专栏：网页设计 CSS 文章标签：网页设计 html5 css

本文链接：https://blog.csdn.net/m0_51393229/article/details/121533946

版权

网页设计同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

实例:实现图片方形变圆形,放大,倾斜,变黑白

效果:

过渡与变换
局部放大四分之一

HTML CSS 代码实现:

<html>
<head>
    <title>过渡与变形</title>
    <style type="text/css">
        body {
            background-color: #000000;
            /* line-height:10px;*/
        }

        .word {
            font-family: 'Times New Roman';
            font-size: 20px;
            color: #ffffff;
        }

        table {
            width: 1000px;
            height: 500px;
            margin: 80px 70px 20px 120px;
            border-collapse: separate;
            border-spacing: 70px;
        }

        .css1 {
            border: 8px solid #ffffff;
            -webkit-box-shadow: #ffffff 0 0 25px;
            border-radius: 15px;
            width: 135px;
            height: 135px;
            -webkit-transition-duration: 2s;
        }

            .css1:hover {
                -webkit-transition-property: -webkit-border-radius;
                -webkit-border-radius: 50%;
            }

        .css2 {
            width: 135px;
            height: 135px;
            -webkit-transition-duration: 2s;
        }

        .img-box {
            width: 135px;
            height: 135px;
            overflow: hidden;
            border: 8px solid #ffffff;
            -webkit-box-shadow: #ffffff 0 0 25px;
            border-radius: 15px;
        }

        .css2:hover {
            display: block;
            -webkit-transform: scale(2,2);
            transform-origin: 0% 0%;
        }

        .css3 {
            border: 8px solid #ffffff;
            -webkit-box-shadow: #ffffff 0 0 25px;
            border-radius: 15px;
            width: 135px;
            height: 135px;
            -webkit-transition-duration: 2s;
        }

            .css3:hover {
                -webkit-transform: rotate(45deg);
            }

        .css4 {
            border: 8px solid #ffffff;
            -webkit-box-shadow: #ffffff 0 0 25px;
            border-radius: 15px;
            width: 135px;
            height: 135px;
            -webkit-transition-duration: 2s;
        }

            .css4:hover {
                /*-webkit-filter: grayscale(100%);*/
                -webkit-filter: grayscale(100%);
            }
    </style>
</head>
<body>
    <table>
        <tr>
            <td align="center">
                <span class="word">SHAPE</span>
            </td>
            <td align="center">
                <span class="word">DISPLACEMENT</span>
            </td>
            <td align="center">
                <span class="word"> POSITION</span>
            </td>
            <td align="center">
                <span class="word">COLOR</span>
            </td>
        </tr>
        <tr>
            <td align="center">
                <img class="css1" src="images/image1.jpg" />
            </td>
            <td align="center">
                <div class="img-box"><img class="css2" src="images/image2.jpg" /></div>
            </td>
            <td align="center">
                <img class="css3" src="images/image3.jpg" />
            <td align="center">
                <img class="css4" src="images/image4.jpg" />
            </td>
        </tr>
    </table>
</body>
</html>

2021年11月26日更新🙌
以上就是最新的代码，已经接近实现最想要的效果了。最重要的是如何写css2样式了。因为边框的问题于是我删了img选择器。写了css1 css2 css3 css4与他们的hover。终于达到了最想要的效果。注意，css2里 transform-origin: 0% 0%;将中心点定在了左上角。

Dogboss233

关注

4
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
HTML CSS 动画实现图片过渡与变换（图片不超过边框范围局部放大）

实例:实现图片方形变圆形,放大,倾斜,变黑白效果:HTML CSS 代码实现:<html> <head> <title>过渡与变形</title><style type="text/css">body{ background-color:#000000; /* line-height:10px;*/}.word{ font-family:'Times New Roman'; font
复制链接

扫一扫