百度页面奔跑的白熊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.rhkb.cn/news/335499.html

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

相关文章

用户流失分析:如何使用Python训练一个用户流失预测模型?

引言 在当今商业环境中&#xff0c;客户流失分析是至关重要的一环。随着市场竞争的加剧&#xff0c;企业需要更加注重保持现有客户&#xff0c;并深入了解他们的离开原因。本文探讨了用户流失分析的核心概念以及如何构建客户流失预测模型的案例。通过分析用户行为数据和交易模式…

【传知代码】自监督高效图像去噪(论文复现)

前言&#xff1a;在数字化时代&#xff0c;图像已成为我们生活、工作和学习的重要组成部分。然而&#xff0c;随着图像获取方式的多样化&#xff0c;图像质量问题也逐渐凸显出来。噪声&#xff0c;作为影响图像质量的关键因素之一&#xff0c;不仅会降低图像的视觉效果&#xf…

牛客NC367 第K个n的排列【困难 dfs,全排列问题 Java/Go/PHP/C++】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/1595969179464e4c940a90b36abb3c54 思路 全排列问题本文提供的答案在力扣同一道题60. 排列序列&#xff0c;超时了但是截止文章发表日&#xff0c;牛客上是能通过全部测试用例的Java代码 import java.util.*;pu…

【漏洞复现】大华智能物联综合管理平台 fastjson远程代码执行漏洞

0x01 产品简介 大华ICC智能物联综合管理平台对技术组件进行模块化和松耦合&#xff0c;将解决方案分层分级&#xff0c;提高面向智慧物联的数据接入与生态合作能力。 0x02 漏洞概述 由于大华智能物联综合管理平台使用了存在漏洞的Fastson组件,未经身份验让的攻击者可利用 /e…

Qt 基于FFmpeg的视频转换器 - 转GIF动图

Qt 基于FFmpeg的视频转换器 - 转GIF动图 引言一、设计思路二、核心源码三、参考链接 引言 gif格式的动图可以通过连续播放一系列图像或视频片段来展示动态效果&#xff0c;使信息更加生动形象&#xff0c;可以很方便的嵌入到网页或者ppt中。上图展示了视频的前几帧转为gif动图的…

深入解析 JSONPath:从入门到精通

码到三十五 &#xff1a; 个人主页 在数据处理和交换领域&#xff0c;JSON已经成为了一种广泛使用的数据格式&#xff0c; 如何有效地查询和操作这些数据也变得越来越重要。在这种情况下&#xff0c;JSONPath 应运而生&#xff0c;成为了一种在JSON数据中定位和提取信息的强大工…

【PingPong_注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …

(超详细)字符函数和字符串函数【上】

前言 C 语言中对字符和字符串的处理很是频繁&#xff0c;但是 C 语言本身是没有字符串类型的&#xff0c;字符串通常放在 常量字符串 中或者 字符数组 中。 字符串常量 适用于那些对它不做修改的字符串函数 . 1.求字符串长度函数 strlen函数 我们要求一个字符串函数的长度…

树--搜索二叉树

现有一棵结点数目为n的二叉树&#xff0c;采用二叉链表的形式存储。对于每个结点均有指向左右孩子的两个指针域&#xff0c;而结点为n的二叉树一共有n-1条有效分支路径。那么&#xff0c;则二叉链表中存在2n-(n-1)n1个空指针域。那么&#xff0c;这些空指针造成了空间浪费。 例…

通过vlan实现同一网段下的网络隔离

现有两个电脑通过交换机直接连接在一起 pc1&#xff1a; pc2&#xff1a; 正常状态下是可以ping成功的 现在先进入交换机命令行界面&#xff0c;创建两个vlan <Huawei>system-view Enter system view, return user view with CtrlZ. [Huawei]vlan 10 [Huawei-vlan10…

python基础知识总结(第一节)

一、python简介&#xff1a; Python是一种解释型&#xff0c;面向对象的高级语言。 Pyhton的语法和动态类型&#xff0c;以及解释性语言的本质&#xff0c;使它一跃成为多数平台上写脚本和快速开发应用的编程语言。 python语言百度百科介绍 二、Python基础语法&#xff1a;…

交换机的三层交换技术

现有pc1与pc2不在同一个网段之下&#xff0c;通过交换机相连接。 进人交换机1&#xff0c;创建两个vlan 10和vlan 20 &#xff0c;进入串口2设置串口模式为access&#xff0c;并且设置默认vlan为10.进入串口3设置串口模式为access&#xff0c;并且设置默认vlan为20. 进入串口1…

操作系统真象还原:完善MBR

第3章-完善MBR 这是一个网站有所有小节的代码实现&#xff0c;同时也包含了Bochs等文件 编译器给程序中各符号&#xff08;变量名或函数名等&#xff09;分配的地址&#xff0c;就是各符号相对于文件开头的偏移量 。 section 称为节&#xff0c;在有的编译器中&#xff0c;同…

做视频号小店和达人对接的好,爆单少不了!

大家好&#xff0c;我是喷火龙。 目前&#xff0c;视频号是没有什么自然流量的&#xff0c;所以&#xff0c;想要出单、爆单的话&#xff0c;靠达人带货的方式才是最可靠的&#xff0c;靠达人带货是肯定要对接达人&#xff0c;并和达人沟通带货的。 下面给大家讲一讲应该怎么…

【Python】解决Python报错:TypeError: unsupported operand type(s) for ...

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

Kafka原生API使用Java代码-生产者-分区策略-默认分区策略轮询分区策略

文章目录 1、代码演示1.1、pom.xml1.2、KafkaProducerPartitioningStrategy.java1.2.1、ProducerConfig.LINGER_MS_CONFIG取 0 值得情况&#xff0c;不轮询1.2.2、ProducerConfig.LINGER_MS_CONFIG取 0 值得情况&#xff0c;轮询1.2.3、ProducerConfig.LINGER_MS_CONFIG取 1000…

前端应用开发实验:表单控件绑定

目录 实验目的相关知识点实验内容代码实现效果 实验目的 &#xff08;1&#xff09;熟练掌握应用v-model指令实现双向数据绑定的方法&#xff0c;学会使用 v-model指令绑定文本框、复选框、单选按钮、下拉菜单&#xff1b; &#xff08;2&#xff09;学会值绑定&#xff08;将…

Java枚举

引入&#xff1a; 当有一些类&#xff0c;希望它的成员的值是具体的有限的值&#xff0c;且只读不需要修改&#xff0c;不希望用户去自定义其他的值。 比如季节类&#xff0c;它的成员只能是春夏秋冬&#xff0c;不希望用户构造其他的值。 枚举enum&#xff1a; 枚举是一组的特…

SQL数据库多层嵌套 json转sql建表语句,SQL数据库里数组里对象数据怎么创建

1. uniapp sqlite 一个数组包含对象嵌套对象通过主外键方式插入数据库&#xff1a; // 假设有一个对象数组&#xff0c;对象中包含嵌套对象 const objectsArray [{parentObject: {id: 1,name: Parent 1,// 其他父对象属性},childObject: {id: 11,parentId: 1,name: Child 1 o…

字符串操作:写一个方法,实现字符串的反转,如:输入abc,输出cba

import java.util.Scanner; public class Test_A15 {public static void main(String[] args){String strA"";System.out.println("请输入一串字符串:");Scanner scannernew Scanner(System.in);strAscanner.next();Test_A15 T15new Test_A15();String re…