CSS动画实现星星闪烁效果

最新推荐文章于 2024-08-14 09:51:23 发布

immocha

最新推荐文章于 2024-08-14 09:51:23 发布

阅读量6.5k

点赞数 6

本文链接：https://blog.csdn.net/immocha/article/details/103528593

版权

在这里插入图片描述
一闪一闪亮晶晶，用来做背景很棒哦~

html部分

<div class="container">
       <div class="star star1"></div>
       <div class="star star2"></div>
       <div class="star star3"></div>
   </div>

CSS部分

body { overflow: hidden; }
.container {
    position   : relative;
    top        : 0;
    left       : 50%;
    transform: translateX(-50%);
    width      : 1920px;
    height     : 600px;
    background : url(images/bg1.jpg) repeat
}

.star {
    position : absolute;
    top      : 0;
    left     : 50%;
    transform: translateX(-50%);
    width    : 1920px;
    height   : 500px;
    animation: star 2.5s ease-in infinite;
}

.star1 {
    background: url(images/bg_star_1.png) no-repeat center center;

}

.star2 {
    background: url(images/bg_star_2.png) no-repeat center center; animation-delay: .8s;
}

.star3 {
    background: url(images/bg_star_3.png) no-repeat center center; animation-delay: 1.7s;
}

@keyframes star {
    10% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }
}