如何用纯 CSS 创作一个悬停时右移的按钮特效

╰+哭是因爲堅強的太久メ 2022-04-05 04:43 183阅读 0赞

![在这里插入图片描述][20181210215434868.gif]

## 效果预览 ##

[在线演示][Link 1]

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

[https://codepen.io/comehope/pen/MqqqwG][https_codepen.io_comehope_pen_MqqqwG]

## 可交互视频 ##

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/p/pEgDAM/cJBwwHn][https_scrimba.com_p_pEgDAM_cJBwwHn]

## 源代码下载 ##

[本地下载][Link 2]

每日前端实战系列的全部源代码请从 github 下载：

[https://github.com/comehope/front-end-daily-challenges][https_github.com_comehope_front-end-daily-challenges]

## 代码解读 ##

定义 dom，容器中包含 9 个元素：

居中显示：

body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }

定义容器尺寸：

.container {
        width: 30em;
        height: 30em;
        font-size: 10px;
    }

用 grid 布局把 9 个子元素排列成 3 \* 3 的网格状：

.container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

设置容器内子元素的样式，是通过伪元素来设置的：

.container span {
        position: relative;
    }
    
    .container span::before,
    .container span::after 
    {
        content: '';
        position: absolute;
        box-sizing: border-box;
        border-style: none solid solid none;
        border-width: 1em;
        border-color: gold;
        width: 100%;
        height: 100%;
    }

旋转容器，让它的尖端朝上：

.container {
        transform: rotate(-135deg);
    }

增加子元素尺寸由小到大变化的动画：

.container span::before,
    .container span::after 
    {
        animation: 
            animate-scale 1.6s linear infinite;
    }
    
    @keyframes animate-scale {
        from {
            width: 1%;
            height: 1%;
        }
    
        to {
            width: 100%;
            height: 100%;
        }
    }

增加子元素边框色变化的动画：

.container span::before,
    .container span::after 
    {
        animation: 
            animate-border-color 1.6s linear infinite,
            animate-scale 1.6s linear infinite;
    }
    
    @keyframes animate-border-color {
        0%, 25% {
            border-color: tomato;
        }
    
        50%, 75% {
            border-color: gold;
        }
    
        100% {
            border-color: black;
        }
    }

增加子元素边框宽度变化的动画：

.container span::before,
    .container span::after 
    {
        animation: 
            animate-border-width 1.6s linear infinite,
            animate-border-color 1.6s linear infinite,
            animate-scale 1.6s linear infinite;
    }

最后，让 `::after` 伪元素的动画时间慢半拍：

.container span::after {
        animation-delay: -0.8s;
    }
    
    @keyframes animate-border-width {
        0%, 100%{
            border-width: 0.1em;
        }
    
        25% {
            border-width: 1.5em;
        }
    }

大功告成！

原文地址：https://segmentfault.com/a/1190000016419507

[20181210215434868.gif]: /images/20220405/b0e1cbb0741340a4bfef30230e7b0f35.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=%2Fwp-content%2Fuploads%2F2018%2F11%2Ffront-end-daily-challenges-master%2F137-abstract-water-wave-animation&demotitle=%E7%94%A8%E7%BA%AF%20CSS%20%E5%88%9B%E4%BD%9C%E4%B8%80%E4%B8%AA%E6%8A%BD%E8%B1%A1%E7%9A%84%E6%B0%B4%E6%B3%A2%E8%8D%A1%E6%BC%BE%E7%9A%84%E5%8A%A8%E7%94%BB
[https_codepen.io_comehope_pen_MqqqwG]: https://codepen.io/comehope/pen/MqqqwG
[https_scrimba.com_p_pEgDAM_cJBwwHn]: https://scrimba.com/p/pEgDAM/cJBwwHn
[Link 2]: http://www.jqhtml.com/21732.html
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges