css3关键帧动画+伪元素实现心动特效

最新推荐文章于 2024-04-30 09:57:08 发布

Y_qilin_

最新推荐文章于 2024-04-30 09:57:08 发布

阅读量425

点赞数

分类专栏： css 文章标签： css3 animation html

本文链接：https://blog.csdn.net/Y_qilin_/article/details/114374075

版权

css 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

css3关键帧动画+伪元素实现心动特效

效果图
结构图
代码详解

效果图

在这里插入图片描述

结构图

在这里插入图片描述
注意伪元素要将元素属性设置成块级元素才能生效（display：block；）

知识点：

关键帧动画animation设置元素运动属性值
利用元素的前后伪元素设置旋转角度将元素拼凑成爱心形状

代码详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心动特效复刻</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f00;
            margin: 250px auto;
            color: #fff;
            position: relative;
            transform: rotateZ(-45deg);
            animation: peng 1s infinite alternate linear;
        }
        @keyframes peng {
            0% {
                transform: rotateZ(-45deg) scale(0.5);
            }
            100% {
                transform: rotateZ(-45deg) scale(1);
            }
        }
        .box::before, .box::after {
            content: "";
            width: 200px;
            height: 200px;
            border-radius: 50%;
            display: block;
            background-color: #f00;
            position: absolute;
        }
        .box::before {
            top: -100px;
        }
        .box::after {
            right: -100px;
            top: 0;
        }
        .text {
            position: relative;
            z-index: 100;
            transform: rotateZ(45deg) translateX(65.4px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="text">是心动啊！糟糕眼神躲不掉</div>
    </div>
</body>
</html>