css求婚页面
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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！