新增第235个小实例：图片切换特效之模糊变清晰

2024-01-10 10:57:51 +08:00 · 2024-01-10 10:57:51 +08:00 · 890cd36dc3
parent ff384fb261
commit 890cd36dc3
6 changed files with 132 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -242,6 +242,7 @@
 232. HTML5+CSS3小实例：旋转中的视差效果
 233. HTML5+CSS3小实例：环形文字加载动画
 234. HTML5+CSS3+JS小实例：圣诞按钮
+235. HTML5+CSS3+JS小实例：图片切换特效之模糊变清晰

 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
--- a/code/235/1.jpg
+++ b/code/235/1.jpg
--- a/code/235/235.css
+++ b/code/235/235.css
@ -0,0 +1,79 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+.container{
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+    overflow: hidden;
+}
+.layer{
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+.layer .content{
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+}
+.layer .body{
+    position: absolute;
+    width: 25%;
+    text-align: center;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.layer img{
+    position: absolute;
+    height: 90vh;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+.layer.bottom{
+    background-color: #222;
+}
+.layer.bottom .body{
+    color: orange;
+    right: 5%;
+}
+.layer.top{
+    background-color: #eee;
+    width: 50vw;
+    z-index: 2;
+}
+.layer.top .body{
+    color: #222;
+    left: 5%;
+}
+.layer.top img{
+    /* 模糊滤镜+灰度滤镜 */
+    filter: blur(10px) grayscale(0.5);
+}
+.handle{
+    position: absolute;
+    width: 8px;
+    height: 100%;
+    background-color: orange;
+    top: 0;
+    left: 50%;
+    z-index: 3;
+}
+.skewed .handle{
+    height: 200%;
+    top: 50%;
+    transform: rotate(30deg) translateY(-50%);
+    transform-origin: top;
+}
+.skewed .top{
+    transform: skew(-30deg);
+    width: calc(50vw + 1000px);
+    margin-left: -1000px;
+}
+.skewed .top .content{
+    transform: skew(30deg);
+    margin-left: 1000px;
+}
--- a/code/235/235.html
+++ b/code/235/235.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>图片切换特效之模糊变清晰</title>
+    <link rel="stylesheet" href="235.css">
+</head>
+<body>
+    <div class="container skewed">
+        <div class="layer bottom">
+            <div class="content">
+                <div class="body">
+                    <h1>索隆 or 山治</h1>
+                </div>
+                <img src="1.jpg" alt="">
+            </div>
+        </div>
+        <div class="layer top">
+            <div class="content">
+                <div class="body">
+                    <h1>谁是副船长？</h1>
+                </div>
+                <img src="1.jpg" alt="">
+            </div>
+        </div>
+        <div class="handle"></div>
+    </div>
+</body>
+</html>
+<script src="235.js"></script>
--- a/code/235/235.js
+++ b/code/235/235.js
@ -0,0 +1,21 @@
+// 要操作的元素
+const container=document.querySelector('.container');
+const topLayer=container.querySelector('.top');
+const handle=container.querySelector('.handle');
+// 初始化skew和delta为0
+let skew=0,delta=0;
+
+// 判断container的class中是否包含'skewed'
+if(container.className.indexOf('skewed')>-1){
+    // 将skew设为1000
+    skew=1000;
+}
+
+container.addEventListener('mousemove',function(e){
+    // 计算鼠标移动的距离
+    delta=(e.clientX - window.innerWidth / 2) * 0.5;
+    // 设置handle的左边距
+    handle.style.left=e.clientX + delta + 'px';
+    // 设置topLayer的宽度
+    topLayer.style.width=e.clientX + skew + delta + 'px';
+})
--- a/favicon.ico
+++ b/favicon.ico