文章正文
纯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，若离线请留言！
热门阅读
-
Bernstein多项式与Bezier曲面 佩捷，吴雨宸编著 哈尔滨：哈尔滨工业大学出版社 PDF 9787560355740 出版时间:2016.pdf
Bernstein多项式与Bezier曲面 佩捷，吴雨宸编著 哈尔滨：哈尔滨工业大学出版社 PDF 9787560355740 出版时间:2016.pdf ...
-
伯恩斯坦多项式与贝齐尔曲面 从一道全国高中数学联赛试题谈起 佩捷，施雨辰编著 哈尔滨：哈尔滨工业大学出版社 PDF 9787560340012 2013.pdf
伯恩斯坦多项式与贝齐尔曲面 从一道全国高中数学联赛试题谈起 佩捷，施雨辰编著 哈尔滨：哈尔滨工业大学出版社 PDF 9787560340012 2013.pdf ...
-
中国宗教通史 上下 牟钟鉴、张践 北京：社会科学文献出版社 PDF 9787801490800 出版时间：2000.pdf
中国宗教通史 上下 牟钟鉴、张践 北京：社会科学文献出版社 PDF 9787801490800 出版时间：2000.pdf ...
-
美国地图册 李绍明，周敏编 北京：中国地图出版社 PDF 9787503120835 出版时间：1998.pdf
美国地图册 李绍明，周敏编 北京：中国地图出版社 PDF 9787503120835 出版时间：1998.pdf ...
-
心灵与自然 应然的合一 北京师范大学出版社 (英)格雷戈里·贝特森(Gregory Bateson) 9787303247585 PDF_出版时间:2019年10月.pdf
心灵与自然 应然的合一 北京师范大学出版社 (英)格雷戈里·贝特森(Gregory Bateson) 9787303247585 PDF_出版时间:2019年10月.pdf ...
-
高等代数简明教程 上下 (第3版) 北京大学出版社 蓝以中 PDF 9787301342237 出版时间:2023年08月.pdf
高等代数简明教程 上下 (第3版) 北京大学出版社 蓝以中 PDF 9787301342237 出版时间:2023年08月.pdf ...
-
高等代数简明教程 上下 第2版 蓝以中著 北京大学出版社 9787301053706 PDF_出版时间:2007年07月.pdf
高等代数简明教程 上下 第2版 蓝以中著 北京大学出版社 9787301053706 PDF_出版时间:2007年07月.pdf ...
-
全日制普通高级中学 生物 第1册 教师教学用书 试验修订本·必修 人民教育出版社生物自然室编 北京：人民教育出版社 PDF 7107135589 出版时间:2000.pdf
全日制普通高级中学 生物 第1册 教师教学用书 试验修订本·必修 人民教育出版社生物自然室编 北京：人民教育出版社 PDF 7107135589 出版时间:2000.pdf ...
-
中医抗癌临证新识 王三虎著 北京：人民卫生出版社 PDF 9787117106870 出版时间:2009.pdf
中医抗癌临证新识 王三虎著 北京：人民卫生出版社 PDF 9787117106870 出版时间:2009.pdf ...
-
中医抗癌临证新识(第3版) 王三虎 人民卫生 PDF 9787117332194 出版时间:2023年12月.pdf
中医抗癌临证新识(第3版) 王三虎 人民卫生 PDF 9787117332194 出版时间:2023年12月.pdf ...
找PDF电子书，太费时间?
- 微信扫描二维码，让客服快速查找。
在线客服8:30-22:00，若离线请留言！
