炫彩爱心加载特效

最新推荐文章于 2024-03-03 10:10:24 发布

青青子衿~~

最新推荐文章于 2024-03-03 10:10:24 发布

阅读量156

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_45727272/article/details/130153149

版权

提示：彩色的心形加载动画，拿去使用吧

前言

提示：以下是本篇文章的代码内容,供大家参考,相互学习

一、html代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>炫彩爱心加载特效</title>
    <link rel="stylesheet" href="../css.css">
</head>

<body>
    <div class="heart">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

二、css代码

body{
    margin: 0;
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 背景径向渐变 */
    background: radial-gradient(circle at center,mediumpurple,#000);
}
.heart{
    width: 280px;
    height: 220px;
    display: flex;
    justify-content: space-between;
}
.heart span{
    /* 自定义属性值【划重点】 */
    --c:plum;
    --h:50%;
    --t:25%;
    /* var()函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用 */
    background-color: var(--c);
    width: 20px;
    border-radius: 10px;
    position: relative;
    height: var(--h);
    top: var(--t);
    /* 执行动画 infinite是无限次播放 */
    animation: beating 1s infinite;
}
.heart span:nth-child(1),
.heart span:nth-child(9){
    --c:lightcoral;
    --h:60px;
    --t:44px;
}
.heart span:nth-child(2),
.heart span:nth-child(8){
    --c:lightskyblue;
    --h:120px;
    --t:12px;
}
.heart span:nth-child(3),
.heart span:nth-child(7){
    --c:lightgreen;
    --h:160px;
    --t:0;
}
.heart span:nth-child(4),
.heart span:nth-child(6){
    --c:gold;
    --h:180px;
    --t:16px;
}
.heart span:nth-child(5){
    --c:plum;
    --h:188px;
    --t:32px;
}

/* 接下来我们定义动画 */
@keyframes beating{
    0%,30%{
        height: var(--h);
        top: var(--t);
        background-color: var(--c);
        filter: blur(0);
    }
    60%,70%{
        height: 50%;
        top: 25%;
        background-color: plum;
        /* 模糊度 */
        filter: blur(5px);
    }
}

总结

CSS盒模型：CSS盒模型是指用于布局Web页面的基本模型，它将元素视为一个矩形盒子，包括内容区域、内边距、边框和外边距。在该代码中，使用了盒模型的属性width、height、border-radius和position。
弹性布局：弹性布局（Flexbox）是CSS3中的一种新的布局方式，它使得元素的排列更加简单和灵活。在该代码中，使用了display: flex属性和align-items、justify-content属性来实现水平和垂直居中。
自定义属性：自定义属性是指可以使用自定义名称的属性，在CSS中使用var()函数进行调用。在该代码中，使用了--c、--h和--t三个自定义属性。
var()函数：var()函数用于调用自定义属性值，如果一个属性值在多处被使用，该方法就很有用。在该代码中，使用了var()函数来调用自定义属性值--c、--h和--t。
背景径向渐变：背景径向渐变是一种CSS渐变效果，它以圆形或椭圆形为中心，呈放射状进行颜色渐变。在该代码中，使用了radial-gradient()函数来定义背景径向渐变。
伪类选择器（:nth-child）：伪类选择器是指在CSS中，用于选择指定位置或条件的元素的选择器。在该代码中，使用了:nth-child()伪类选择器来选择指定位置的span元素。
CSS动画：CSS动画是指使用CSS来控制元素的动态效果，例如淡入淡出、移动、旋转等。在该代码中，使用了@keyframes规则来定义动画，以及animation属性来指定动画的执行方式和次数。
filter属性（blur()函数）：filter属性是CSS3中的一个属性，用于对元素进行图形效果处理。在该代码中，使用了filter属性的blur()函数来实现模糊效果。

青青子衿~~

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
炫彩爱心加载特效

提示：以下是本篇文章的代码内容,供大家参考,相互学习CSS盒模型：CSS盒模型是指用于布局Web页面的基本模型，它将元素视为一个矩形盒子，包括内容区域、内边距、边框和外边距。在该代码中，使用了盒模型的属性width、height、border-radius和position。弹性布局：弹性布局（Flexbox）是CSS3中的一种新的布局方式，它使得元素的排列更加简单和灵活。在该代码中，使用了display: flex属性和align-items、justify-content属性来实现水平和垂直居中。
复制链接

扫一扫