前言
可达鸭很火,试试用css写一个可达鸭
完成图
先写个简单样式
如图
加个动画
让手移动
最后插入音乐
audio标签插入
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: skyblue;
}
* {
margin: 0;
padding: 0;
}
.cdyBox {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.hair {
width: 100px;
height: 100px;
background-color: #000;
}
.yaHead {
width: 250px;
height: 200px;
background-color: #EFA222;
border-radius: 100px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.eyes1 {
display: flex;
justify-content: center;
align-items: flex-end;
width: 60px;
height: 50px;
background-color: #fff;
border-radius: 50px;
margin-top: 60px;
margin-left: 40px;
font-size: 20px;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
animation-iteration-count: infinite;
}
.eyes2 {
display: flex;
justify-content: center;
/* align-items: center; */
width: 60px;
height: 50px;
background-color: #fff;
border-radius: 50px;
margin-top: 60px;
margin-right: 40px;
font-size: 20px;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
animation-iteration-count: infinite;
}
.yj {
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #000;
}
.zb {
width: 200px;
background-color: #fff;
border-radius: 100px;
margin-bottom: 30px;
}
.dz {
width: 300px;
height: 100px;
background-color: #9BD860;
}
.yaBody {
width: 300px;
height: 300px;
background-color: #EFA222;
border-radius: 115px;
}
.jiao {
width: 200px;
height: 50px;
display: flex;
justify-content: space-around;
}
.zuojiao {
width: 50px;
height: 50px;
background-color: #fff;
}
.youjiao {
width: 50px;
height: 50px;
background-color: #fff;
}
.hand{
width: 30px;
height: 100px;
background-color: #EFA222;
transform: rotate(300deg);
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
animation-iteration-count: infinite;
}
.hand2 {
width: 30px;
height: 100px;
background-color: #EFA222;
transform: rotate(300deg);
margin-left: 300px;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes move {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(300deg);
}
}
.yingxiang {
width: 100px;
height: 90px;
position: relative;
}
.red {
height: 30px;
background-color: #B51000;
}
.black {
height: 30px;
background-color: #160000;
}
.white {
height: 30px;
background-color: #fff;
}
.yuan {
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute;
top: 24%;
left: 28%;
background-color: #fff;
border: 3px solid #000;
}
.tianxian {
position: absolute;
top: -45%;
left: 0%;
width:20px ;
height: 40px;
background-color: #000;
}
.audioStyle {
display: none;
}
</style>
</head>
<body>
<div class="cdyBox">
<div class="hair"></div>
<div class="yaHead">
<div class="eyes1">
<div class="yj"></div>
</div>
<div class="eyes2">
<div class="yj"></div>
</div>
<div class="zb"></div>
</div>
<div class="yaBody">
<div class="hand"></div>
<div class="hand2"></div>
</div>
<div class="jiao">
<div class="zuojiao"></div>
<div class="youjiao"></div>
</div>
<div class="dz">
<div class="yingxiang">
<div class="red"></div>
<div class="black"></div>
<div class="white"></div>
<div class="yuan"></div>
<div class="tianxian"></div>
</div>
</div>
<audio class="audioStyle" autoplay loop controls src="http://music.163.com/song/media/outer/url?id=1950337050.mp3"></audio>
</div>
</body>
</html>
复制代码