探索CSS动画下的按钮交互美学

前端Hardy2024-10-25 12:04

效果演示

这段代码通过SVG和CSS动画创建了一个具有视觉吸引力的按钮，当用户与按钮交互时（如悬停、聚焦或按下），按钮会显示不同的动画效果。

HTML

html 复制代码 
<button class="button">
    <div class="dots_border"></div>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="sparkle">
        <path class="path" stroke-linejoin="round" stroke-linecap="round" stroke="black" fill="black"
            d="M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.1689 13.5829 14.4994 13.0423 13.9587C12.5016 13.4181 11.8321 13.0241 11.097 12.814L8.25 12L11.096 11.187C11.8311 10.9769 12.5006 10.5829 13.0413 10.0423C13.5819 9.50162 13.9759 8.83214 14.186 8.097L14.187 8.096Z">
        </path>
        <path class="path" stroke-linejoin="round" stroke-linecap="round" stroke="black" fill="black"
            d="M6 14.25L5.741 15.285C5.59267 15.8785 5.28579 16.4206 4.85319 16.8532C4.42059 17.2858 3.87853 17.5927 3.285 17.741L2.25 18L3.285 18.259C3.87853 18.4073 4.42059 18.7142 4.85319 19.1468C5.28579 19.5794 5.59267 20.1215 5.741 20.715L6 21.75L6.259 20.715C6.40725 20.1216 6.71398 19.5796 7.14639 19.147C7.5788 18.7144 8.12065 18.4075 8.714 18.259L9.75 18L8.714 17.741C8.12065 17.5925 7.5788 17.2856 7.14639 16.853C6.71398 16.4204 6.40725 15.8784 6.259 15.285L6 14.25Z">
        </path>
        <path class="path" stroke-linejoin="round" stroke-linecap="round" stroke="black" fill="black"
            d="M6.5 4L6.303 4.5915C6.24777 4.75718 6.15472 4.90774 6.03123 5.03123C5.90774 5.15472 5.75718 5.24777 5.5915 5.303L5 5.5L5.5915 5.697C5.75718 5.75223 5.90774 5.84528 6.03123 5.96877C6.15472 6.09226 6.24777 6.24282 6.303 6.4085L6.5 7L6.697 6.4085C6.75223 6.24282 6.84528 6.09226 6.96877 5.96877C7.09226 5.84528 7.24282 5.75223 7.4085 5.697L8 5.5L7.4085 5.303C7.24282 5.24777 7.09226 5.15472 6.96877 5.03123C6.84528 4.90774 6.75223 4.75718 6.697 4.5915L6.5 4Z">
        </path>
    </svg>
    <span class="text_button">点赞关注会变聪明~</span>
</button>
  • button：定义了一个按钮元素，它将应用下面的CSS样式。
  • dots_border：一个用于创建背景动画效果的DIV元素。
  • sparkle：一个SVG元素，包含三条路径（path），用于创建一个闪光效果。
  • text_button：按钮上显示的文本。

CSS

