新增第178个小实例：炫酷的流边按钮

2022-08-08 16:05:09 +08:00 · 2022-08-08 16:05:09 +08:00 · fc8eb3463b
parent da660e38d7
commit fc8eb3463b
3 changed files with 91 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -184,4 +184,5 @@
 174. HTML5+CSS3+JS小实例：简约的黑色分页
 175. HTML5+CSS3小实例：带功能区的图片悬停特效
 176. HTML5+CSS3+Vue小实例：输入框打字放大特效
-177. HTML5+CSS3小实例：悬停带提示的导航栏
+177. HTML5+CSS3小实例：悬停带提示的导航栏
+178. HTML5+CSS3小实例：炫酷的流边按钮
--- a/code/178/178.css
+++ b/code/178/178.css
@ -0,0 +1,54 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 方便演示，居中显示 */
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #2c3e50;
+}
+.container{
+    /* 弹性布局 */
+    display: flex;
+}
+.button{
+    /* 相对定位 */
+    position: relative;
+    width: 160px;
+    height: 50px;
+    margin: 0 15px;
+    cursor: pointer;
+}
+.shape{
+    /* 取消填充 */
+    fill: none;
+    /* 定义一条线 */
+    stroke: #009ffd;
+    /* 线的厚度 */
+    stroke-width: 6;
+    /* 设置虚线：虚线长度 间距 */
+    stroke-dasharray: 100 400;
+    /* 虚线偏移量 */
+    stroke-dashoffset: -240;
+    /* 过渡效果 */
+    transition: 1s ease;
+}
+.text{
+    /* 绝对定位 居中 */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    color: #fff;
+    letter-spacing: 2px;
+}
+/* 鼠标悬停时改变线条样式 */
+.button:hover .shape{
+    stroke: #06e6a0;
+    stroke-width: 3;
+    stroke-dasharray: 50 0;
+    stroke-dashoffset: 0;
+}
--- a/code/178/178.html
+++ b/code/178/178.html
@ -0,0 +1,35 @@
+<!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="178.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="button">
+            <svg width="160" height="50">
+                <rect class="shape" width="160" height="50"></rect>
+                <div class="text">求点赞</div>
+            </svg>
+        </div>
+        <div class="button">
+            <svg width="160" height="50">
+                <rect class="shape" width="160" height="50"></rect>
+                <div class="text">求关注</div>
+            </svg>
+        </div>
+        <div class="button">
+            <svg width="160" height="50">
+                <rect class="shape" width="160" height="50"></rect>
+                <div class="text">求分享</div>
+            </svg>
+        </div>
+    </div>
+</body>
+
+</html>