当前位置：首页 > news >正文

wordpress 云存储网络优化是做啥的

news 2025/7/21 5:12:13

wordpress 云存储,网络优化是做啥的,知名网站开发哪家好,手机触屏网站幻灯片知识点与技巧伪元素使用伪元素来作为按钮悬停效果动画展示的元素 z-index 的使用技巧使用z-index属性来控制按钮和伪元素的层次关系 transform、transition 复习使用transform、transition两个属性来实现动画的展示按钮边框动画切换效果核心代码 .btn.btn-border-…

知识点与技巧

伪元素

使用伪元素来作为按钮悬停效果动画展示的元素
z-index 的使用技巧

使用z-index属性来控制按钮和伪元素的层次关系
transform、transition 复习

使用transform、transition两个属性来实现动画的展示

按钮边框动画

切换效果

在这里插入图片描述

核心代码

.btn.btn-border-pop::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: -1;border-radius: var(--border-radius);border: var(--border-size) solid var(--background-color);transition: top, left, right, bottom, 100ms ease-in-out;
}/* 负数向外移动2倍,这里可以修改top、left、right、bottom属性的值从而达到不同的效果 */
.btn.btn-border-pop:hover:before,
.btn.btn-border-pop:focus::before {top: calc(var(--border-size) * -2);left: calc(var(--border-size) * -2);right: calc(var(--border-size) * -2);bottom: calc(var(--border-size) * -2);
}

按钮背景动画

切换效果

在这里插入图片描述

核心代码

/* 这里使用z-index管理按钮和伪元素的层次关系 */
.btn.btn-background-slide {transition: color 300ms ease-in-out;z-index: 1;
}/* 伪元素的z-index设置为-1后，动画执行时就不会遮挡按钮的文字 */
.btn.btn-background-slide::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: -1;border-radius: var(--border-radius);background-color: var(--accent-color);transition: transform 300ms ease-in-out;transform: scaleX(0);transform-origin: left;
}.btn.btn-background-slide:hover:before,
.btn.btn-background-slide:focus:before {transform: scaleX(1);
}

背景圆动画

切换效果

在这里插入图片描述

核心代码

.btn.btn-background-circle::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: -1;background-color: var(--background-color);border-radius: 50%;transition: transform 500ms ease-in-out;transform: scale(1.5);
}.btn.btn-background-circle:hover:before,
.btn.btn-background-circle:focus:before {transform: scale(0);
}.btn.btn-background-circle {z-index: 1;overflow: hidden;background-color: var(--accent-color);transition: color 500ms ease-in-out;
}

底部边线动画

切换效果

在这里插入图片描述

核心代码

.btn.btn-background-circle:hover,
.btn.btn-background-circle:focus {color: #fff;
}.btn.btn-background-underline::before {content: "";position: absolute;top: 33px;left: 0;right: 0;bottom: 0;height: var(--border-size);background-color: var(--accent-color);transition: transform 300ms ease-in-out;transform: scaleX(0);
}.btn.btn-background-underline:hover:before,
.btn.btn-background-underline:focus:before {transform: scaleX(1);
}