更新第54个小实例

2021-11-26 18:13:43 +08:00 · 2021-11-26 18:13:43 +08:00 · 6ada39e823
parent d049019233
commit 6ada39e823
3 changed files with 117 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -57,4 +57,5 @@
 50. HTML5+CSS3小实例之不偷看密码的超萌猫头鹰登录界面
 51. HTML5+CSS3小实例之动感的金属质感闪光文字
 52. HTML5+CSS3小实例之高级感满满的滚轮视差响应效果
-53. HTML5+CSS3小实例之有趣的幽灵文字特效
+53. HTML5+CSS3小实例之有趣的幽灵文字特效
+54. HTML5+CSS3小实例之涟漪特效按钮
--- a/css/54.css
+++ b/css/54.css
@ -0,0 +1,75 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 渐变背景 */
+    background: linear-gradient(200deg,#80d0c7,#13547a);;
+}
+.btn-box{
+    width: 500px;
+    /* 弹性布局 */
+    display: flex;
+    /* 横向排列 */
+    flex-direction: row;
+    /* 允许换行 */
+    flex-wrap: wrap;
+    /* 平均分配宽度给每一个子元素 */
+    justify-content: space-around;
+}
+.btn-box button{
+    /* 相对定位 */
+    position: relative;
+    border: none;
+    background: linear-gradient(to right,#52d1c2,#1ab3a1);;
+    width: 200px;
+    height: 60px;
+    margin: 20px 0;
+    font-size: 18px;
+    color: #fff;
+    /* 字间距 */
+    letter-spacing: 3px;
+    border-radius: 30px;
+    /* 阴影 */
+    box-shadow: 3px 5px 10px rgba(0,0,0,0.1);
+    cursor: pointer;
+    /* 这里加个溢出隐藏 */
+    overflow: hidden;
+}
+.btn-box button:hover{
+    box-shadow: 3px 5px 10px rgba(0,0,0,0.2);
+}
+.btn-box button span{
+    /* 绝对定位 */
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: #fff;
+    border-radius: 50%;
+    transform: translate(-50%,-50%);
+    /* 设置元素不对指针事件做出反应 */
+    pointer-events: none;
+    /* 执行动画 */
+    animation: animate 1s ease;
+}
+
+/* 定义动画 */
+@keyframes animate {
+    from{
+        width: 0;
+        height: 0;
+        opacity: 0.5;
+    }
+    to{
+        width: 400px;
+        height: 400px;
+        opacity: 0;
+    }
+}
--- a/html/54.html
+++ b/html/54.html
@ -0,0 +1,40 @@
+<!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/54.css">
+</head>
+
+<body>
+    <div class="btn-box">
+        <button>点赞</button>
+        <button>关注</button>
+        <button>收藏</button>
+        <button>转发</button>
+    </div>
+    <script type="text/javascript">
+        // 获取所有按钮对象
+        const btns=document.querySelectorAll("button");
+        // 循环所有按钮,并为每一个按钮添加点击事件
+        btns.forEach(btn=>{
+            btn.addEventListener("click",e=>{
+                // 创建span元素,并设置其位置为鼠标点击的位置
+                let span=document.createElement("span");
+                span.style.left=e.offsetX+"px";
+                span.style.top=e.offsetY+"px";
+                // 将span元素添加到按钮标签里
+                btn.appendChild(span);
+                // 1秒后删除span元素
+                setTimeout(() => {
+                    span.remove();
+                }, 1000);
+            })
+        })
+    </script>
+</body>
+
+</html>