新增第83个小实例：马赛克背景的按钮特效

2021-12-29 00:14:01 +08:00 · 2021-12-29 00:14:01 +08:00 · 86a150a3c7
parent d34b6ef29b
commit 86a150a3c7
3 changed files with 113 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -86,4 +86,5 @@
 79. HTML5+CSS3小实例：纯CSS实现DNA双螺旋动画
 80. HTML5+CSS3小实例：始终飞向鼠标的纸飞机
 81. HTML5+CSS3+JS小实例：滑动切换的注册登录界面
-82. HTML5+CSS3小实例：篮球弹跳动画
+82. HTML5+CSS3小实例：篮球弹跳动画
+83. HTML5+CSS3+JS小实例：马赛克背景的按钮特效
--- a/css/83.css
+++ b/css/83.css
@ -0,0 +1,56 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    /* 渐变背景 */
+    background: linear-gradient(200deg,#485563,#29323c);
+}
+.button{
+    width: 250px;
+    height: 80px;
+    border: 2px solid #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    margin: 15px 0;
+    cursor: pointer;
+    /* 溢出隐藏 */
+    overflow: hidden;
+    /* 相对定位 */
+    position: relative;
+}
+.button p{
+    font-size: 22px;
+    font-weight: bold;
+    /* 绝对定位 */
+    position: absolute;
+    /* 动画过渡 */
+    transition: 1s;
+}
+.button .back{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+.button .back span{
+    background-color: #fff;
+    display: block;
+    float: left;
+}
+.button:hover div span{
+    /* 通过var函数调用自定义属性--c，设置背景颜色 */
+    background-color: var(--c);
+}
+.button:hover p{
+    color: #fff;
+}
--- a/html/83.html
+++ b/html/83.html
@ -0,0 +1,55 @@
+<!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/83.css">
+</head>
+
+<body>
+    <div class="button">
+        <div class="back" style="--c:#e74c3c;"></div>
+        <p>求点赞</p>
+    </div>
+    <div class="button">
+        <div class="back" style="--c:#2ecc71;"></div>
+        <p>求关注</p>
+    </div>
+    <div class="button">
+        <div class="back" style="--c:#3498db;"></div>
+        <p>求收藏</p>
+    </div>
+    <div class="button">
+        <div class="back" style="--c:#9b59b6;"></div>
+        <p>求转发</p>
+    </div>
+    <script>
+        // 获取所有的.back层
+        let backs=document.getElementsByClassName('back');
+        // 遍历所有的.back层，并添加span元素作为背景
+        for(let i=0;i<backs.length;i++){
+            // 当前的.back层
+            let back=backs[i];
+            // 宽高尺寸采用.back层的1/25宽度
+            let width=back.clientWidth/25;
+            let height=width;
+            // 计算所需的背景块数量
+            let count=25*parseInt(back.clientHeight/height);
+            for(let j=0;j<count;j++){
+                // 根据计算结果并添加对应数量的span元素
+                let span=document.createElement('span');
+                span.style.width=width+'px';
+                span.style.height=width+'px';
+                // 设置动画过渡：时长 线性 动画延迟
+                span.style.transition='0.2s linear '+Math.random()/2+'s';
+                // 追加元素
+                back.appendChild(span);
+            }
+        }
+    </script>
+</body>
+
+</html>