文章正文
纯css飞鸟过渡页
【文章】2020-04-23
简介纯css飞鸟过渡页
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>页面加载中...</title>
<style type="text/css">
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(-122px, -30px, -86px) rotateY(90deg);
transform: translate3d(-122px, -30px, -86px) rotateY(90deg);
}
#sky .bird .wind:nth-child(1)::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba(100, 200, 126, 0.3);
border-radius: 999px;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-animation: wind 1236ms 2599ms linear infinite;
animation: wind 1236ms 2599ms linear infinite;
}
#sky .bird .wind:nth-child(2) {
-webkit-transform: translate3d(32px, -121px, -34px) rotateY(90deg);
transform: translate3d(32px, -121px, -34px) rotateY(90deg);
}
#sky .bird .wind:nth-child(2)::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba(100, 200, 70, 0.3);
border-radius: 999px;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-animation: wind 2177ms 1587ms linear infinite;
animation: wind 2177ms 1587ms linear infinite;
}
#sky .bird .wind:nth-child(3) {
-webkit-transform: translate3d(138px, -74px, -87px) rotateY(90deg);
transform: translate3d(138px, -74px, -87px) rotateY(90deg);
}
#sky .bird .wind:nth-child(3)::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba(100, 200, 39, 0.3);
border-radius: 999px;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-animation: wind 1678ms 4564ms linear infinite;
animation: wind 1678ms 4564ms linear infinite;
}
#sky .bird .wind:nth-child(4) {
-webkit-transform: translate3d(85px, 120px, -30px) rotateY(90deg);
transform: translate3d(85px, 120px, -30px) rotateY(90deg);
}
#sky .bird .wind:nth-child(4)::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba(100, 200, 175, 0.3);
border-radius: 999px;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-animation: wind 2543ms 2190ms linear infinite;
animation: wind 2543ms 2190ms linear infinite;
}
#sky .bird .wind:nth-child(5) {
-webkit-transform: translate3d(-164px, 50px, 80px) rotateY(90deg);
transform: translate3d(-164px, 50px, 80px) rotateY(90deg);
}
#sky .bird .wind:nth-child(5)::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba(100, 200, 135, 0.3);
border-radius: 999px;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-animation: wind 2320ms 1941ms linear infinite;
animation: wind 2320ms 1941ms linear infinite;
}
#sky .bird .wind:nth-child(6) {
-webkit-transform: translate3d(-128px, -33px, -46px) rotateY(90deg);
transform: translate3d(-128px, -33px, -46px) rotateY(90deg);
}
#sky .bird .wind:nth-child(6)::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba(100, 200, 136, 0.3);
border-radius: 999px;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-animation: wind 2906ms 2276ms linear infinite;
animation: wind 2906ms 2276ms linear infinite;
}
#sky .bird .wind:nth-child(7) {
-webkit-transform: translate3d(188px, -79px, -86px) rotateY(90deg);
transform: translate3d(188px, -79px, -86px) rotateY(90deg);
}
#sky .bird .wind:nth-child(7)::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba(100, 200, 24, 0.3);
border-radius: 999px;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-animation: wind 1960ms 1181ms linear infinite;
animation: wind 1960ms 1181ms linear infinite;
}
#sky .bird .wind:nth-child(8) {
-webkit-transform: translate3d(7px, -72px, -3px) rotateY(90deg);
transform: translate3d(7px, -72px, -3px) rotateY(90deg);
}
#sky .bird .wind:nth-child(8)::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba(100, 200, 165, 0.3);
border-radius: 999px;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-animation: wind 1514ms 2132ms linear infinite;
animation: wind 1514ms 2132ms linear infinite;
}
#sky .bird .wind:nth-child(9) {
-webkit-transform: translate3d(48px, 29px, -22px) rotateY(90deg);
transform: translate3d(48px, 29px, -22px) rotateY(90deg);
}
#sky .bird .wind:nth-child(9)::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba(100, 200, 102, 0.3);
border-radius: 999px;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-animation: wind 2159ms 4594ms linear infinite;
animation: wind 2159ms 4594ms linear infinite;
}
#sky .bird .wind:nth-child(10) {
-webkit-transform: translate3d(67px, 98px, -65px) rotateY(90deg);
transform: translate3d(67px, 98px, -65px) rotateY(90deg);
}
#sky .bird .wind:nth-child(10)::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba(100, 200, 177, 0.3);
border-radius: 999px;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-animation: wind 1345ms 3194ms linear infinite;
animation: wind 1345ms 3194ms linear infinite;
}
#sky .bird .wind:nth-child(11) {
-webkit-transform: translate3d(158px, 133px, 6px) rotateY(90deg);
transform: translate3d(158px, 133px, 6px) rotateY(90deg);
}
#sky .bird .wind:nth-child(11)::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba(100, 200, 181, 0.3);
border-radius: 999px;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-animation: wind 1130ms 2202ms linear infinite;
animation: wind 1130ms 2202ms linear infinite;
}
#sky .bird_body {
position: relative;
width: 30px;
height: 40px;
background: #bbafe6;
}
#sky .bird_head {
position: absolute;
top: -30px;
border-right: 15px solid transparent;
border-bottom: 30px solid #c4a4e5;
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 #8997f5;
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 #b670ec;
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 #b8a0f4;
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 #ac96f1;
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 #7471cf;
-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 #6cbed9;
-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>
</html>
打赏支持
感谢您的支持，加油!
打开微信扫码打赏，你说多少就多少
找书费时，联系客服快速获取!
在线客服8:30-22:30，若离线请留言！
获取教程，请联系在线客服!
在线客服8:30-22:30，若离线请留言！
热门阅读
-
新媒体装置艺术 马晓翔著 南京：南京大学出版社 PDF 9787305122484 2013.pdf
新媒体装置艺术 马晓翔著 南京：南京大学出版社 PDF 9787305122484 2013.pdf ...
-
装置艺术 顾丞峰，贺万里著 长沙：湖南美术出版社 PDF 7535618561 2003.pdf
装置艺术 顾丞峰，贺万里著 长沙：湖南美术出版社 PDF 7535618561 2003.pdf ...
-
中国当代装置艺术史 1979-2005 贺万里著 上海：上海书画出版社 PDF 9787807257554 2008.pdf
中国当代装置艺术史 1979-2005 贺万里著 上海：上海书画出版社 PDF 9787807257554 2008.pdf ...
-
公共装置艺术设计 金彦秀，严赫镕，金百洋主编 上海：东华大学出版社 PDF 7566911031 2017.pdf
公共装置艺术设计 金彦秀，严赫镕，金百洋主编 上海：东华大学出版社 PDF 7566911031 2017.pdf ...
-
装置艺术 徐淦著 北京：人民美术出版社 PDF 7102026692 2003.pdf
装置艺术 徐淦著 北京：人民美术出版社 PDF 7102026692 2003.pdf ...
-
非线性连续介质力学基础 匡震邦著 西安：西安交通大学出版社 PDF 7560500242 1989.pdf
非线性连续介质力学基础 匡震邦著 西安：西安交通大学出版社 PDF 7560500242 1989.pdf ...
-
连续介质力学基础 第2版 黄筑平著 北京：高等教育出版社 PDF 9787040343083 2012.pdf
连续介质力学基础 第2版 黄筑平著 北京：高等教育出版社 PDF 9787040343083 2012.pdf ...
-
工商管理经典译丛战略过程 概念情境案例（第4版） [加拿大]亨利·明茨 中国人民大学出版社 9787300163314 PDF_出版时间:2012年09月.pdf
工商管理经典译丛战略过程 概念情境案例（第4版） [加拿大]亨利·明茨 中国人民大学出版社 9787300163314 PDF_出版时间:2012年09月.pdf ...
-
图解原油期货 300张图说清原油期货 闫建涛等著 北京：石油工业出版社 PDF 9787518326198 出版时间:2018.pdf
图解原油期货 300张图说清原油期货 闫建涛等著 北京：石油工业出版社 PDF 9787518326198 出版时间:2018.pdf ...
-
卓有绩效(给管理者的绩效改进实用建议) 段敏静 著 中信出版社 PDF 9787521720174 出版时间:2020年08月.pdf
卓有绩效(给管理者的绩效改进实用建议) 段敏静 著 中信出版社 PDF 9787521720174 出版时间:2020年08月.pdf ...
找PDF电子书，太费时间?
- 微信扫描二维码，让客服快速查找。
在线客服8:30-22:00，若离线请留言！
