CSS求婚小demo
主要采用的是animation 动画
animation 属性是一个简写属性,用于设置动画属性:
animation-name 名称
animation-duration 动画所需要的时间
animation-timing-function 运动曲线 linear 匀速 ease 低速开始,逐渐加速`
animation-delay 动画何时开始
animation-iteration-count 播放次数 infinate无限次
animation-direction 下一周期逆向播放
animation-fill-mode 规定动画结束的状态
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: aliceblue;
}
.w-t {
margin: 100px auto;
width: 500px;
}
.w-t-t {
z-index: 20;
position: absolute;
left: 50%;
line-height: 80px;
color: #000;
opacity: 0;
font-size: 26px;
animation: titleBloom 1s linear 1s both;
}
@keyframes titleBloom {
0% {
transform: translate(-50px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
.w-t img {
opacity: 0;
animation: bloom 2s ease 1.2s infinite;
}
.w-t img.boom2 {
float: right;
animation: bloom 2s ease 1.5s infinite;
}
.w-t img.boom3 {
position: absolute;
margin-top: 40px;
animation: bloom 2s ease 1.4s infinite;
}
@keyframes bloom {
0% {
transform: scale(0, 0);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}
#w-p {
margin: -50px auto;
width: 1000px;
overflow: hidden;
}
#w-p-m {
float: left;
width: 50%;
}
#w-p-m img {
margin-right: 0;
float: right;
margin-top: 60px;
animation: w-p-m 0.5s ease .5s both;
}
@keyframes w-p-m {
0% {
opacity: 0;
transform: translate(-200px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
#w-p-w {
float: right;
width: 50%;
}
#w-p-w img {
animation: showW 0.8s ease 0s both;
}
@keyframes showW {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#w-p-f {
position: absolute;
left: 50%;
margin-top: 75px;
margin-left: -35px;
}
#w-p-f img {
width: 60px;
animation: show 0.4s ease 1s both;
}
@keyframes show {
0% {
opacity: 0;
transform: scale(0.1, 0.1);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}
</style>
<body>
<div class="w-t">
<div class="w-t-t">狗哥,嫁给我好嘛?</div>
<img src="./png/boom.png" alt="" class="boom1">
<img src="./png/boom.png" alt="" class="boom2">
<img src="./png/boom.png" alt="" class="boom3">
</div>
<div id="w-p">
<div id="w-p-w"> <img src="./png/woman.png" alt=""></div>
<div id="w-p-m"> <img src="./png/man.png" alt=""></div>
<div id="w-p-f"> <img src="./png/flower.png" alt=""></div>
</div>
</body>
</html>