怎么用CSS3制作爱心加
这篇文章主要介绍怎么用CSS3制作爱心加，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
普陀ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！
效果大概长这样
1、首先html创建新文件，定义9个div标签。
<div class="header-0"></div> <div class="header-1"></div> <div class="header-2"></div> <div class="header-3"></div> <div class="header-4"></div> <div class="header-5"></div> <div class="header-6"></div> <div class="header-7"></div> <div class="header-8"></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;
}代码效果出来了
下面完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>爱心加载</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
background-color: #ccc;
}
.container {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.header {
position: relative;
width: 138px;
/* display: flex; */
}
[class*='header-']{
position: absolute;
width: 10px;
height: 10px;
top: -5px;
border-radius: 5px;
}
.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;
}
@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;
}
}
.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;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header-0"></div>
<div class="header-1"></div>
<div class="header-2"></div>
<div class="header-3"></div>
<div class="header-4"></div>
<div class="header-5"></div>
<div class="header-6"></div>
<div class="header-7"></div>
<div class="header-8"></div>
</div>
</div>
</body>
</html>以上是“怎么用CSS3制作爱心加”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
网站栏目：怎么用CSS3制作爱心加
本文网址：https://www.cdcxhl.com/article0/posjio.html
成都网站建设公司_创新互联，为您提供网站导航、全网营销推广、品牌网站建设、虚拟主机、网站营销、建站公司
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 网站建设前期沟通好是否重 2021-09-06
- 企业网站建设的界面设计技巧有哪些呢？ 2022-11-06
- 网站建设的创意风格设计 2022-08-13
- 企业做网站建设的意义是什么？ 2022-12-22
- 【网站建设】搜索引擎优化不一定要太熟练,从常识开始 2022-05-11
- 企业官方网站建设要留意的事宜有什么 2016-11-15
- 电商网站建设原则和注意问题 2022-07-06
- 关于新手进行网站建设制作的一些建议 2016-01-17
- 网站建设有哪些设计方法，让网站更具吸引力？ 2016-11-08
- 企业网站建设设计404页面和活用404页面的重要性 2016-11-08
- 新闻类网站建设的要求 2014-06-20
- 无锡网站建设公司能为您提供的服务有哪些？ 2022-05-29