新增第221个小实例：文字阴影还能这么玩

2023-06-04 17:42:26 +08:00 · 2023-06-04 17:42:26 +08:00 · b06dd04178
parent 7f90ebbce3
commit b06dd04178
4 changed files with 124 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -228,6 +228,7 @@
 218. HTML5+CSS3小实例：彩色拨动开关
 219. HTML5+CSS3+JS小实例：右键菜单
 220. HTML5+CSS3小实例：环绕小球弹性loading动画
+221. 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/221/221.css
+++ b/code/221/221.css
@ -0,0 +1,42 @@
+/* 引入谷歌字体 */
+@import url("http://fonts.googleapis.com/css?family=Righteous");
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Righteous';
+    font-weight: bold;
+    --bg:#131313;
+    background-color: var(--bg);
+}
+.container{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    --x:1;
+    --y:1;
+}
+h1{
+    font-size: 5vw;
+    color: var(--bg);
+    text-align: center;
+    text-shadow: -1px -1px 0 #fff,1px 1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,
+    calc(var(--x) * -0.1vw) calc(var(--y) * -0.1vw) 0px hsl(calc(var(--x) + var(--y) * 11) 30% 50% / 40%),
+    calc(var(--x) * -0.2vw) calc(var(--y) * -0.2vw) 1px hsl(calc(var(--x) + var(--y) * 12) 30% 50% / 36%),
+    calc(var(--x) * -0.3vw) calc(var(--y) * -0.3vw) 2px hsl(calc(var(--x) + var(--y) * 13) 30% 50% / 32%),
+    calc(var(--x) * -0.4vw) calc(var(--y) * -0.4vw) 3px hsl(calc(var(--x) + var(--y) * 14) 30% 50% / 28%),
+    calc(var(--x) * -0.5vw) calc(var(--y) * -0.5vw) 4px hsl(calc(var(--x) + var(--y) * 15) 30% 50% / 24%),
+    calc(var(--x) * -0.6vw) calc(var(--y) * -0.6vw) 5px hsl(calc(var(--x) + var(--y) * 16) 30% 50% / 20%),
+    calc(var(--x) * -0.7vw) calc(var(--y) * -0.7vw) 6px hsl(calc(var(--x) + var(--y) * 17) 30% 50% / 16%),
+    calc(var(--x) * -0.8vw) calc(var(--y) * -0.8vw) 7px hsl(calc(var(--x) + var(--y) * 18) 30% 50% / 12%);
+}
--- a/code/221/221.html
+++ b/code/221/221.html
@ -0,0 +1,16 @@
+<!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>文字阴影还能这么玩</title>
+    <link rel="stylesheet" href="221.css">
+</head>
+<body>
+    <div class="container">
+        <h1>HELLO WORLD!</h1>
+    </div>
+</body>
+</html>
+<script src="221.js"></script>
--- a/code/221/221.js
+++ b/code/221/221.js
@ -0,0 +1,65 @@
+// 容器
+const container=document.querySelector('.container');
+
+// 获取当前坐标
+function getCursorPosition(event,rect,divider=20){
+    const x=event.clientX - rect.left;
+    const y=event.clientY - rect.top;
+    const res={
+        x:(x - rect.width / 2) / divider,
+        y:(y - rect.height / 2) / divider
+    };
+    return res;
+}
+
+// 根据日期计算获取数字
+function getNumbersFromDate(){
+    const startDate=new Date(); //存储初始日期
+
+    function updateNumbers(){
+        const currentDate=new Date();
+        const timeDiff=currentDate - startDate;
+
+        // 根据时差计算出数字
+        const number1=Math.sin(timeDiff / 400);
+        const number2=Math.cos(timeDiff / 400);
+
+        // 将数字作为对象返回
+        return {
+            number1,
+            number2
+        }
+    }
+
+    // 更新坐标
+    function updateElementPosition(x,y){
+        container.style.setProperty('--x',x);
+        container.style.setProperty('--y',y);
+    }
+
+    // 绘制动画
+    function animationLoop(){
+        // 判断当前DOM节点是否能完全匹配对应的CSS的hover选择器
+        const isHovered=container.matches(':hover');
+        const rect=container.getBoundingClientRect();
+
+        if(isHovered){
+            // 鼠标移入
+            // 绑定指针移动事件
+            document.body.addEventListener('pointermove',(event)=>{
+                const cursorPosition=getCursorPosition(event,rect);
+                // 更新坐标
+                updateElementPosition(cursorPosition.x,cursorPosition.y);
+            })
+        }else{
+            // 鼠标移出，初始化坐标
+            const numbers=updateNumbers();
+            updateElementPosition(numbers.number1 * 10,numbers.number2 * 10);
+        }
+        // 逐帧绘制
+        requestAnimationFrame(animationLoop);
+    }
+    animationLoop();
+}
+
+getNumbersFromDate();