HTML5+CSS3原百度浏览器背景奔跑的北极熊，加了点小玩意

原百度浏览器背景效果，奔跑的北极熊。

主要是复习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原百度浏览器背景奔跑的北极熊，加了点小玩意相关推荐

HTML5+CSS3小实例：酷炫的菱形加载动画
HTML5+CSS3做一个酷炫的多彩菱形加载动画,代码超简单,一个简单的动画,再加一个动画延迟,搞定.真想不到如此简单的代码,可以做出这么好看的loading动画,兄弟们,可别再说手残做不出来啦. 效 ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）
本期带大家制作百度浏览器官网(目前官网已经注销)中奔跑的北极熊的动画效果. 动画原理奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起,形成一张背景图片,然后设置一个盒子,将背景图片放入,通过设 ...
html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...
HTML5+CSS3小实例：自定义滤镜实现液体加载动画
HTML5+CSS3搭配自定义滤镜做一个液体环形小球加载动画,七个小球绕环形旋转,设置有规律的动画延迟时间,使它们有序依次旋转,过程伴随溶球效果,这真是一个百看不腻的loading加载动画. 效果: ...
HTML5+CSS3小实例：简单又好看的加载动画效果
HTML5+CSS3做一个简单又好看的加载动画效果,一个三色圆环转动,再加圆环内部文字转动,效果虽然简单,但第一次看到还是很惊艳的,最主要一点,代码真的超简单的. 效果: 源码: <!DOCTY ...
百度浏览器小熊奔跑动画前端
图片:共8个小熊原理: 利用一个div盒子,只显示一个小熊的大小(w200,h100) 让图片在盒子内移动(往左走)达成动画效果动画曲线中的steps()完成做法: 设置背景颜色,否则看不见小熊 ...
HTML5+CSS3+JS制作动态背景登录界面
目录第一步:编写HTML框架第二步:设置css样式表第三步:编写js代码第一步:编写框架 1.分别新建html,css和js文档后,将css和js分别链接至html中. 2.编写html基本框 ...
百度浏览器奔跑的小熊
原百度浏览器,奔跑的小熊通过动画的方式,让图片看起来像是在奔跑一样原理其实很简单------ 图片的大小是1600px,一共就8个小熊,分成8个部分,让这八个部分在一定时间内从头到尾显示一遍,就形 ...

HTML5+CSS3原百度浏览器背景奔跑的北极熊，加了点小玩意

HTML5+CSS3原百度浏览器背景奔跑的北极熊，加了点小玩意相关推荐

最新文章

热门文章