html + css little exercise 1- eat Peas
index.html + css results are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>吃豆豆</title>
<style>
body {
margin: 0;
background-color: black;
}
div {
width: 200px;
height: 200px;
margin-left: 150px;
margin-top: 150px;
border-radius: 100px;/* 圆角 顺时针：左上，右上，右下，左下*/
animation: peas 1s infinite;
}
@keyframes peas/* 豆豆 */{
0% {
box-shadow:
100px 0px 0px -80px green,
250px 0px 0px -80px green,
450px 0px 0px -80px green,
600px 0px 0px -80px green;/* 阴影:水平 垂直 阴影模糊半径 阴影扩展大小*/
}
100% {
box-shadow:
50px 0px 0px -80px green,
200px 0px 0px -80px green,
350px 0px 0px -80px green,
500px 0px 0px -80px green;
}
}
div:before,div:after {
display: block;/* 转换为块元素 */
content: "";/* 激活伪元素的必要元素 */
width: 200px;
height: 100px;
background: yellow;
}
div:before {
border-radius: 100px 100px 0 0;
transform: rotate(-20deg);/* 逆时针 */
animation: mouthtop 1s infinite;
}
div:after {
border-radius: 0px 0px 100px 100px;
transform: rotate(20deg);/* 顺时针 */
animation: mouthbutton 1s infinite;/* 执行动画:名称,时间,无限循环 */
}
@keyframes mouthtop{/* css3动画关键帧 */
0% {
transform: rotate(0deg);
}
50%{
transform: rotate(-20deg);
}
100%{
transform: rotate(0deg);
}
}
@keyframes mouthbutton{/* css3动画关键帧 */
0% {
transform: rotate(0deg);
}
50%{
transform: rotate(20deg);
}
100%{
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<!-- 盒子标签，矩形区域 -->
<div></div>
</body>
</html>
