HTML5七夕情人节表白网页制作【一箭穿心动画css3代码】HTML+CSS+JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>七夕情人节表白</title>
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #222;
color: #fff;
font-family: Arial, sans-serif;
}
.arrow {
width: 100px;
height: 100px;
background: #fff;
position: relative;
animation: fly 5s infinite alternate ease-in-out;
}
.arrow:before, .arrow:after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.arrow:before {
width: 20px;
height: 20px;
background: #222;
border-radius: 50%;
top: -10px;
}
.arrow:after {
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
top: -5px;
transform: translateX(-50%) rotate(45deg);
}
@keyframes fly {
from {
transform: translateX(-50%) rotate(0deg);
}
to {
transform: translateX(-50%) rotate(360deg);
transform: translateY(200px);
}
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
</html>这段代码使用了CSS3的@keyframes规则创建了一个“箭穿心”的动画效果，你可以将其嵌入到你的HTML文件中，作为七夕情人节表白页面的一个特色动画。
评论已关闭