怎么用CSS3制作爱心加

这篇文章主要介绍怎么用CSS3制作爱心加，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

效果大概长这样

1、首先html创建新文件，定义9个div标签。

2、开始定义css样式来进行修饰添加background-color属性设置背景颜色，宽度设置为100%，高度设置为100%，margin属性设置所有外边距属性。

body {        width: 100%;        height: 100%;        margin: 0;        background-color: #ccc;    }

3、container标题文本样式，利用align-items属性居中对齐。

  .container {        display: flex;        width: 100%;        height: 100%;        justify-content: center;        align-items: center;

4、header标题文本样式，利用position属性指定一个元素定位。

.header {        position: relative;        width: 138px;        /* display: flex; */

5、class*='header-'标题文本样式，利用position属性定位元素，语法"position: absolute;top: -5px;border-radius: 5px"生成绝对定位的元素。

 [class*='header-']{        position: absolute;        width: 10px;        height: 10px;        top: -5px;        border-radius: 5px;     }

6、header0-8标题文本样式，利用animation（动画）属性绑定到每8个元素，让元素摆动起来。

 .header-0,    .header-8 {        animation: header-0 3.2s infinite;    }    .header-1,    .header-7 {        animation: header-1 3.2s infinite;    }    .header-2,    .header-6 {        animation: header-2 3.2s infinite;    }    .header-3,    .header-5 {        animation: header-3 3.2s infinite;    }    .header-4 {        animation: header-4 3.2s infinite;    }

7、使用4个@keyframes规则，给4个创建动画逐步改变0％是开头动画，100％。

@keyframes header-0 {    0%,    10%,    90%,    100% {        height: 10px;        top: -5px;    }    45%,    55% {        height: 30px;        top: -10px;    }}@keyframes header-1 {    0%,    10%,    90%,    100% {        height: 10px;        top: -5px;    }    45%,    55% {        height: 60px;        top: -31px;    }}@keyframes header-2 {    0%,    10%,    90%,    100% {        height: 10px;        top: -5px;    }    45%,    55% {        height: 80px;        top: -37px;    }}@keyframes header-3 {    0%,    10%,    90%,    100% {        height: 10px;        top: -5px;    }    45%,    55% {        height: 90px;        top: -31px;    }}@keyframes header-4 {    0%,    10%,    90%,    100% {        height: 10px;        top: -5px;    }    45%,    55% {        height: 94px;        top: -23px;    }

8、header0-8标题文本样式添加animation-delay属性等待1秒然后开始动画，background属性设置颜色绑定8个元素。

.header-0 {    left: 0;    animation-delay: 0s;    background: #92fe9d;}.header-1 {    left: 16px;    animation-delay: 0.15s;    background: #00c9ff;}.header-2 {    left: 32px;    animation-delay: 0.3s;    background: #ff758c;}.header-3 {    left: 48px;    animation-delay: 0.45s;    background: #ff7eb3;}.header-4 {    left: 66px;    animation-delay: 0.6s;    background: #fa71cd;}.header-5 {    left: 82px;    animation-delay: 0.75s;    background: #6f86d6;}.header-6 {    left: 98px;    animation-delay: 0.9s;    background: #f9f586;}.header-7 {    left: 114px;    animation-delay: 1.05s;    background: #b1f4cf;}.header-8 {    left: 130px;    animation-delay: 1.2s;    background: #fef9d7;}

代码效果出来了

下面完整代码

以上是"怎么用CSS3制作爱心加"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！