更新第31个小实例

2021-11-03 17:52:58 +08:00 · 2021-11-03 17:52:58 +08:00 · ac62fe7db8
parent 5805e3dd2b
commit ac62fe7db8
3 changed files with 93 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -34,4 +34,5 @@
 27. HTML5+CSS3小实例之3D旋转木马相册
 28. HTML5+CSS3小实例之云朵特效按钮
 29. HTML5+CSS3小实例之高级的转动变色加载特效
-30. HTML5+CSS3小实例之边框滑动按钮的悬停效果
+30. HTML5+CSS3小实例之边框滑动按钮的悬停效果
+31. HTML5+CSS3小实例之雷达扫描特效
--- a/css/31.css
+++ b/css/31.css
@ -0,0 +1,75 @@
+*{
+    /* 初始化 取消页面元素的内外边距 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 水平、垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 径向渐变背景 */
+    background: radial-gradient(circle at center,#6b98bb,#000);
+}
+.radar{
+    width: calc(256px + 48px);
+    height: calc(256px + 48px);
+    border: 1px solid;
+    background: 
+        /* 重复的径向渐变 圈圈 */
+        repeating-radial-gradient(
+            transparent 0,
+            transparent 30px,
+            darkcyan 30px,
+            darkcyan 32px
+        ),
+        /* 线性渐变 中间横线 */
+        linear-gradient(
+            transparent 49.75%,
+            darkcyan 49.75%,
+            darkcyan 50.25%,
+            transparent 50.25%
+        ),
+        /* 线性渐变 中间竖线 */
+        linear-gradient(
+            90deg,
+            transparent 49.75%,
+            darkcyan 49.75%,
+            darkcyan 50.25%,
+            transparent 50.25%
+        ),
+        /* 线性渐变 背景 */
+        linear-gradient(#000,#000)
+    ;
+    border-radius: 50%;
+    /* 相对定位 */
+    position: relative;
+}
+.radar::before{
+    content: "";
+    /* 绝对定位 */
+    position: absolute;
+    width: calc(256px / 2);
+    height: calc(256px / 2);
+    background: linear-gradient(
+        45deg,
+        rgba(0,0,0,0) 50%,
+        rgba(0,255,255,1) 100%)
+    ;
+    border-radius: 100% 0 0 0;
+    top: calc(48px / 2);
+    left: calc(48px / 2);
+    /* 执行动画：动画名称 时长 线性的 无限次播放 */
+    animation: scanning 5s linear infinite;
+    /* 设置旋转元素的基点位置 */
+    transform-origin: 100% 100%;
+}
+
+/* 定义动画 */
+@keyframes scanning {
+    to{
+        transform: rotate(360deg);
+    }
+}
--- a/html/31.html
+++ b/html/31.html
@ -0,0 +1,16 @@
+<!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="../css/31.css">
+</head>
+
+<body>
+    <div class="radar"></div>
+</body>
+
+</html>