非常简单,用的是Hbuilder X编辑器写的,仅供参考。后续会完善成一个表白网页。
又是套娃的一天鸭❤!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
position: relative;
background-color: pink;
}
span{
position: absolute;
left: 36%;
display: block;
color: red;
margin: 30px auto;
font-size: 400px;
transition: all .3s;
animation-name: xin;
animation-duration: 3s;
/* 重复动画效果
放映完之后倒回 */
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes xin{
0%{
transform: scale(1.0);
}
100%{
transform: scale(1.5);
}
}
</style>
</head>
<body>
<span>
❤
</span>
</body>
</html>
这是样式,因为没有录制视频或者gif,将就看一下,代码复制过去运行效果会更好。