网页-前端-练习题：Pac-man
吃豆豆网页小动画练习题
>>Html......
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="和尚" content="Pac-man"> <title>Pack-mantitle> <link rel="stylesheet" type="text/css" href="css/Pac-man.css"> head> <body class="Pac_manbgc"> <div class="mouth"> <div class="topmouth">div> <div class="buttommouth">div> div> body> html>
>>css......
/*设置背景颜色*/
.Pac_manbgc {
background-color: #000000;
}
/*吃豆人上半部分css*/
.topmouth {
margin-left: 200px;
margin-top: 0;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px dashed yellow;
/*设置圆角*/
border-radius: 100px 100px 0 0;
/* csss变换 旋转（度数 deg 周期）
transform: rotate(-30deg);*/
/*播放动画 动画名称 时间 速度（匀速） 循环*/
animation: toppac-man 1s linear infinite;
}
/*吃豆人下半部分CSS*/
.buttommouth {
margin-left: 200px;
margin-top: 0;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px dashed yellow;
/*设置圆角*/
border-radius: 0 0 100px 100px;
/* !*css3变换 旋转（角度 deg 周期）*!
transform: rotate(30deg);*/
/*播放动画 动画名称 时间 速度（默认匀速） 循环*/
animation: buttompac-man 1s linear infinite;
}
/*上半部分动画 关键帧设置*/
@keyframes toppac-man {
/*初始状态关键帧*/
0% {
transform: rotate(0deg);
}
/*中间状态关键帧*/
50% {
transform: rotate(-30deg);
}
/*结束状态关键帧*/
100% {
transform: rotate(0deg);
}
}
/*下半部分动画关键帧设置*/
@keyframes buttompac-man {
/*初始状态关键帧*/
0% {
transform: rotate(0deg);
}
/*中间状态关键帧*/
50% {
transform: rotate(30deg);
}
/*结束状态关键帧*/
100% {
transform: rotate(0deg);
}
}
/*pac-man吃的豆豆*/
.mouth {
width: 200px;
height: 200px;
/*background-color: rosybrown;*/
margin-top: 50px;
margin-left: 10px;
border: 0;
border-radius: 100px 100px;
/*box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];*/
/*1*/
box-shadow: 600px 0 0 -80px yellow,
500px 0 0 -80px yellow,
400px 0 0 -80px yellow,
300px 0 0 -80px yellow;
/*播放动画*/
animation: pea 1s linear infinite;
}
@keyframes pea {
0% {
box-shadow: 600px 0 0 -80px yellow,
500px 0 0 -80px yellow,
400px 0 0 -80px yellow,
300px 0 0 -80px yellow;
}
100% {
box-shadow: 500px 0 0 -80px yellow,
400px 0 0 -80px yellow,
300px 0 0 -80px yellow,
200px 0 0 -80px yellow;
}
}
>>:👁👁
-------------------------------------------------------------------------------------------------
