css动态飞飞荷包蛋

图片预览

html布局

<div class="egg">

		<div class="liu">

			<div class="l"></div>
			<div class="liu-l"></div>

			<div class="l"></div>
			<div class="liu-l"></div>

			<div class="l"></div>
			<div class="liu-l"></div>

			<div class="l"></div>

		</div>



		<div class="dan">
			<div class="huang">

				<div class="g1"></div>
				<div class="g2"></div>

				<div class="yan">
					<div class="yanj"></div>
					<div class="yanj"></div>
				</div>

				<div class="sai">
					<div class="s1"></div>
					<div class="s1"></div>
				</div>

				<div class="zui"></div>

			</div>
		</div>

	</div>

	<div class="starts">

		<span class="start"></span>
		<span class="start"></span>
		<span class="start"></span>
		<span class="start"></span>
		<span class="start"></span>
		<span class="start"></span>
		<span class="start"></span>


	</div>

css样式实现

		body {
			background-color: black;
			height: 100%;
			overflow: hidden;
		}

		.egg {
			display: flex;
			position: absolute;
			left: calc(50% - 144px);
			/* 居中.50%-这个容器宽的一半 */
			top: calc(50% - 90px);
			/* 同上,减去高的一半 */

			animation: fly 2.5s infinite;

			z-index: 9;
		}

		.dan {
			background-color: white;
			width: 200px;
			height: 180px;
			position: relative;
			/* 相对定位 */

			/* 圆角边框border-radius.值为50%,则为正圆. */

			border-top-right-radius: 100px;
			border-bottom-right-radius: 100px;

			box-shadow: 0px 0px 15px white;
		}

		.huang {
			background-color: gold;
			width: 150px;
			height: 150px;
			border-radius: 50%;

			position: absolute;
			/* 绝对定位 */
			top: 15px;
			right: 15px;

			box-shadow: inset 10px 1px #ffcc24;
			/* box-shadow向框添加一个或者多个阴影
				box-shadow: h-shadow(*水平位置) v-shadow(*垂直位置) blur(模糊距离) 
							spead(阴影尺寸) color(颜色) inset(内部阴影[outset 默认 外部阴影]); */
		}

		.g1 {
			background-color: white;
			width: 8px;
			height: 8px;
			border-radius: 50%;

			position: absolute;
			top: 10px;
			right: 38px;

		}

		.g2 {
			background-color: white;
			width: 8px;
			height: 12px;
			border-radius: 5px;

			position: absolute;
			top: 18px;
			right: 28px;

			transform: rotate(-40deg);
			/* 用于元素2·3d转化.允许将元素旋转·缩放·移动·倾斜
				rotate: 角度; 2d旋转 */

		}

		.yan {
			display: flex;
			/* 下方需要.定义为弹性盒子 */
			justify-content: space-between;
			/* justify-content 设置弹性盒子在主轴(横轴)方向上的对齐方向
				flex-  start默认,容器开头 end结尾
				center容器中心
				space-  around位于各行之间,之前,之后都留有空白的容器
						between位于各行之间留有空白的容器 */
			position: absolute;
			top: 50px;
			right: 35px;
			width: 80px;
			/* 容器宽度,设置了时候才会有空白 */

		}

		.yanj {
			background-color: black;
			width: 15px;
			height: 15px;
			border-radius: 50%;

			animation: zyan 2.5s infinite;
			/* 添加动画,并设置时间和属性 */
		}

		.sai {
			display: flex;
			/* 下方需要.定义为弹性盒子 */
			justify-content: space-between;
			width: 100px;
			position: absolute;
			top: 65px;
			right: 26px;
		}

		.s1 {
			background-color: hotpink;
			width: 15px;
			height: 10px;
			border-radius: 9px;
		}


		.zui {
			width: 15px;
			height: 15px;
			border-radius: 50%;

			position: absolute;
			top: 65px;
			right: 65px;

			border-bottom: 5px solid #000000;
			/* 设置下边框样式 border-bottom: width style color; */
		}


		.liu {
			display: flex;
			flex-direction: column;
			/* 						 */
			justify-content: space-between;
			align-items: flex-end;

			height: 180px;
			width: 100px;

			margin-right: -12px;
		}

		.l {
			background-color: #FFFFFF;
			width: 100px;
			height: 24px;

			border-top-left-radius: 25px;
			border-bottom-left-radius: 25px;

			position: relative;

		}

		.l:nth-child(1)

		/* 动画 */
			{
			animation: ldong 1s .3s infinite;
			/* 名字 时间 延迟 属性(永久) */
		}

		.l:nth-child(1)::before {
			animation: ldan 1s .6s infinite;
		}

		.l:nth-child(3) {
			animation: ldong 1s .7s infinite;
		}

		.l:nth-child(3)::before {
			animation: ldan 1s .7s infinite;
		}

		.l:nth-child(5) {
			animation: ldong 1s .1s infinite;
		}

		.l:nth-child(5)::before {
			animation: ldan 1s .1s infinite;
		}

		.l:nth-child(7) {
			animation: ldong 1s .9s infinite;
		}

		.l:nth-child(7)::before {
			animation: ldan 1s .9s infinite;
		}

		.l::before

		/* 伪类,小圆球 */
			{
			content: "";
			position: absolute;
			left: -40px;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background-color: white;
			/* animation: ldan 0.6s infinite; */
		}


		.liu-l {
			height: 29px;
			width: 30px;
			border-radius: 25px;
			background-color: black;

			z-index: 999;
			/* 层级关系 */
		}


		.start {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: linear-gradient(to left, #48098b, #00baee);

			display: inline-block;

			position: absolute;
			top: 50px;
			left: 100%;

			animation: xing 1.5s infinite;

			z-index: 5;

		}

		.start:nth-child(2) {
			width: 30px;
			height: 2px;
			border-radius: 50%;
			background: linear-gradient(to left, #48098b, #00baee);

			display: inline-block;

			position: absolute;
			top: 100px;
			left: 100%;

			animation: xing .5s .6s infinite;

		}

		.start:nth-child(3) {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background: linear-gradient(to left, #48098b, #00baee);

			display: inline-block;

			position: absolute;
			top: 500px;
			left: 100%;

			animation: xing 1.5s .9s infinite;

		}

		.start:nth-child(4) {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: linear-gradient(to left, #48098b, #00baee);

			display: inline-block;

			position: absolute;
			top: 200px;
			left: 100%;

			animation: xing 1s .3s infinite;

		}

		.start:nth-child(5) {
			width: 40px;
			height: 2px;
			border-radius: 50%;
			background: linear-gradient(to left, #48098b, #00baee);

			display: inline-block;

			position: absolute;
			top: 550px;
			left: 100%;

			animation: xing .5s .2s infinite;

		}

		.start:nth-child(6) {
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background: linear-gradient(to left, #48098b, #00baee);

			display: inline-block;

			position: absolute;
			top: 400px;
			left: 100%;

			animation: xing .5s .4s infinite;

		}

		.start:nth-child(7) {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: linear-gradient(to left, #48098b, #00baee);

			display: inline-block;

			position: absolute;
			top: 300px;
			left: 100%;

			animation: xing .5s .7s infinite;

		}




		/* //动画 */

		@keyframes zyan

		/* 眨眼 */
			{
			0% {
				transform: scaleY(1);
			}

			40% {
				transform: scaleY(1);
			}

			50% {
				transform: scaleY(0);
			}

			60% {
				transform: scaleY(1);
			}

			100% {
				transform: scaleY(1);
			}
		}

		@keyframes ldong {

			/* 流动 */
			0% {
				transform: translateX(0);
			}

			50% {
				transform: translateX(60px);
			}

			100% {
				transform: translateX(0px);
			}
		}

		@keyframes ldan {

			/* 颜色变淡 */
			0% {
				opacity: 0;
			}

			50% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes fly {

			/* 飞天荷包蛋 */
			0% {
				transform: translateX(0px);
			}

			50% {
				transform: translateX(200px);
			}

			100% {
				transform: translateX(0px);
			}
		}

		@keyframes xing {

			/* 星星 */
			0% {
				left: 100%;
			}

			100% {
				left: -200px;
			}
		}