css 复制代码 
.button {
    --black-700: hsla(0 0% 12% / 1);
    --border_radius: 9999px;
    --transtion: 0.3s ease-in-out;
    --offset: 2px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transform-origin: center;
    padding: 1rem 2rem;
    background-color: transparent;
    border: none;
    border-radius: var(--border_radius);
    transform: scale(calc(1 + (var(--active, 0) * 0.1)));
    transition: transform var(--transtion);
}
.button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: var(--black-700);
    border-radius: var(--border_radius);
    box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
        0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
        0 0 0 calc(var(--active, 0) * 0.375rem) hsl(260 97% 50% / 0.75);
    transition: all var(--transtion);
    z-index: 0;
}
.button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: hsla(260 97% 61% / 0.75);
    background-image: radial-gradient(at 51% 89%,
            hsla(266, 45%, 74%, 1) 0px,
            transparent 50%),
        radial-gradient(at 100% 100%, hsla(266, 36%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 22% 91%, hsla(266, 36%, 60%, 1) 0px, transparent 50%);
    background-position: top;
    opacity: var(--active, 0);
    border-radius: var(--border_radius);
    transition: opacity var(--transtion);
    z-index: 2;
}
.button:is(:hover, :focus-visible) {
    --active: 1;
}
.button:active {
    transform: scale(1);
}
.button .dots_border {
    --size_border: calc(100% + 2px);
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--size_border);
    height: var(--size_border);
    background-color: transparent;
    border-radius: var(--border_radius);
    z-index: -10;
}
.button .dots_border::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left;
    transform: rotate(0deg);
    width: 100%;
    height: 2rem;
    background-color: white;
    mask: linear-gradient(transparent 0%, white 120%);
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}
.button .sparkle {
    position: relative;
    z-index: 10;
    width: 1.75rem;
}
.button .sparkle .path {
    fill: currentColor;
    stroke: currentColor;
    transform-origin: center;
    color: hsl(0, 0%, 100%);
}
.button:is(:hover, :focus) .sparkle .path {
    animation: path 1.5s linear 0.5s infinite;
}
.button .sparkle .path:nth-child(1) {
    --scale_path_1: 1.2;
}
.button .sparkle .path:nth-child(2) {
    --scale_path_2: 1.2;
}
.button .sparkle .path:nth-child(3) {
    --scale_path_3: 1.2;
}
@keyframes path {
    0%,
    34%,
    71%,
    100% {
        transform: scale(1);
    }
    17% {
        transform: scale(var(--scale_path_1, 1));
    }
    49% {
        transform: scale(var(--scale_path_2, 1));
    }
    83% {
        transform: scale(var(--scale_path_3, 1));
    }
}
.button .text_button {
    position: relative;
    z-index: 10;
    background-image: linear-gradient(90deg,
            rgb(238, 101, 10) 0%,
            hsla(0 0% 100% / var(--active, 0)) 120%);
    background-clip: text;
    font-size: 1.1rem;
    font-weight: 600;
    color: transparent;
}
  • .button：定义按钮的基本样式，包括光标样式、定位、显示方式、间距、填充、背景颜色、边框、圆角和变换。
  • .button::before和.button::after：使用伪元素创建按钮的背景和发光效果，包括阴影和渐变效果。
  • .button:is(:hover, :focus-visible)：定义当鼠标悬停在按钮上或按钮获得焦点时的样式，包括激活状态的变量。
  • .button:active：定义按钮被按下时的样式，包括缩放效果。
  • .button .dots_border：定义背景动画效果的样式，包括位置、大小、圆角和层级。
  • .button .dots_border::before：定义背景动画的样式，包括位置、旋转动画和渐变效果。
  • @keyframes rotate：定义旋转动画的关键帧。
  • .button .sparkle：定义SVG元素的位置和层级。
  • .button .sparkle .path：定义SVG路径的样式，包括填充颜色和变换。
  • .button:is(:hover, :focus) .sparkle .path：定义当鼠标悬停或按钮获得焦点时SVG路径的动画效果。
  • @keyframes path：定义SVG路径的缩放动画的关键帧。
  • .button .text_button：定义按钮文本的样式，包括背景渐变和文本剪辑。
相关推荐
djk88882 小时前
支持手机屏幕的layui后台html模板
前端·html·layui
清粥油条可乐炸鸡3 小时前
motion入门教程
前端·css·react.js
品克缤5 小时前
解决 SVG 作为 CSS 背景图无法 background-size: 100% 100% 拉伸的问题
前端·css·vue.js·css3
小彭努力中5 小时前
190.Vue3 + OpenLayers 实战：实现地图旋转移动动画 + CSS缩放动画（详解 animate 用法）
前端·css·openlayers·cesium·webgis
召田最帅boy5 小时前
为博客每日一句添加音频播放功能
spring boot·html·音视频
一直都在5725 小时前
JSoup：Java 处理 HTML 的实用利器，从基础到实战爬取教程
java·python·html
HWL56796 小时前
使用CSS实现，带有动态浮动高亮效果的导航菜单
前端·css
天天向上10246 小时前
vue2 div使用css的方式实现自动滚动
前端·javascript·css
@大迁世界6 小时前
3 个 CSS 网格布局，替代你的整个组件库
前端·css
天天向上10246 小时前
vue2 el-table使用css的方式实现列表自动滚动
css·vue.js·elementui
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04UV安装并设置国内源05OpenClaw Control UI安全上下文访问配置06OpenClaw macOS 完整安装与本地模型配置教程（实战版）07Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services08本地部署 OpenClaw + DeepSeek-R1 完全指南09小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南