百度页面奔跑的白熊html、css

一、相关知识-动画

1.基本使用:先定义再调用

2.

调用动画

用keyframes定义动画(类似定义类选择器)
@keyframes动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}

使用动画

div
{
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
/调用动画/
animation-name:动画名称;
/持续时间/
animation-duration:持续时间;单位必须为秒
}

3.动画

动画序列

0%是动画的开始,100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,百分号必须为整数,百分比的划分就是时间的分配,或用关键词"from"和"to",等同于0%和100%

动画属性

@keyframes:规定动画
animation:所有动画属性的简写属性,除了animation-play-state属性。
必需animation-name:规定@keyframes动画的名称。
必需animation-duration:规定动画完成一个周期所花费的秒或毫秒,默认是0。
animation-timing-function:规定动画的速度曲线,默认是“ease”。
animation-delay:规定动画何时开始,默认是0。
animation-iteration-count:规定动画被播放的次数,默认是1,还有infinite
animation-direction:规定动画是否在下一周期逆向播放,默认是"normal”,alternatei逆播放
animation-play-state:规定动画是否正在运行或暂停。默认是"running",还有"pause"。简写里不包括这项
animation-fill-mode:规定动画结束后状态,保持forwards 回到起始backwards
简写:
动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation:myfirst 5s linear 2s ifinite alternate forwards;

二、相关案例-奔跑的白熊

1.素材

bear
mountain

2.大致思路

1.html结构

放一个父盒子box和一个子盒子b,分别用于装背景山和白熊

2.设计css样式:

先设置奔跑的熊.box .b

由于熊为白色,给body背景一个颜色
注意:熊一共走了8步,图片长为1600px,所以添加背景图片时只显示一个熊的片段长为200px
让熊在原地跑
定义bear动画:一共8步,每一步0.8s,无限重复跑步动作
调用bear动画:初始状态为step1,末尾状态为step8,整个背景图片往左移,所以背景移动值为负
再让熊跑到视窗中央:
定义move动画:走2.5s,走到终点停止
调用move动画:初始状态在最左侧,末尾状态在屏幕中央,先移动left一半,再移动熊所在盒子(版心)本身的一半即可到中间
同时调用两个动画实现跑到中间的熊

再设置移动的山背景

注意由于山背景的宽度为3840px,超出视窗宽度,所以我们给山盒子加宽度时为100%,加背景图片时要用repeat,否则会出现背景有一段为空白

定义mountain动画:走20s,匀速,无限
调用mountain动画:同熊原地跑动画原理相同

我们想让熊覆盖在山上跑动,就要分别给子盒子和父盒子加子绝父相的定位,并给熊加bottom:0,使它在山最下跑
但是此时会发现山和熊在视窗上半部分,给山也加bottom:0,并不能实现,因为山的定位不固定在视窗中,所以要将山的相对定位改为固定定位

3.最终完整源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: #ccc;}.box {bottom: 0;width: 100%;height: 336px;position: fixed;background: url(image/bg1\(1\).png) repeat;animation: mountain 20s linear infinite;}.box .b {bottom: 0;position: absolute;width: 200px;height: 100px;background: url(image/bear\(1\).png) no-repeat;animation: bear 0.8s steps(8) infinite, move 2.5s forwards;}@keyframes bear {0% {background-position: 0;}100% {background-position: -1600px;}}@keyframes move {0% {left: 0;}100% {left: 50%;margin-left: -100px;}}@keyframes mountain {0% {background-position: 0;}100% {background-position: -3840px 0;}}</style>
</head><body><div class="box"><div class="b"></div></div>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/18181.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端面试题日常练-day28 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末。 1. 在Vue中&#xff0c;以下哪个选项用于监听组件生命周期钩子函数&#xff1f; a) watch b) computed c) lifecycle d) created 2. 在Vue中&#xff0c;以下哪个选项用于在列表渲染时为每个元素…

Pytorch线性模型(Linear Model)

基本步骤 ①首先准备好数据集&#xff08;DataSet&#xff09; ②模型的选择或者设计&#xff08;Model&#xff09; ③进行训练&#xff08;Train&#xff09;大部分模型都需要训练&#xff0c;有些不需要。这一步后我们会确定不同特征的权重 ④推理&#xff08;inferring…

开封旅游三天两夜旅游攻略

开封是一座历史悠久的城市&#xff0c;有着丰富的文化遗产和美食。以下是一个三天两夜的开封旅游攻略&#xff0c;供你参考&#xff1a; 一、行程安排 第一天&#xff1a; 上午&#xff1a;抵达开封&#xff0c;前往酒店办理入住手续。随后参观开封博物馆&#xff0c;了解开封…

【Python安全攻防】【网络安全】一、常见被动信息搜集手段

一、IP查询 原理&#xff1a;通过目标URL查询目标的IP地址。 所需库&#xff1a;socket Python代码示例&#xff1a; import socketip socket.gethostbyname(www.163.com) print(ip)上述代码中&#xff0c;使用gethostbyname函数。该函数位于Python内置的socket库中&#xf…

广场舞团|基于SprinBoot+vue的广场舞团系统(源码+数据库+文档)

广场舞团系统 目录 基于SprinBootvue的广场舞团系统 一、前言 二、系统设计 三、系统功能设计 1 系统功能模块 2 后台登录模块 5.2.1管理员功能模块 5.2.2社团功能模块 5.2.3用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推…

Pytorch-06 使用GPU加速计算

