使用CSS伪元素制作动感超酷的hover动画

news2024/12/27 13:29:04

css 有很多神奇的效果都是使用 CSS 伪元素利用视觉差来制作的，以前没怎么深入的研究过 css，这次复习 css 的知识点才恍然大悟，原来 css 这么 cool。

先上效果：
在这里插入图片描述

动画实现原理

这个组动画的实现原理很简单，前边是一个 div，这个 div 后边再加一个 div 做动画就可以实现了，那么我们需要前后两个 div 叠加在一起？NoNoNo，这个时候就需要 CSS 伪元素::before 和::after 出场了。

CSS 伪元素::before 和::after

CSS 伪元素::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

::before 和::after 的区别就是一前一后，举个简单的例子：
举个例子：
在这里插入图片描述
代码如下：

<div id="demo1">这是顶部的div</div>
<style>
    #demo1{
        position: relative;
        width:100px;
        height:100px;
        color: white;
        background-color: black;
    }
    #demo1::before{
        content:'';
        position: absolute;
        width:110px;
        height:110px;
        z-index: -1;
        top:-5px;
        left:-5px;
        background-image: linear-gradient(
                    var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
    }
    #demo1::after{
        content:'';
        position: absolute;
        width:120px;
        height:120px;
        z-index: -2;
        top:-10px;
        left:-10px;
        background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
    }
</style>

这段 css 代码中有几个关键的属性

div 必须作为伪元素定位的父类 position: relative;
伪元素为相对于 div 定位 position: absolute;
通过其他css属性来定义伪元素的属性，产生层叠和视觉上的错位。
最后就是利用 animation 来制作动画了，动画的效果可以选择移动旋转或是透明度，可以产生各种超酷的效果。

看下最后的效果：

在这里插入图片描述
最后的代码如下：

<div id="demo2">这是顶部的div</div>
<style>
    @property --rotate {
            syntax: "<angle>";
            initial-value: 132deg;
            inherits: false;
        }
    #demo2{
        position: relative;
        width:103px;
        height:103px;
        color: white;
        background-color: black;
        border-radius: 8px;
        padding: 3px;
    }
    #demo2::before {
        content: "";
        width: 112px;
        height: 112px;
        border-radius: 8px;
        background-image: linear-gradient(
                    var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
        position: absolute;
        z-index: -1;
        top: -5px;
        left: -5px;
        animation: spin1 2.5s linear infinite;
        }
    #demo2::after{
        position: absolute;
        content: "";
        top: calc(var(--card-height) / 6);
        left: 0;
        right: 0;
        z-index: -1;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        transform: scale(0.8);
        filter: blur(calc(var(--card-height) / 5));
        background-image: linear-gradient(
                    var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
        opacity: 1;
        transition: opacity .5s;
        animation: spin1 2.5s linear infinite;
    }
    @keyframes spin1 {
            0% {
                --rotate: 0deg;
            }
            100% {
                --rotate: 720deg;
            }
        }
</style>