图片放大 demo

最新推荐文章于 2021-05-05 23:04:51 发布

涛痕

最新推荐文章于 2021-05-05 23:04:51 发布

阅读量538

点赞数 1

分类专栏： demo 涛痕世界文章标签： css 动画图片

本文链接：https://blog.csdn.net/iamcgt/article/details/72081891

版权

涛痕世界同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

demo

18 篇文章 0 订阅

订阅专栏

效果

这里写图片描述

思路

1.设置4个div

<div class="cards">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="purple"></div>
    <div class="brown"></div>
</div>

2.设置伪元素after，用于实现阴影效果

 .cards > div:after {
            content: "";
            background: inherit;
            filter: blur(.9em);
            opacity: 0;
            height: 20%;
            width: 70%;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
            bottom: 0;
            transition: opacity 1s, bottom 0.5s;
        }

3.设置hover，用transition实现动画过渡效果

 .cards > div:hover:after {
            opacity: .8;
            bottom: -1.2em;
        }

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片放大</title>
    <style>
        .cards {
            margin: auto;
            padding: 1em;
            background: white;
            width: 640px;
        }


        .red { background: tomato; }
        .blue { background: steelblue; }
        .purple { background: mediumpurple; }
        .brown { background: rosybrown; }

        .cards > div {
            margin: 2em;
            width: 250px;
            height: 250px;
            display: inline-block;
            position: relative;
            transition: transform 0.5s;
        }

        .cards > div:hover {
            transform: scale(1.2);
            cursor: pointer;
        }

        .cards > div:after {
            content: "";
            background: inherit;
            filter: blur(.9em);
            opacity: 0;
            height: 20%;
            width: 70%;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
            bottom: 0;
            transition: opacity 1s, bottom 0.5s;
        }

        .cards > div:hover:after {
            opacity: .8;
            bottom: -1.2em;
        }
    </style>
</head>
<body>
<div class="cards">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="purple"></div>
    <div class="brown"></div>
</div>
</body>
</html>

参考

http://codepen.io/dhanishgajjar/pen/OmZbgL

涛痕

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片放大 demo

图片放大效果思路1.设置4个div<div class="cards"> <div class="red"></div> <div class="blue"></div> <div class="purple"></div> <div class="brown"></div></div>2.设置伪元素after，用于实现阴影效果 .cards > div:after
复制链接

扫一扫

专栏目录