纯Css实例---飞鸽

其他 2019-04-03 23:49:06 阅读次数: 0 
<!DOCTYPE html>
<html lang="en" id="html">
	<head>
		<meta charset="UTF-8">
		<title>飞鸽</title>
		<style>
			body {
				background: #eef;
				height: 100vh;
				overflow: hidden;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
			}

			#sky {
				margin-top: -60px;
				-webkit-perspective: 400px;
				perspective: 400px;
				-webkit-filter: drop-shadow(0px 150px 10px rgba(0, 0, 0, 0.2));
				filter: drop-shadow(0px 150px 10px rgba(0, 0, 0, 0.2));
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}

			#sky div {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}

			#sky .bird {
				-webkit-animation: fly 10000ms linear infinite;
				animation: fly 10000ms linear infinite;
			}

			#sky .bird .wind {
				position: absolute;
				left: 50%;
				width: 4px;
				height: 200px;
				margin-left: -2px;
				border-radius: 999px;
				overflow: hidden;
			}

			#sky .bird .wind:nth-child(1) {
				-webkit-transform: translate3d(-157px, 138px, -68px) rotateY(90deg);
				transform: translate3d(-157px, 138px, -68px) rotateY(90deg);
			}

			#sky .bird .wind:nth-child(1)::before {
				content: '';
				position: absolute;
				width: 4px;
				height: 300px;
				background: rgba(100, 200, 90, 0.3);
				border-radius: 999px;
				-webkit-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-animation: wind 1935ms 1233ms linear infinite;
				animation: wind 1935ms 1233ms linear infinite;
			}

			#sky .bird .wind:nth-child(2) {
				-webkit-transform: translate3d(98px, 75px, 2px) rotateY(90deg);
				transform: translate3d(98px, 75px, 2px) rotateY(90deg);
			}

			#sky .bird .wind:nth-child(2)::before {
				content: '';
				position: absolute;
				width: 4px;
				height: 300px;
				background: rgba(100, 200, 92, 0.3);
				border-radius: 999px;
				-webkit-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-animation: wind 1048ms 4242ms linear infinite;
				animation: wind 1048ms 4242ms linear infinite;
			}

			#sky .bird .wind:nth-child(3) {
				-webkit-transform: translate3d(181px, 103px, 66px) rotateY(90deg);
				transform: translate3d(181px, 103px, 66px) rotateY(90deg);
			}

			#sky .bird .wind:nth-child(3)::before {
				content: '';
				position: absolute;
				width: 4px;
				height: 300px;
				background: rgba(100, 200, 174, 0.3);
				border-radius: 999px;
				-webkit-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-animation: wind 1577ms 4135ms linear infinite;
				animation: wind 1577ms 4135ms linear infinite;
			}

			#sky .bird .wind:nth-child(4) {
				-webkit-transform: translate3d(171px, -100px, 100px) rotateY(90deg);
				transform: translate3d(171px, -100px, 100px) rotateY(90deg);
			}

			#sky .bird .wind:nth-child(4)::before {
				content: '';
				position: absolute;
				width: 4px;
				height: 300px;
				background: rgba(100, 200, 209, 0.3);
				border-radius: 999px;
				-webkit-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-animation: wind 1176ms 3610ms linear infinite;
				animation: wind 1176ms 3610ms linear infinite;
			}

			#sky .bird .wind:nth-child(5) {
				-webkit-transform: translate3d(155px, -139px, 45px) rotateY(90deg);
				transform: translate3d(155px, -139px, 45px) rotateY(90deg);
			}

			#sky .bird .wind:nth-child(5)::before {
				content: '';
				position: absolute;
				width: 4px;
				height: 300px;
				background: rgba(100, 200, 168, 0.3);
				border-radius: 999px;
				-webkit-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-animation: wind 1154ms 1412ms linear infinite;
				animation: wind 1154ms 1412ms linear infinite;
			}

			#sky .bird .wind:nth-child(6) {
				-webkit-transform: translate3d(61px, 33px, 72px) rotateY(90deg);
				transform: translate3d(61px, 33px, 72px) rotateY(90deg);
			}

			#sky .bird .wind:nth-child(6)::before {
				content: '';
				position: absolute;
				width: 4px;
				height: 300px;
				background: rgba(100, 200, 242, 0.3);
				border-radius: 999px;
				-webkit-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-animation: wind 2079ms 4956ms linear infinite;
				animation: wind 2079ms 4956ms linear infinite;
			}

			#sky .bird .wind:nth-child(7) {
				-webkit-transform: translate3d(-61px, 37px, 43px) rotateY(90deg);
				transform: translate3d(-61px, 37px, 43px) rotateY(90deg);
			}

			#sky .bird .wind:nth-child(7)::before {
				content: '';
				position: absolute;
				width: 4px;
				height: 300px;
				background: rgba(100, 200, 195, 0.3);
				border-radius: 999px;
				-webkit-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-animation: wind 2506ms 2873ms linear infinite;
				animation: wind 2506ms 2873ms linear infinite;
			}

			#sky .bird .wind:nth-child(8) {
				-webkit-transform: translate3d(-100px, 16px, 70px) rotateY(90deg);
				transform: translate3d(-100px, 16px, 70px) rotateY(90deg);
			}

			#sky .bird .wind:nth-child(8)::before {
				content: '';
				position: absolute;
				width: 4px;
				height: 300px;
				background: rgba(100, 200, 66, 0.3);
				border-radius: 999px;
				-webkit-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-animation: wind 1962ms 1394ms linear infinite;
				animation: wind 1962ms 1394ms linear infinite;
			}

			#sky .bird .wind:nth-child(9) {
				-webkit-transform: translate3d(114px, 26px, -30px) rotateY(90deg);
				transform: translate3d(114px, 26px, -30px) rotateY(90deg);
			}

			#sky .bird .wind:nth-child(9)::before {
				content: '';
				position: absolute;
				width: 4px;
				height: 300px;
				background: rgba(100, 200, 30, 0.3);
				border-radius: 999px;
				-webkit-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-animation: wind 2489ms 2975ms linear infinite;
				animation: wind 2489ms 2975ms linear infinite;
			}

			#sky .bird .wind:nth-child(10) {
				-webkit-transform: translate3d(-57px, -48px, 33px) rotateY(90deg);
				transform: translate3d(-57px, -48px, 33px) rotateY(90deg);
			}

			#sky .bird .wind:nth-child(10)::before {
				content: '';
				position: absolute;
				width: 4px;
				height: 300px;
				background: rgba(100, 200, 124, 0.3);
				border-radius: 999px;
				-webkit-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-animation: wind 2309ms 3147ms linear infinite;
				animation: wind 2309ms 3147ms linear infinite;
			}

			#sky .bird .wind:nth-child(11) {
				-webkit-transform: translate3d(139px, 107px, 24px) rotateY(90deg);
				transform: translate3d(139px, 107px, 24px) rotateY(90deg);
			}

			#sky .bird .wind:nth-child(11)::before {
				content: '';
				position: absolute;
				width: 4px;
				height: 300px;
				background: rgba(100, 200, 200, 0.3);
				border-radius: 999px;
				-webkit-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-animation: wind 1365ms 2503ms linear infinite;
				animation: wind 1365ms 2503ms linear infinite;
			}

			#sky .bird_body {
				position: relative;
				width: 30px;
				height: 40px;
				background: #a7b1d5;
			}

			#sky .bird_head {
				position: absolute;
				top: -30px;
				border-right: 15px solid transparent;
				border-bottom: 30px solid #779dcc;
				border-left: 15px solid transparent;
				-webkit-transform-origin: 50% 100%;
				transform-origin: 50% 100%;
				-webkit-transform: rotateX(-20deg);
				transform: rotateX(-20deg);
			}

			#sky .bird_wing_left {
				position: absolute;
				left: -30px;
				height: 30px;
				border-right: 30px solid #a297ff;
				border-bottom: 10px solid transparent;
				-webkit-transform-origin: 100% 0;
				transform-origin: 100% 0;
				-webkit-animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
				animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
			}

			#sky .bird_wing_left_top {
				position: absolute;
				left: -30px;
				border-right: 30px solid #9296de;
				border-bottom: 30px solid transparent;
				-webkit-transform-origin: 100% 0;
				transform-origin: 100% 0;
				-webkit-animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
				animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
			}

			#sky .bird_wing_right {
				position: absolute;
				left: 30px;
				height: 30px;
				border-left: 30px solid #8399e6;
				border-bottom: 10px solid transparent;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				-webkit-animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
				animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
			}

			#sky .bird_wing_right_top {
				position: absolute;
				border-left: 30px solid #bc73e1;
				border-bottom: 30px solid transparent;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				-webkit-animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
				animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
			}

			#sky .bird_tail_left {
				position: absolute;
				top: 40px;
				border-right: 30px solid transparent;
				border-top: 40px solid #c279f7;
				-webkit-transform-origin: 50% 0;
				transform-origin: 50% 0;
				-webkit-transform: rotateX(-20deg);
				transform: rotateX(-20deg);
			}

			#sky .bird_tail_right {
				position: absolute;
				top: 40px;
				border-left: 30px solid transparent;
				border-top: 40px solid #ae79db;
				-webkit-transform-origin: 50% 0;
				transform-origin: 50% 0;
				-webkit-transform: rotateX(-20deg);
				transform: rotateX(-20deg);
			}

			@-webkit-keyframes fly {
				0% {
					-webkit-transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
					transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
				}

				100% {
					-webkit-transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
					transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
				}
			}

			@keyframes fly {
				0% {
					-webkit-transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
					transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
				}

				100% {
					-webkit-transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
					transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
				}
			}

			@-webkit-keyframes wingLeft {
				0% {
					-webkit-transform: rotateY(-40deg);
					transform: rotateY(-40deg);
				}

				100% {
					-webkit-transform: rotateY(40deg);
					transform: rotateY(40deg);
				}
			}

			@keyframes wingLeft {
				0% {
					-webkit-transform: rotateY(-40deg);
					transform: rotateY(-40deg);
				}

				100% {
					-webkit-transform: rotateY(40deg);
					transform: rotateY(40deg);
				}
			}

			@-webkit-keyframes wingRight {
				0% {
					-webkit-transform: rotateY(40deg);
					transform: rotateY(40deg);
				}

				100% {
					-webkit-transform: rotateY(-40deg);
					transform: rotateY(-40deg);
				}
			}

			@keyframes wingRight {
				0% {
					-webkit-transform: rotateY(40deg);
					transform: rotateY(40deg);
				}

				100% {
					-webkit-transform: rotateY(-40deg);
					transform: rotateY(-40deg);
				}
			}

			@-webkit-keyframes wind {
				0% {
					-webkit-transform: translateY(-300px);
					transform: translateY(-300px);
				}

				100% {
					-webkit-transform: translateY(200px);
					transform: translateY(200px);
				}
			}

			@keyframes wind {
				0% {
					-webkit-transform: translateY(-300px);
					transform: translateY(-300px);
				}

				100% {
					-webkit-transform: translateY(200px);
					transform: translateY(200px);
				}
			}
		</style>
	</head>
	<body>
		<div id="sky">
			<div class="bird">
				<div class="wind"></div>
				<div class="wind"></div>
				<div class="wind"></div>
				<div class="wind"></div>
				<div class="wind"></div>
				<div class="wind"></div>
				<div class="wind"></div>
				<div class="wind"></div>
				<div class="wind"></div>
				<div class="wind"></div>
				<div class="bird_body">
					<div class="bird_head"></div>
					<div class="bird_wing_left">
						<div class="bird_wing_left_top"></div>
					</div>
					<div class="bird_wing_right">
						<div class="bird_wing_right_top"></div>
					</div>
					<div class="bird_tail_left"></div>
					<div class="bird_tail_right"></div>
				</div>
			</div>
		</div>
	</body>
	<script>

	</script>
</html>

在这里插入图片描述
自己做得一点小东西，本来想就自己看看的，但是今天才发现，无论好坏，本就应该互相学习，小生在这里致歉了。。。

菜鸟爬行中…

猜你喜欢

转载自blog.csdn.net/h1234561234561/article/details/88045587
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022