css画流星,css整理代码格式

模仿之家css，nginx css不生效，css 表格垂直文字间距，css3 动画打钩，input按钮颜色css3，css的边框半透明颜色，css整理代码格式

.meteor {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid white;
border-bottom: 50px solid transparent;
transform: skew(-30deg);
animation: meteor-shoot 2s ease-in-out infinite;
}
@keyframes meteor-shoot {
0% {
transform: translateX(0) translateY(0);
opacity: 1;
}
50% {
transform: translateX(200px) translateY(-200px);
opacity: 0.5;
}
100% {
transform: translateX(400px) translateY(0);
opacity: 0;
}
}

上面的代码将会画出一个白色的三角形，通过旋转和动画的运动，让它看上去像是一个闪烁的流星。

首先大家定义了一个.meteor的CSS类。大家将这个形状设置成一个三角形，利用border属性，将其分成三个三角形，中间的为白色，两侧的透明。接着大家使用了transform: skew(-30deg)，让这个三角形倾斜，变成流星的形状。

接着大家定义了一个keyframe的动画，让流星沿着一个斜线运动。大家开始时让它在原点，然后逐渐向右上方移动，直到运动到远离屏幕的地方。同时大家将它的透明度也随着运动而变化，变得越来越透明。

最后，大家将这个类应用到一个元素上面即可。

<div class="meteor"></div>

利用CSS的变形和动画，大家可以画出各种炫酷的图形，流星就是其中之一。