这篇博客介绍了如何使用CSS3创建一个飞机在弧形跑道上飞行的动画效果。通过设置渐变背景、边框半径、动画关键帧等属性，实现了飞机从起点到终点的平滑飞行，同时飞机的阴影也随着飞行方向变化，增加了视觉效果。
CSS
语言：
CSSSCSS
确定
@import url(http://fonts.googleapis.com/css?family=Lobster);
@-webkit-keyframes fly {
to {
transform: rotate(180deg);
}
}
@-webkit-keyframes shadow {
from {
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
to {
text-shadow: 4px 0 0 rgba(0, 0, 0, 0.2);
}
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: linear-gradient(#444, #333);
}
#loader {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 220px;
margin: -110px 0 0 -200px;
background: linear-gradient(skyblue, steelblue);
border-radius: 8px;
text-align: center;
color: white;
overflow: hidden;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
#loader:before {
content: '';
position: absolute;
top: 20px;
right: 20px;
bottom: -180px;
left: 20px;
border-radius: 50%;
border: 1.8px dashed rgba(255, 255, 255, 0.75);
}
#plane {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
font-size: 44px;
transform-origin: 200px 20px;
-webkit-animation: fly 5s infinite linear;
}
#plane i {
margin: 4px 0 0 2px;
transform: rotate(-45deg);
-webkit-animation: shadow 5s infinite linear;
}
#loader p {
margin-top: 120px;
line-height: 32px;
font-family: 'Lobster', sans-serif;
font-size: 72px;
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
扫一扫
1515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
