新增第166个小实例：霜雾玻璃图片预览特效

2022-06-17 16:37:59 +08:00 · 2022-06-17 16:37:59 +08:00 · b0dde21be4
parent 98af4ece0c
commit b0dde21be4
5 changed files with 99 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -172,4 +172,5 @@
 162. HTML5+CSS3+JS小实例：科技感满满的鼠标移动推开粒子特效
 163. HTML5+CSS3小实例：纯CSS实现彩虹倒映水面的唯美背景
 164. HTML5+CSS3+JS小实例：鼠标控制飞机的飞行方向
-165. HTML5+CSS3小实例：脉冲波纹催眠动画特效
+165. HTML5+CSS3小实例：脉冲波纹催眠动画特效
+166. HTML5+CSS3+JS小实例：霜雾玻璃图片预览特效
--- a/code/166/166.css
+++ b/code/166/166.css
@ -0,0 +1,60 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口宽高 */
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 溢出隐藏 */
+    overflow: hidden;
+    background-color: rgba(0,0,0,0.75);
+}
+.container{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+.image{
+    width: 100%;
+    height: 100%;
+    /* 背景图像 */
+    background-image: url('/images/camera.jpg');
+    /* 不平铺 */
+    background-repeat: no-repeat;
+    /* 保持图像比例，裁切长边 */
+    background-size: cover;
+    /* 图像定位正中 */
+    background-position: center;
+    /* 固定背景图像 */
+    background-attachment: fixed;
+    /* 模糊 */
+    filter: blur(6px);
+    /* 溢出隐藏 */
+    overflow: hidden;
+}
+/* 半透明白色蒙版 */
+.image::before{
+    content: "";
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255,255,255,0.2);
+    position: absolute;
+}
+/* 高清圆 */
+.cursor{
+    width: 250px;
+    height: 250px;
+    border-radius: 50%;
+    border: 8px solid rgba(255,255,255,0.25);
+    position: absolute;
+    background-image: url('/images/camera.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
--- a/code/166/166.html
+++ b/code/166/166.html
@ -0,0 +1,21 @@
+<!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>霜雾玻璃图片预览特效</title>
+    <link rel="stylesheet" href="166.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="image"></div>
+        <div class="cursor"></div>
+    </div>
+</body>
+
+</html>
+
+<script src="166.js"></script>
--- a/code/166/166.js
+++ b/code/166/166.js
@ -0,0 +1,16 @@
+// 要操作的元素
+const container=document.querySelector('.container');
+const cursor=document.querySelector('.cursor');
+
+// 为容器绑定鼠标移动事件
+container.addEventListener('mousemove',function(e){
+    // 获取container、cursor的大小及其相对于视口的位置
+    let contRect=container.getBoundingClientRect();
+    let cursRect=cursor.getBoundingClientRect();
+    // 计算高清圆的位置（跟随鼠标）
+    let cursX=e.clientX-contRect.left-cursRect.width/2;
+    let cursY=e.clientY-contRect.top-cursRect.height/2;
+    // 设置高清圆的位置
+    cursor.style.left=`${cursX}px`;
+    cursor.style.top=`${cursY}px`;
+})
--- a/images/camera.jpg
+++ b/images/camera.jpg