diff --git a/README.md b/README.md index 094874e..3c5341d 100644 --- 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) diff --git a/code/235/1.jpg b/code/235/1.jpg new file mode 100644 index 0000000..e47f57b Binary files /dev/null and b/code/235/1.jpg differ diff --git a/code/235/235.css b/code/235/235.css new file mode 100644 index 0000000..f76d8c5 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/code/235/235.html b/code/235/235.html new file mode 100644 index 0000000..8b4705c --- /dev/null +++ b/code/235/235.html @@ -0,0 +1,31 @@ + + + + + + 图片切换特效之模糊变清晰 + + + +
+
+
+
+

索隆 or 山治

+
+ +
+
+
+
+
+

谁是副船长？

+
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/code/235/235.js b/code/235/235.js new file mode 100644 index 0000000..44b84cc --- /dev/null +++ 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'; +}) \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..a2e4d13 Binary files /dev/null and b/favicon.ico differ