使用CSS3画出一个叮当猫HTML源码
warning:
这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。
以下是使用CSS3创建一个简单叮当猫的HTML源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doraemon Cat</title>
<style>
.cat {
position: relative;
width: 200px;
height: 200px;
background: #000;
border-radius: 50%;
box-shadow: inset 0 0 50px #000;
animation: spin 2s linear infinite;
}
.ear {
position: absolute;
width: 50px;
height: 100px;
background: #000;
border-radius: 50%;
top: -50px;
}
.ear.left {
left: -25px;
transform: rotate(-30deg);
}
.ear.right {
right: -25px;
transform: rotate(30deg);
}
.eye {
position: absolute;
width: 20px;
height: 40px;
background: #fff;
border-radius: 50%;
top: 80px;
}
.eye.left {
left: 40px;
}
.eye.right {
right: 40px;
}
.nose {
position: absolute;
width: 20px;
height: 15px;
background: #f00;
border-radius: 50%;
top: 110px;
left: 60px;
}
.whisker {
position: absolute;
width: 40px;
height: 20px;
background: #000;
border-radius: 50px 50px 0 0;
top: 140px;
left: 20px;
transform-origin: bottom center;
animation: bounce 2s infinite;
}
.whisker.right {
left: auto;
right: 20px;
transform-origin: bottom center;
}
.tail {
position: absolute;
width: 40px;
height: 60px;
background: #000;
border-radius: 50px 50px 0 0;
bottom: -60px;
left: 80px;
transform-origin: bottom center;
animation: tail-spin 2s linear infinite;
}
.tail:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
bottom: -40px;
left: -10px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes bounce {
0%, 100% {
transform: scaleY(1);
}
50% {
transform: scaleY(1.5);
}
}
@keyframes tail-spin {
0% {
transform: rotate(-45deg) translateX(5px);
}
100% {
transform: rotate(45deg) translateX(-5px);
}
}
</style>
</head>
<body>
<div class="cat">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
<div class="nose"></div>
评论已关闭