学习css3，使用代码实现一根心爱的二踢脚_css画脚丫
以下是使用CSS实现一根心爱的二踢脚的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 画一根脚丫</title>
<style>
.heart {
position: relative;
width: 200px;
height: 200px;
background: red;
transform: rotate(45deg);
border-radius: 50%;
animation: beat 0.7s infinite;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.heart::before {
width: 80px;
height: 80px;
}
.heart::after {
width: 60px;
height: 60px;
background: white;
top: 80px;
left: 80px;
}
@keyframes beat {
0% {
transform: scale(1) rotate(45deg);
}
50% {
transform: scale(1.1) rotate(45deg);
}
100% {
transform: scale(1) rotate(45deg);
}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>这段代码使用了CSS伪元素 ::before 和 ::after 来创建心的两个部分，并且通过 @keyframes 定义了一个心跳的动画效果。这个示例提供了一个简单的方法来创建一个有趣的动画对象。
评论已关闭