文章正文
纯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 9787115370891 出版时间:2015.pdf
不只是美 信息图表设计原理与经典案例 （美）开罗著；罗辉，李丽华 北京：人民邮电出版社 PDF 9787115370891 出版时间:2015.pdf ...
-
北京大学宗教学文库 神圣的家 在中西文明的比较视野下 吴飞主编 北京：宗教文化出版社 PDF 9787802548633 2014.pdf
北京大学宗教学文库 神圣的家 在中西文明的比较视野下 吴飞主编 北京：宗教文化出版社 PDF 9787802548633 2014.pdf ...
-
考工记营国制度研究 贺业钜著 北京：中国建筑工业出版社 PDF 9787150404700 出版时间：1985.pdf
考工记营国制度研究 贺业钜著 北京：中国建筑工业出版社 PDF 9787150404700 出版时间：1985.pdf ...
-
全彩图解电子工程师入门手册 张兴伟编著 北京：电子工业出版社 PDF 9787121303582 出版时间:2017.pdf
全彩图解电子工程师入门手册 张兴伟编著 北京：电子工业出版社 PDF 9787121303582 出版时间:2017.pdf ...
-
西方经济学 第2版 上下 《西方经济学》编写组 北京：高等教育出版社 PDF 9787040526417 出版时间:2020.pdf
西方经济学 第2版 上下 《西方经济学》编写组 北京：高等教育出版社 PDF 9787040526417 出版时间:2020.pdf ...
-
中国创世神话形态研究 向柏松著 北京：中国社会科学出版社 PDF 9787520308007 2017.pdf
中国创世神话形态研究 向柏松著 北京：中国社会科学出版社 PDF 9787520308007 2017.pdf ...
-
微电子电路 上下 第5版 （加）ADEL S.SEDRA KENNETH C.SMITH 北京：电子工业出版社 PDF 7121026716 2006.pdf
微电子电路 上下 第5版 （加）ADEL S.SEDRA KENNETH C.SMITH 北京：电子工业出版社 PDF 7121026716 2006.pdf ...
-
东北亚的萨满教 韩中日俄蒙萨满教比较研究 色音著 北京：中国社会科学出版社 PDF 7500421931 1998.pdf
东北亚的萨满教 韩中日俄蒙萨满教比较研究 色音著 北京：中国社会科学出版社 PDF 7500421931 1998.pdf ...
-
精通电子学 电路剖析、设计与创新 （美）罗纳德·泉著；张东辉等译 北京：机械工业出版社 PDF 9787111592860 2018.pdf
精通电子学 电路剖析、设计与创新 （美）罗纳德·泉著；张东辉等译 北京：机械工业出版社 PDF 9787111592860 2018.pdf ...
-
各国股票市场比较研究 郑振龙 PDF 9787800872488 中国发展出版社 出版时间：1996-01.pdf
各国股票市场比较研究 郑振龙 PDF 9787800872488 中国发展出版社 出版时间：1996-01.pdf ...
找PDF电子书，太费时间?
- 微信扫描二维码，让客服快速查找。
在线客服8:30-22:00，若离线请留言！
