新增第241个小实例：旋转渐变光标

2024-03-07 17:25:26 +08:00 · 2024-03-07 17:25:26 +08:00 · f3f386c73c
parent e2d4c73563
commit f3f386c73c
4 changed files with 87 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -248,6 +248,7 @@
 238. HTML5+CSS3小实例：炫彩荧光线条登录框
 239. HTML5+CSS3小实例：飞行滑块
 240. HTML5+CSS3小实例：无限循环loading动画
+241. 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/241/241.css
+++ b/code/241/241.css
@ -0,0 +1,66 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    cursor: crosshair;
+}
+
+/* 定义自定义属性 --turn，用于表示旋转角度 */
+@property --turn{
+    syntax: "<angle>"; /* 角度值 */
+    inherits: false; /* 不继承自父元素 */
+    initial-value: 1turn; /* 初始值为1个完整旋转 */
+}
+
+.gradient{
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    --turn: 0turn;
+    /* 自定义变量 4个区块颜色值 */
+    --color-1: #ffafcc;
+    --color-2: #a2d2ff;
+    --color-3: #cdb4db;
+    --color-4: #98dbc3;
+    background: conic-gradient(from var(--turn, 0turn), var(--color-1) 25%, var(--color-2) 25%, var(--color-2) 50%, var(--color-3) 50%, var(--color-3) 75%, var(--color-4) 75%);
+    background-position: center center;
+    /* 自定义变量 光标的坐标 */
+    --offset-x: calc(var(--x) * 1px);
+    --offset-y: calc(var(--y) * 1px);
+    background-position: calc(100% + var(--offset-x, -50%)) calc(100% + var(--offset-y, -50%));
+    background-size: 200% 200%;
+    /* 调用动画：动画名 时长 线性的 无限循环的 */
+    animation: rotate 20s linear infinite;
+}
+h1{
+    font-size: 15vw;
+    font-weight: bold;
+    /* 设置元素的混合模式为overlay */
+    /* overlay模式是一种叠加模式，它会根据下面层的颜色来决定当前是增加还是减少曝光 */
+    mix-blend-mode: overlay;
+    line-height: 1.1;
+    background: linear-gradient(white 15%, black, black, white 95%);
+    /* 设置背景剪裁为文本 */
+    /* 当设置为text时，背景将会沿着文本的边界进行剪裁，允许背景颜色或图像显示在文本的边界之处 */
+    background-clip: text;
+    -webkit-background-clip: text;
+    /* 设置文本填充颜色为透明 */
+    -webkit-text-fill-color: transparent;
+}
+
+/* 定义旋转动画 */
+@keyframes rotate {
+    to{
+        --turn: 1turn;
+    }
+}
--- a/code/241/241.html
+++ b/code/241/241.html
@ -0,0 +1,14 @@
+<!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="241.css">
+</head>
+<body>
+    <div class="gradient"></div>
+    <h1>渐变光标</h1>
+</body>
+</html>
+<script src="241.js"></script>
--- a/code/241/241.js
+++ b/code/241/241.js
@ -0,0 +1,6 @@
+// 监听鼠标移动事件
+document.addEventListener("mousemove",(e)=>{
+    // 动态设置CSS变量--x、--y以表示当前鼠标位置
+    document.documentElement.style.setProperty('--x',e.clientX);
+    document.documentElement.style.setProperty('--y',e.clientY);
+})