新增第216个小实例：科技感满满的数字科技脸特效

2023-04-14 17:16:02 +08:00 · 2023-04-14 17:16:02 +08:00 · 2820934ef5
parent f4300de0f6
commit 2820934ef5
6 changed files with 104 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -223,6 +223,7 @@
 213. HTML5+CSS3小实例：旋转彩色loading加载动画
 214. HTML5+CSS3小实例：创意修剪路径图像悬停效果
 215. HTML5+CSS3+JS小实例：黑客帝国“代码雨”特效
+216. 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/216/216.css
+++ b/code/216/216.css
@ -0,0 +1,50 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口宽高 */
+    min-height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 设置背景 */
+    background: url(/images/bg_kjg.jpg) no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+.container{
+    width: 900px;
+    height: 600px;
+    /* 溢出隐藏 */
+    overflow: hidden;
+}
+p{
+    word-break: break-all;
+    text-align: right;
+    line-height: 1.2;
+    font-size: 12px;
+    color: #fff;
+    /* --offset是自定义变量，通过var函数进行调用 */
+    --offset: 50;
+    /* 渐变蒙版 */
+    -webkit-mask: linear-gradient(to left,#fff,transparent calc(var(--offset) * 1%));
+}
+span{
+    /* 文字阴影 */
+    /* currentColor对应父元素的color */
+    text-shadow: 
+        10px 0 10px currentColor,
+        -10px 0 10px currentColor;
+}
+.shape{
+    width: 400px;
+    height: 600px;
+    float: right;
+    /* 多边形文字环绕 */
+    /* 提前准备好人脸的路径代码 */
+    shape-outside: polygon(
+        0.25% 2px, 99.94% 0.27%, 99.75% 100%, 19.87% 100.03%, 0 100%, 30.61% 100.07%,37.38% 99.82%, 44.21% 99.38%, 50.92% 99.34%, 71.39% 98.43%, 76.61% 98.79%,82.65% 97.6%, 85.9% 95.73%, 90.12% 93.85%, 88.45% 89.91%, 87.41% 87.1%,85.48% 85.09%, 84.96% 82.33%, 88.66% 81.41%, 90.55% 79.29%, 91.75% 77.23%,91.23% 75.11%, 88.48% 73.75%, 90.93% 72.26%, 92.34% 70.16%, 91.59% 67.66%,89.87% 64.91%, 87.01% 63.42%, 89.87% 62.01%, 93.04% 60.71%, 96.53% 58.57%,97.8% 55.26%, 95.36% 53.2%, 91.46% 51.56%, 86.6% 49.21%, 83.43% 47%,79.27% 44.12%, 77.05% 40.66%, 75.51% 37.07%, 75.49% 33.04%, 76.3% 28.93%,75.99% 25.46%, 74.57% 22.25%, 72.88% 18.96%, 69.97% 15.51%, 66.59% 12.23%,62.29% 9.2%, 57.33% 7.06%, 52.77% 5.2%, 46.55% 3.55%, 38.59% 1.5%, 27.73% 0.92%
+    );
+}
--- a/code/216/216.html
+++ b/code/216/216.html
@ -0,0 +1,15 @@
+<!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="216.css">
+</head>
+<body>
+    <div class="container"></div>
+</body>
+</html>
+
+<script src="216.js"></script>
--- a/code/216/216.js
+++ b/code/216/216.js
@ -0,0 +1,37 @@
+// 要操作的元素
+const container=document.querySelector('.container');
+
+// 循环生成p元素，置于.container中
+function build(){
+    let str='<div class="shape"></div>';
+    for(let i=0;i<50;i++){
+        str+=`<p style="--offset:${r(50,100)};">
+            ${generateText()}
+        </p>`;
+    }
+    container.innerHTML=str;
+}
+
+// 获取指定范围内的随机数
+function r(from, to){
+    return Math.random() * (to - from + 1) + from;
+}
+
+// 循环生成数字，置于span中
+function generateText(){
+    let str='';
+    for(let i=0;i<100;i++){
+        str+=`<span>${getRandomNumber()}</span>`;
+    }
+    return str;
+}
+
+// 获取随机数字
+function getRandomNumber(){
+    const str='0123456789';
+    return str[Math.floor(Math.random() * str.length)];
+}
+
+build();
+// 加个点击容器重新生成
+container.addEventListener('click',build);
--- a/code/216/216.txt
+++ b/code/216/216.txt
@ -0,0 +1 @@
+0.25% 2px, 99.94% 0.27%, 99.75% 100%, 19.87% 100.03%, 0 100%, 30.61% 100.07%,37.38% 99.82%, 44.21% 99.38%, 50.92% 99.34%, 71.39% 98.43%, 76.61% 98.79%,82.65% 97.6%, 85.9% 95.73%, 90.12% 93.85%, 88.45% 89.91%, 87.41% 87.1%,85.48% 85.09%, 84.96% 82.33%, 88.66% 81.41%, 90.55% 79.29%, 91.75% 77.23%,91.23% 75.11%, 88.48% 73.75%, 90.93% 72.26%, 92.34% 70.16%, 91.59% 67.66%,89.87% 64.91%, 87.01% 63.42%, 89.87% 62.01%, 93.04% 60.71%, 96.53% 58.57%,97.8% 55.26%, 95.36% 53.2%, 91.46% 51.56%, 86.6% 49.21%, 83.43% 47%,79.27% 44.12%, 77.05% 40.66%, 75.51% 37.07%, 75.49% 33.04%, 76.3% 28.93%,75.99% 25.46%, 74.57% 22.25%, 72.88% 18.96%, 69.97% 15.51%, 66.59% 12.23%,62.29% 9.2%, 57.33% 7.06%, 52.77% 5.2%, 46.55% 3.55%, 38.59% 1.5%, 27.73% 0.92%
--- a/images/bg_kjg.jpg
+++ b/images/bg_kjg.jpg
				`@ -0,0 +1 @@`
				0.25% 2px, 99.94% 0.27%, 99.75% 100%, 19.87% 100.03%, 0 100%, 30.61% 100.07%,37.38% 99.82%, 44.21% 99.38%, 50.92% 99.34%, 71.39% 98.43%, 76.61% 98.79%,82.65% 97.6%, 85.9% 95.73%, 90.12% 93.85%, 88.45% 89.91%, 87.41% 87.1%,85.48% 85.09%, 84.96% 82.33%, 88.66% 81.41%, 90.55% 79.29%, 91.75% 77.23%,91.23% 75.11%, 88.48% 73.75%, 90.93% 72.26%, 92.34% 70.16%, 91.59% 67.66%,89.87% 64.91%, 87.01% 63.42%, 89.87% 62.01%, 93.04% 60.71%, 96.53% 58.57%,97.8% 55.26%, 95.36% 53.2%, 91.46% 51.56%, 86.6% 49.21%, 83.43% 47%,79.27% 44.12%, 77.05% 40.66%, 75.51% 37.07%, 75.49% 33.04%, 76.3% 28.93%,75.99% 25.46%, 74.57% 22.25%, 72.88% 18.96%, 69.97% 15.51%, 66.59% 12.23%,62.29% 9.2%, 57.33% 7.06%, 52.77% 5.2%, 46.55% 3.55%, 38.59% 1.5%, 27.73% 0.92%