HTML5+CSS3 吃豆豆代码_Html5

HTML5+CSS3 吃豆豆代码

吃豆豆

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吃豆豆动画</title>
    <style>
        body {
            background-color: #7c1c77be;
            margin: 0 auto;
        }
        .Imp {
            width: 200px;
			height:200px;	
			border-radius:50%;
            margin:200px;
            animation: peas 1s infinite linear;
        }
        .Top {
			width: 200px;
			height:100px;
			margin-left:200px;
			background:#ffcc66;     
			border-radius:100px 100px 0px 0px;
			animation: MouthTop 1s infinite; 
		}
		.Bottom {
			width: 200px;
			height:100px;
			margin-left:200px;
			background:#ffcc66;
			border-radius:0px 0px 100px 100px;
			animation: MouthBottom 1s infinite;
		}
        @keyframes MouthTop{
			0%{
				transform:rotate(0deg);
			}
			50%{
				transform: rotate(-30deg);
			}
			100%{
				transform: rotate(0deg);
			}
		}
		@keyframes MouthBottom{
			0%{
				transform:rotate(0deg);
			}
			50%{
				transform: rotate(30deg);
			}
			100%{
				transform: rotate(0deg);
			}
		}
        @keyframes peas{
			0%{
                box-shadow: 400px 0px 0px -80px #467de4,
                            600px 0px 0px -80px #467de4,
                            800px 0px 0px -80px #467de4,
                            1000px 0px 0px -80px #467de4;
            }
            100%{
                box-shadow: 200px 0px 0px -80px  #467de4,
                            400px 0px 0px -80px  #467de4,
                            600px 0px 0px -80px  #467de4,
                            800px 0px 0px -80px  #467de4;
            }
		}
    </style>
</head>
<body>
    <div class="Imp">
        <div class="Top"></div>
        <div class="Bottom"></div>
    </div>
    
</body>
</html>

效果图

在这里插入图片描述

CSS3 @keyframes 规则

通过 @keyframes 规则，可以创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%

0% 是动画的开始时间，100% 动画的结束时间

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需，定义动画的名称
keyframes-selector	必需，动画时长的百分比
css-styles	必需，一个或多个合法的 CSS 样式属性

点击了解transform属性

CSS3 box-shadow 属性

语法

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色，请参阅 CSS 颜色值
inset	可选，将外部阴影 (outset) 改为内部阴影

CSS3 animation 属性

语法

animation: name duration timing-function delay iteration-count direction;

animation 属性是一个简写属性，用于设置六个动画属性：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画