要在PyTorch中使用GPU加速计算&#xff0c;需要将模型和数据移动到GPU上进行处理。以下是上一节演示修改后的示例代码&#xff0c;展示了如何在训练过程中利用GPU加速计算&#xff1a; import torch import torch.nn as nn import torch.optim as optim import time# 检查GPU是…

2024-05-28 问AI: 在深度学习中,什么是反向随机失活?

文心一言 在深度学习中&#xff0c;反向随机失活&#xff08;Inverse Randomized Elimination&#xff0c;通常称为Dropout&#xff09;是一种在训练深度神经网络时常用的正则化技术&#xff0c;用于防止过拟合。该技术通过随机将神经网络中的一部分神经元“失活”或“丢弃”来…

深度剖析:为什么 Spring 和 IDEA 都不推荐使用 @Autowired 注解

目录 依赖注入简介 Autowired 注解的优缺点 Spring 和 IDEA 不推荐使用 Autowired 的原因 构造器注入的优势 Autowired 注解的局限性 可读性和可测试性的问题 推荐的替代方案 构造器注入 Setter 注入 Java Config Bean 注解 项目示例&#xff1a;Autowired vs 构造器…

Android 项目Gradle文件讲解(Groovy和Kotlin)

Android 项目Gradle文件讲解&#xff08;Groovy和Kotlin&#xff09; 前言正文一、Gradle的作用二、Gradle的种类① 工程build.gradle② 项目build.gradle③ settings.gradle④ gradle.properties⑤ gradle-wrapper.properties⑥ local.properties 三、Groovy和Kotlin的语言对比…

装饰模式:鸡腿堡

文章目录 UML类图目录结构Humburger.javaChickenBurger.javaCondiment.javaChuilli.javaLettuce.javaTest.java深度理解test怎么写 UML类图 目录结构 我们从指向最多的开始写 Humburger.java package zsms;public abstract class Humburger {protected String name;public S…

【接口自动化_05课_Pytest接口自动化简单封装与Logging应用】

一、关键字驱动--设计框架的常用的思路 封装的作用&#xff1a;在编程中&#xff0c;封装一个方法&#xff08;函数&#xff09;主要有以下几个作用&#xff1a;1. **代码重用**&#xff1a;通过封装重复使用的代码到一个方法中&#xff0c;你可以在多个地方调用这个方法而不是…

C++贪心算法(3)

整数区间 #include<bits/stdc.h> using namespace std; int main() {int n;cin>>n;int a[110][10]{0};for(int i0;i<n;i){cin>>a[i][1]>>a[i][2];}int cnt[110]{0};int mi99999;int mii-1;bool f[110]{false,false,false,false,false,false,false,…

debian让dotnet 程序以守护进程方式运行,如果意外退出主动开启

创建服务文件: 打开一个新的.service文件在/etc/systemd/system/目录下&#xff0c;例如myapp.service sudo nano /etc/systemd/system/myapp.service编辑服务文件: 添加以下内容到myapp.service文件&#xff0c;确保修改ExecStart以指向你的.NET Core应用程序的可执行文件&am…

JVM-调优之-高内存占用问题排查

排查思路 1&#xff09;检查jvm内存的分配情况 2&#xff09;检查jvm的gc情况 3&#xff09; 找出占用量比较大的对象 第一步&#xff1a;jmap -heap PID 查看jvm内存使用情况 jmap -heap 2525 可以看到老年代年轻代等其他内存区域内存使用率百分比 第二步&#xff1a;jsta…

Golang:使用roylee0704/gron实现定时任务

可以使用roylee0704/gron实现定时任务 文档 https://github.com/roylee0704/gronhttps://pkg.go.dev/github.com/roylee0704/gron 安装 go get github.com/roylee0704/gron代码示例 package mainimport ("fmt""time""github.com/roylee0704/gron…

如何用分立器件设计一个过流保护电路

过流保护电路是指当后级负载电流过大或者发生短路时&#xff0c;自动切断电源与后级负载&#xff0c;从而防止大电流损害电源电路&#xff0c;过流保护又叫OCP。 常见的过流保护电路有保险丝过流保护&#xff0c;集成的过流保护芯片&#xff0c;还有这种分立器件搭建的过流保护…

Browserify:将 Node.js 模块转换为浏览器可用的 JavaScript

什么是 Browserify&#xff1f; Browserify 是一个 JavaScript 工具&#xff0c;用于将 Node.js 模块转换为在浏览器环境中可用的单个 JavaScript 文件。通过 Browserify&#xff0c;您可以使用 require() 函数引入其他模块&#xff0c;就像在 Node.js 中一样&#xff0c;而不…

详解 Scala 的隐式转换

当编译器第一次编译失败的时候&#xff0c;会在当前的环境中查找能让代码编译通过的方法&#xff0c;用于将某个类型进行转换&#xff0c;实现二次编译通过 一、隐式函数 隐式函数可以在不修改任何代码的情况下&#xff0c;扩展某个类的功能 /**声明语法&#xff1a;implicit d…

Ubuntu上安装Maven

在Ubuntu上安装Maven的步骤如下&#xff1a; 更新包索引&#xff1a; sudo apt update 安装Maven&#xff1a; sudo apt install maven 验证安装是否成功&#xff1a; mvn -version 以上步骤将会安装Maven并添加到系统路径中&#xff0c;你可以通过运行mvn -version来验…

TIM输出比较

一、OC&#xff08;Output Compare&#xff09;输出比较 1、输出比较可以通过比较CNT&#xff08;计数器&#xff09;与CCR&#xff08;捕获/比较寄存器&#xff09;寄存器值的关系&#xff0c;来对输出电平进行置1、置0或翻转的操作&#xff0c;用于输出一定频率和占空比的PW…