HTML5+CSS3 吃豆豆代码_html吃豆豆-CSDN博客

本文链接：https://blog.csdn.net/m0_45816418/article/details/109273654

吃豆豆

<!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 样式属性

CSS3 transition（过渡）

transition:要过渡的属性 花费时间 运动曲线 何时开始;

1. 属性：想要变化的css属性，宽度高度北京颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all即可。
2. 花费时间：单位是秒（必须写单位）比如0.5s
3. 运动曲线：默认是ease（可以省略）
4. 何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s（可以省略）

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: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

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

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线，默认是0
animation-delay	规定动画何时开始,默认是0
animation-iteration-count	规定动画播放的次数默认是1,可以infinite无限循环
animation-direction	规定动画在下一周期是否逆向播放,默认"normal","alternate"逆播放
animation-fill-mode	规定动画结束后的状态,保持forwards 回到起始backwards