admin管理员组文章数量:1616033
原百度浏览器背景效果，奔跑的北极熊。
主要是复习CSS3的动画效果。
加了点极光效果和切换模式。
需要素材可以在下方评论。
<!DOCTYPE html>
<html lang="ch-Zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度浏览器-Running Bear</title>
<link rel="stylesheet" href="css/base.css">
<script src="../jQuery.3.5.1.js"></script>
<style>
body {
background-color: rgb(13, 18, 37);
}
.bg1 {
z-index: 2;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 336px;
background: url(img/bg1.png) no-repeat;
animation: bgMove 30s linear infinite;
}
.bg3 {
z-index: 1;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 384px;
background: url(img/bg3.png) no-repeat;
animation: bgMove 40s linear infinite;
}
.bg2 {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 569px;
background: url(img/bg2.png) no-repeat;
animation: bgMove 50s linear infinite;
}
.bear {
z-index: 3;
position: absolute;
bottom: 5%;
/* transform: translateY(-100%); */
width: 200px;
height: 100px;
background: url(img/bear.png) no-repeat;
animation: bear 1s steps(8) infinite, bearMove 4s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes bearMove {
from {
left: 0;
}
to {
left: 50%;
transform: translateX(-50%);
}
}
@keyframes bgMove {
0% {
background-position: 0 0;
}
100% {
background-position: -1920px 0;
}
}
.jiguang,
.jiguang2,
.jiguang3 {
z-index: -999;
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100px;
border-radius: 2px;
}
.jiguang ul li,
.jiguang2 ul li,
.jiguang3 ul li {
float: left;
width: 2px;
height: 100px;
margin-right: 10px;
/* #3a0224 #21653a #a4d47e */
/* background-image: linear-gradient(#ab4b81, #0e8d80); */
box-shadow: 0 0 10px rgba(164, 212, 126, .5);
background-image: linear-gradient( rgba(45, 75, 21, .1), rgba(0, 128, 0, 1));
transform: rotate(45deg);
}
.jiguang3 {
margin-left: 300px;
}
.jiguang {
animation: jiguangMove 5s ease infinite;
}
.jiguang2 {
animation: jiguangMove 4s ease infinite;
}
.jiguang3 {
animation: jiguangMove 10s ease infinite;
}
@keyframes jiguangMove {
from {
top: 0;
left: 50%;
}
to {
left: 0;
top: 70%;
}
}
.moon {
position: absolute;
width: 128px;
height: 128px;
right: 50px;
top: 50px;
background: url(img/moon.png) no-repeat;
cursor: pointer;
}
.moon:hover::after {
content: '切换日间/夜间模式';
position: absolute;
display: block;
top: 128px;
width: 128px;
height: 32px;
border-radius: 16px;
line-height: 32px;
text-align: center;
background-color: rgba(0, 128, 0, 1);
color: #fff;
font-size: 13px;
cursor: pointer;
}
.text {
position: absolute;
width: 0px;
overflow: hidden;
white-space: nowrap;
height: 60px;
line-height: 60px;
top: 20%;
left: 50%;
transform: translateX(-50%);
font-size: 36px;
animation: textGen1 1.2s steps(19) forwards;
}
@keyframes textGen1 {
0% {
width: 0;
}
100% {
width: 684px;
}
}
</style>
<script>
HTMLElement.prototype.__defineGetter__("currentStyle", function() {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
function changeDay() {
var color = $('body').css('background-color');
if (color == "rgb(13, 18, 37)") {
$('body').css("background", "rgb(255, 255, 255)");
$(".jiguang, .jiguang2, .jiguang3").css("display", "none");
$('.moon').css("background", "url(img/sun.png) no-repeat")
} else {
$('body').css("background", "rgb(13, 18, 37)");
$(".jiguang, .jiguang2, .jiguang3").css("display", "block");
$('.moon').css("background", "url(img/moon.png) no-repeat");
}
}
</script>
</head>
<body>
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bear"></div>
<div class="text">
心若没有栖息的地方，走到哪里都是流浪。
</div>
<div class="jiguang">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="jiguang2">
<ul>
<li></li>
</ul>
</div>
<div class="jiguang3">
<ul>
<li></li>
</ul>
</div>
<div class="moon" onclick="changeDay()"></div>
</body>
</html>版权声明：本文标题：HTML5+CSS3原百度浏览器背景奔跑的北极熊，加了点小玩意 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728734460a1170765.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论