Question

我打算用css技巧绘制像流星这样可以从一个点移动到另一个点的东西。视觉效果喜欢this

我做了一个演示，但它只能从给定点移动到另一个给定点。＆＃34; meteor＆＃34;包含两个div。第一个div是圆角矩形，第二个div的border-width属性是＆＃34; 0px 90px 2px 90px＆＃34;。 css代码如下：

＆＃13;

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}
.space {
    width: 100%;
    height: 100%;
    background: #121212;
}

.star {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FFF;
    top: 100px;
    left: 400px;
    position: relative;
    transform-origin: 100% 0;
    animation: star-ani 6s infinite ease-out;
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
    opacity: 0;
    z-index: 2;
}
.star:after {
    content: '';
    display: block;
    top: 0px;
    left: 4px;
    border: 0px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .3);
    transform: rotate(-45deg) translate3d(1px, 3px, 0);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    transform-origin: 0% 100%;
}

@keyframes star-ani {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
        -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
        -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
        -webkit-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
        -moz-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
        -webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
        -moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
    }

＆＃13;

Here is a fiddle

是否可以使用优雅的方法来实现视觉效果。我非常抱歉我的英语不好。 T_T

我如何使用css和js从点到点绘制流星？

0 个答案: