新增第228个小实例：具有悬停效果的3D闪耀动画

2023-09-19 16:24:10 +08:00 · 2023-09-19 16:24:10 +08:00 · 83a85c420b
parent ce9e455787
commit 83a85c420b
4 changed files with 128 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -235,6 +235,7 @@
 225. HTML5+CSS3+JS小实例：全屏范围滑块
 226. HTML5+CSS3+JS小实例：全屏背景切换动画
 227. HTML5+CSS3小实例：衣服颜色选择器
+228. HTML5+CSS3小实例：具有悬停效果的3D闪耀动画

 #### 赞赏作者
 ![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/228/228.css
+++ b/code/228/228.css
@ -0,0 +1,115 @@
+/* 自定义属性 */
+/* @property可以直接载样式表中注册自定义属性，无需运行任何JS代码。是CSS变量的升级版本，比CSS变量更加规范和严谨 */
+/* 控制渐变旋转 */
+@property --a {
+  /* 声明类型 angle：角度 */
+  syntax: "<angle>";
+  /* 声明初始值 */
+  initial-value: 45deg;
+  /* 是否允许继承 */
+  inherits: true;
+}
+/* 控制图像旋转 */
+@property --r {
+  syntax: "<angle>";
+  initial-value: 5deg;
+  inherits: true;
+}
+/* 控制渐变颜色停止 */
+@property --p {
+  /* 声明类型 percentage：百分比 */
+  syntax: "<percentage>";
+  initial-value: 0%;
+  inherits: true;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  min-height: 100vh;
+  background-color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+img {
+  --c: #bec1c9;
+  width: 250px;
+  /* 宽高比1:1 */
+  aspect-ratio: 1;
+  border-radius: 25px;
+  border: 4px solid #fff;
+  padding: 10px;
+  /* 锥型渐变 */
+  background: conic-gradient(
+      from var(--a),
+      #fff calc(30% - var(--p)),
+      var(--c) calc(50% - var(--p)) calc(50% + var(--p)),
+      #fff calc(70% + var(--p))
+    )
+    border-box;
+  --g: linear-gradient(#000 0 0);
+  /* 蒙版 */
+  -webkit-mask: var(--g), var(--g) padding-box,
+    conic-gradient(
+        from var(--a),
+        #000d calc(30% - var(--p)),
+        #000 calc(50% - var(--p)) calc(50% + var(--p)),
+        #000d calc(70% + var(--p))
+      )
+      content-box;
+  /* 设置遮罩的混合方式 */
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  /* 设置过渡效果 */
+  transition: --p 0.5s, --r 0.4s;
+  cursor: pointer;
+  /* 执行动画: 时长 线性 无线播放 */
+  animation: 4s linear infinite;
+  /* 指定动画名 */
+  animation-name: a, r;
+}
+
+/* 定义动画 */
+@keyframes a {
+  to {
+    --a: 405deg;
+  }
+}
+@keyframes r {
+  0%,
+  100% {
+    transform: perspective(450px) rotate3d(1, 1, 0, var(--r));
+  }
+  12.5% {
+    transform: perspective(450px) rotate3d(0, 1, 0, var(--r));
+  }
+  25% {
+    transform: perspective(450px) rotate3d(-1, 1, 0, var(--r));
+  }
+  37.5% {
+    transform: perspective(450px) rotate3d(-1, 0, 0, var(--r));
+  }
+  50% {
+    transform: perspective(450px) rotate3d(-1, -1, 0, var(--r));
+  }
+  62.5% {
+    transform: perspective(450px) rotate3d(0, -1, 0, var(--r));
+  }
+  75% {
+    transform: perspective(450px) rotate3d(1, -1, 0, var(--r));
+  }
+  87.5% {
+    transform: perspective(450px) rotate3d(1, 0, 0, var(--r));
+  }
+}
+
+/* 鼠标悬停 */
+img:hover {
+  --p: 50%;
+  --r: 0deg;
+  /* 暂停动画 */
+  animation-play-state: paused;
+}
--- a/code/228/228.html
+++ b/code/228/228.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>具有悬停效果的3D闪耀动画</title>
+    <link rel="stylesheet" href="228.css">
+</head>
+<body>
+    <img src="/images/228/lighthouse.jpg" alt="">
+</body>
+</html>
--- a/images/228/lighthouse.jpg
+++ b/images/228/lighthouse.jpg