3D分层图像悬停效果 html+css-白红宇的个人博客

发布日期：2021-05-07 18:24:12 浏览次数：21 分类：原创文章

本文共 5226 字，大约阅读时间需要 17 分钟。

一.（⊙-⊙）先看效果（完整源码在底部）：

在这里插入图片描述

二. (￣◇￣)实现过程步骤：

0.基本css样式（复制即可）* ：

      *{               margin: 0;            padding: 0;            box-sizing: border-box;        }        body{               height: 100vh;            display: flex;            justify-content: center;            align-items: center;                     background-color: rgb(9, 22, 37);        }

1.定义基本标签：

 <div class="container">        <div class="box">            <img src="img/photo.jpg" alt="x" >            <img src="img/photo.jpg" alt="x" >            <img src="img/photo.jpg" alt="x" >            <img src="img/photo.jpg" alt="x" >            <img src="img/photo.jpg" alt="x" >            <span></span>        </div>    </div>

.container是底层盒子。
.box是放图片的盒子。
img是图片。
span是最下面那个蓝色的盒子。

2.底层盒子css样式：

.container{               position: relative;            perspective: 2000px;        }

position：relative；相对定位。
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

3. box的基本样式：

     .box{               position: relative;            width: 220px;            height: 360px;            transition: all 0.5s;            transform-style: preserve-3d;        }        .box:hover{               transform: rotateX(50deg) rotateZ(-50deg);        }

transition：过渡。
transform-style: preserve-3d; 子元素保留3d位置。
rotateX 绕X轴旋转50度。
retateY 绕Y轴旋转-50度。

4. 图片的基本样式：

.box img{               position: absolute;            width: 100%;            height: 100%;            box-shadow: 0 0 3px rgb(61, 138, 226);            transition: all 1.5s;            transform:  translateZ(0px);        }

box-shadow：阴影。
transform: translateZ(0px); Z轴方向偏移0px。

5.实现分层，每张图片偏移一段距离：

.box:hover img:nth-child(2){               transform: translateX(-10px) translateY(10px) translateZ(-10px);            opacity: 0.8;        }        .box:hover img:nth-child(3){               transform: translateX(-20px) translateY(20px) translateZ(-20px);            opacity: 0.6;        }        .box:hover img:nth-child(4){               transform: translateX(-30px) translateY(30px) translateZ(-30px);            opacity: 0.4;        }        .box:hover img:nth-child(5){               transform: translateX(-40px) translateY(40px) translateZ(-40px);            opacity: 0.2;              }

translateX X轴上偏移。
translateY Y轴上偏移。
opacity：透明度。

6.在最下层再加一个蓝色的盒子：

.box span{               position: absolute;            width: 100%;            height: 100%;            transition: all 1.5s;            opacity: 0.1;        }        .box:hover span{               transform: translateX(-50px) translateY(50px) translateZ(-50px);            box-shadow: 0 0 40px rgb(41, 151, 253);               background-color: rgb(41, 151, 253);        }

position：absolute；绝对定位。

三.完整代码 (。_。) ：

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Night</title>    <style>        *{                margin: 0;            padding: 0;            box-sizing: border-box;        }        body{                height: 100vh;            display: flex;            justify-content: center;            align-items: center;                     background-color: rgb(9, 22, 37);        }        .container{                position: relative;            perspective: 2000px;        }        .box{                position: relative;            width: 220px;            height: 360px;            transition: all 0.5s;            transform-style: preserve-3d;        }        .box:hover{                transform: rotateX(50deg) rotateZ(-50deg);        }        .box img{                position: absolute;            width: 100%;            height: 100%;            box-shadow: 0 0 3px rgb(61, 138, 226);            transition: all 1.5s;            transform:  translateZ(0px);        }         .box:hover img:nth-child(2){                transform: translateX(-10px) translateY(10px) translateZ(-10px);            opacity: 0.8;        }        .box:hover img:nth-child(3){                transform: translateX(-20px) translateY(20px) translateZ(-20px);            opacity: 0.6;        }        .box:hover img:nth-child(4){                transform: translateX(-30px) translateY(30px) translateZ(-30px);            opacity: 0.4;        }        .box:hover img:nth-child(5){                transform: translateX(-40px) translateY(40px) translateZ(-40px);            opacity: 0.2;              }        .box span{                position: absolute;            width: 100%;            height: 100%;            transition: all 1.5s;            opacity: 0.1;        }        .box:hover span{                transform: translateX(-50px) translateY(50px) translateZ(-50px);            box-shadow: 0 0 40px rgb(41, 151, 253);               background-color: rgb(41, 151, 253);        }    </style></head><body>    <div class="container">        <div class="box">            <img src="img/photo.jpg" alt="x" >            <img src="img/photo.jpg" alt="x" >            <img src="img/photo.jpg" alt="x" >            <img src="img/photo.jpg" alt="x" >            <img src="img/photo.jpg" alt="x" >            <span></span>        </div>    </div></body></html>

四.总结(￣< ￣)> ：

刚看了哪吒重生，剧情一般，但特效不错~
在这里插入图片描述

其它文章：

…等

上一篇：canvas贪吃蛇效果 html+css+js

下一篇：音波加载效果 html+css

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！