夏季来临啦，快来换浏览器界面吧——动画背景版本（二）

炎炎夏日来袭啦，你的浏览器界面也换成夏天的吧！

上效果图啦啦啦

依旧是秉承简约的风格浏览器，底部采用列表做的动画，这里做部分代码解释，具体代码在下方，需要的朋友可以自行下载，冲鸭

主要就说一下画面上那个往上会有正方块往上浮动的动画吧

那个是采用

• 标签做的，主要是最近刚好运用到了它，所以就来了灵感做了这个小动画，直接上一下代码：

HTML

<div>
	<ul class="background">
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	</ul>
	</div>

CSS

@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
50%{
transform: translateY(-500px) rotate(220deg);
        opacity: 0;<!----设置不透明属性--->
        border-radius: 30%;
}
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #4e54c8;
    
}
.background li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 5s linear infinite;
}


.background li:nth-child(0) {
    left: 58%;
    width: 172px;
    height: 172px;
    bottom: 472px;
    animation-delay: 1s;
}
.background li:nth-child(1) {
    left: 18%;
    width: 114px;
    height: 114px;
    bottom: -114px;
    animation-delay: 1s;
}
.background li:nth-child(2) {
    left: 9%;
    width: 170px;
    height: 170px;
    bottom: -170px;
    animation-delay: 10s;
}
.background li:nth-child(3) {
    left: 53%;
    width: 101px;
    height: 101px;
    bottom: -101px;
    animation-delay: 15s;
}
.background li:nth-child(4) {
    left: 1%;
    width: 110px;
    height: 110px;
    bottom: -110px;
    animation-delay: 17s;
}
.background li:nth-child(5) {
    left: 9%;
    width: 156px;
    height: 156px;
    bottom: -156px;
    animation-delay: 16s;
}
.background li:nth-child(6) {
    left: 76%;
    width: 185px;
    height: 185px;
    bottom: -185px;
    animation-delay: 20s;
}
.background li:nth-child(7) {
    left: 23%;
    width: 132px;
    height: 132px;
    bottom: -132px;
    animation-delay: 23s;
}
.background li:nth-child(8) {
    left: 63%;
    width: 167px;
    height: 167px;
    bottom: -167px;
    animation-delay: 29s;
}
.background li:nth-child(9) {
    left: 16%;
    width: 116px;
    height: 116px;
    bottom: -116px;
    animation-delay: 13s;
}

这次也复习了一下CSS3 :nth-child() 选择器，上面有10个都是用到了这一功能，
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式，由于我比较懒，所以loading用的还是上一篇博客用的那个loading，后续会出很多非常炫酷的loading教程和效果

总归来说，这份代码做起来不会很费劲，有基础的朋友都可以很好理解，夏天即将来临，换一个具有夏天味道的浏览器吧~~

百度网盘链接：
来喽来喽
提取码：1234