transition过渡的趣玩

最新推荐文章于 2023-03-04 21:24:33 发布

weixin_30784141

最新推荐文章于 2023-03-04 21:24:33 发布

阅读量41

点赞数

原文链接：http://www.cnblogs.com/LJY0596/p/5667930.html

版权

本例中将三张图（来自网络）进行堆叠，鼠标悬停触发。附有源代码

<!DOCTYPE html>
<html>
<head>
    <title>照片墙</title>
    <meta charset="utf-8">
    <style type="text/css">
        .parent{
            width: 1000px;height: 800px;margin: 0 auto;position: relative;
            background-color: black;
        }
        .parent img{width: 300px;height: 150px;position: absolute;transition: all 3s;}
        img:nth-child(1){top: 300px;left: 350px;transform: rotate(45deg);z-index: 3;-webkit-filter:blur(2px);}
        img:nth-child(2){top: 300px;left: 350px;z-index: 2;-webkit-filter:blur(3px);}
        img:nth-child(3){top: 300px;left: 350px;transform: rotate(-45deg);z-index: 1;-webkit-filter:blur(1px);}
        img:hover{transform: scale(3);-webkit-filter:blur(0px);z-index: 100;}
    </style>
</head>
<body>
<div class="parent">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1468408683931&di=0ef6a07b6b38ec2a7c0be9794922605a&imgtype=jpg&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Fc7%2F27%2Fd%2F23.jpg">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1468408683929&di=c96c378ca0d60d7147fedbc2366da230&imgtype=jpg&src=http%3A%2F%2Fa2.att.hudong.com%2F06%2F10%2F300001190914130190105052966_950.jpg">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1468408683928&di=0553506fb8bcf19f4e9a818fd6fbc69d&imgtype=jpg&src=http%3A%2F%2Fwww.bz55.com%2Fuploads%2Fallimg%2F150331%2F139-1503311U111.jpg">
</div>
</body>
</html>

转载于:https://www.cnblogs.com/LJY0596/p/5667930.html

weixin_30784141

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transition过渡的趣玩

本例中将三张图（来自网络）进行堆叠，鼠标悬停触发。附有源代码<!DOCTYPE html><html><head> <title>照片墙</title> <meta charset="utf-8"> <style type="text/css"> ...
复制链接

扫一扫