2023情人节网页表白动画HTML代码示例
>
<html>
<head>
<meta charset="utf-8"/>
<title>2023情人节网页表白动画title>
<style>
body {
background-color: #FFB6C1;
text-align: center;
font-size: 30px;
font-family: cursive;
margin-top: 50px;
}
h1 {
color: #800080;
font-size: 60px;
margin-bottom: 50px;
}
p {
color: #FFFFFF;
font-size: 40px;
margin-top: 100px;
}
.heart {
position: relative;
animation: beat 1s infinite linear;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 20px;
top: 0;
width: 50px;
height: 80px;
background-color: #FF69B4;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
border-radius: 50px 0 0 50px;
}
.heart:after {
left: auto;
right: 20px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
border-radius: 0 50px 50px 0;
}
@keyframes beat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
style>
head>
<body>
<h2>表白超浪漫的表白动画h1>
<div class="heart">div>
<p>我爱你p>
body>
html>
下载地址
用户评论
