html+css小练习1-吃豆豆

最新推荐文章于 2022-08-19 15:17:40 发布

ronghua_yang

最新推荐文章于 2022-08-19 15:17:40 发布

阅读量296

点赞数

分类专栏： css练习

本文链接：https://blog.csdn.net/qq_43327962/article/details/104797597

版权

css练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html+css小练习1-吃豆豆

index.html+css效果如下：

<!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>

ronghua_yang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+css小练习1-吃豆豆

html+css小练习1-吃豆豆index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>吃豆豆</title> <style> body { margin: 0; background-...
复制链接

扫一扫