更新第224个小实例：按钮边框动效

2023-07-10 17:25:32 +08:00 · 2023-07-10 17:25:32 +08:00 · 62102e5620
parent 98a6a4ba85
commit 62102e5620
2 changed files with 125 additions and 0 deletions
--- a/code/224/源码看不了请进/224.css.txt
+++ b/code/224/源码看不了请进/224.css.txt
@ -0,0 +1,97 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    min-height: 100vh;
+    /* 弹性布局 居中演示 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #2c3e50;
+}
+.container{
+    /* 弹性布局 */
+    display: flex;
+    /* 垂直排列 */
+    flex-direction: column;
+    /* 间隙 */
+    gap: 80px;
+}
+.button{
+    /* 自定义变量 */
+    /* 边框的偏移量 */
+    --offset:10px;
+    /* 边框的厚度 */
+    --border-size:2px;
+    /* 相对定位 */
+    position: relative;
+    width: 200px;
+    height: 65px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #6c98de;
+    /* 默认背景透明 */
+    background: transparent;
+    cursor: pointer;
+    font-size: 18px;
+    font-weight: bold;
+    /* 通过内阴影的方式绘制边框 */
+    /* currentColor==color: #6c98de; */
+    box-shadow: inset 0 0 0 var(--border-size) currentColor;
+    /* 设置背景改变时的过渡效果 */
+    transition: background 0.8s ease;
+}
+.button:hover{
+    /* 悬停改变背景 */
+    background: rgba(100,0,0,0.065);
+}
+/* 外边框统一样式 */
+.button-h,
+.button-v{
+    position: absolute;
+    top:var(--h-offset,0);
+    right:var(--v-offset,0);
+    bottom:var(--h-offset,0);
+    left:var(--v-offset,0);
+    /* 过渡 */
+    transition: transform 0.8s ease;
+}
+.button-h{
+    --v-offset:calc(var(--offset) * -1);
+    border-top:var(--border-size) solid currentColor;
+    border-bottom:var(--border-size) solid currentColor;
+}
+.button-v{
+    --h-offset:calc(var(--offset) * -1);
+    border-left:var(--border-size) solid currentColor;
+    border-right:var(--border-size) solid currentColor;
+}
+.button-h::before,
+.button-v::before{
+    content: "";
+    position: absolute;
+    /* 边框继承父元素 */
+    border: inherit;
+}
+.button-h::before{
+    top:calc(var(--v-offset) - var(--border-size));
+    bottom:calc(var(--v-offset) - var(--border-size));
+    left:calc(var(--v-offset) * -1);
+    right:calc(var(--v-offset) * -1);
+}
+.button-v::before{
+    top:calc(var(--h-offset) * -1);
+    bottom:calc(var(--h-offset) * -1);
+    left:calc(var(--h-offset) - var(--border-size));
+    right:calc(var(--h-offset) - var(--border-size));
+}
+/* 悬停样式 */
+.button:hover .button-h{
+    transform: scaleX(0);
+}
+.button:hover .button-v{
+    transform: scaleY(0);
+}
--- a/code/224/源码看不了请进/224.html.txt
+++ b/code/224/源码看不了请进/224.html.txt
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>按钮边框动效</title>
+    <link rel="stylesheet" href="224.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="button">
+        点赞
+        <div class="button-h"></div>
+        <div class="button-v"></div>
+      </div>
+      <div class="button">
+        关注
+        <div class="button-h"></div>
+        <div class="button-v"></div>
+      </div>
+      <div class="button">
+        收藏
+        <div class="button-h"></div>
+        <div class="button-v"></div>
+      </div>
+    </div>
+  </body>
+</html>