更新第49个小实例

2021-11-21 17:26:30 +08:00 · 2021-11-21 17:26:30 +08:00 · b3b8a39333
parent cf46ac0a2e
commit b3b8a39333
3 changed files with 91 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -52,4 +52,5 @@
 45. HTML5+CSS3小实例之响应式卡片悬停效果
 46. HTML5+CSS3小实例之波浪文字效果
 47. HTML5+CSS3小实例之隐藏式侧边栏菜单
-48. HTML5+CSS3小实例之3D立方体旋转相册
+48. HTML5+CSS3小实例之3D立方体旋转相册
+49. HTML5+CSS3小实例之3D分层图像悬停效果
--- a/css/49.css
+++ b/css/49.css
@ -0,0 +1,66 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    /* 渐变背景 */
+    background: linear-gradient(200deg,#deecdd,#74ebd5);
+}
+.container{
+    width: 360px;
+    height: 640px;
+}
+.container .img-box{
+    /* 相对定位 */
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.1);
+    /* 动画过渡 */
+    transition: 0.5s;
+}
+.container img{
+    /* 绝对定位 */
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    /* 对图片进行剪切，保留原有尺寸比例，内容被缩放 */
+    object-fit: contain;
+    background-color: #646464;
+    /* 动画过渡 */
+    transition: 0.5s;
+}
+.container:hover .img-box{
+    /* 旋转-30度 倾斜25度 缩放为0.8倍 */
+    transform: rotate(-30deg) skew(25deg) scale(0.8);
+    margin-top: 80px;
+}
+/* 鼠标移入，改变每一张图片的位置、不透明度、动画延迟时间 */
+.container:hover img:nth-child(4){
+    transform: translate(160px,-160px);
+    opacity: 1;
+    transition-delay: 0.5s;
+}
+.container:hover img:nth-child(3){
+    transform: translate(120px,-120px);
+    opacity: 0.8;
+    transition-delay: 0.5s;
+}
+.container:hover img:nth-child(2){
+    transform: translate(80px,-80px);
+    opacity: 0.6;
+    transition-delay: 0.5s;
+}
+.container:hover img:nth-child(1){
+    transform: translate(40px,-40px);
+    opacity: 0.4;
+    transition-delay: 0.5s;
+}
--- a/html/49.html
+++ b/html/49.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>3D分层图像悬停效果</title>
+    <link rel="stylesheet" href="../css/49.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="img-box">
+            <img src="../images/op/8.jpg" alt="">
+            <img src="../images/op/8.jpg" alt="">
+            <img src="../images/op/8.jpg" alt="">
+            <img src="../images/op/8.jpg" alt="">
+        </div>
+    </div>
+</body>
+
+</html>