吃豆豆HTML+CSS

最新推荐文章于 2022-04-13 15:22:19 发布

懒羊羊♛

最新推荐文章于 2022-04-13 15:22:19 发布

阅读量201

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： css3 html css

本文链接：https://blog.csdn.net/weixin_46596213/article/details/110449239

版权

HTML+CSS+JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>吃豆豆</title>
		<style>
			body {
				margin: 0;
				background-color: #a79066;
			}
			
			.mouth {
				width: 200px;
				height: 200px;
				/*margin-top: 100px ;*/
				margin: 200px 200px;
				border-radius: 100px 100px 100px 100px;
				animation: peas 1s infinite;
			}
			
			@keyframes peas {
				0% {
					/* 盒子-阴影 水平方向 垂直方向 模糊半径 阴影扩展（变大变小） 颜色 */
					box-shadow: 
					300px 0px 0px -80px #18642b, 
					450px 0px 0px -80px #18642b, 
					600px 0px 0px -80px #18642b, 
					750px 0px 0px -80px #18642b;
				}
				100% {
					/*通过box-shadow属性来画小圆*/
					box-shadow: 
					150px 0px 0px -80px #18642b, 
					300px 0px 0px -80px #18642b, 
					450px 0px 0px -80px #18642b, 
					600px 0px 0px -80px #18642b;
				}
			}
			
			.top,
			.bottom {
				width: 200px;
				height: 100px;
				margin-left: 150px;
				background-color: #ffc800;
			}
			
			.top {
				border-radius: 100px 100px 0 0;
				/*通过该属性绑定之前定义好的动画 动画名称 时间 循环*/
				animation: mouthTop 1s infinite;
			}
			
			.bottom {
				border-radius: 0 0 100px 100px;
				animation: mouthBottom 1s infinite;
			}
			
			@keyframes mouthTop {
				/*mouthTop是动画的名称*/
				0% {
					transform: rotate(0deg);
				}
				50% {
					transform: rotate(-30deg);
				}
				100% {
					transform: rotate(0deg);
				}
			}
			
			@keyframes mouthBottom {
				0% {
					transform: rotate(0deg);
				}
				50% {
					transform: rotate(30deg);
					/*通过transform属性来旋转*/
				}
				100% {
					transform: rotate(0deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="mouth">
			<div class="top"></div>
			<!--上嘴唇-->
			<div class="bottom"></div>
			<!--下嘴唇-->
		</div>
	</body>

</html>

懒羊羊♛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
吃豆豆HTML+CSS

<!doctype html><html> <head> <meta charset="utf-8"> <title>吃豆豆</title> <style> body { margin: 0; background-color: #a79066; } .mouth { width: 200px; height: 200px; /*margin
复制链接

扫一扫