CSS特效:实现星星闪烁效果 - 极悦
专注Java教育14年 全国咨询/投诉热线:444-1124-454
极悦LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 CSS滚动条宽度调整

CSS滚动条宽度调整

更新时间:2021-08-27 10:37:08 来源:极悦 浏览1459次

一闪一闪亮晶晶,用来做背景很棒哦~

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;
    }
}

以上就是极悦小编介绍的"CSS滚动条宽度调整",希望对大家有帮助,想了解更多可查看Java教程。极悦在线学习教程,针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识,让同学们更好更方便的学习和了解Java编程,感兴趣的同学可以关注一下。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>