建设部促进中心网站,网页制作试题及答案,一重大连工程建设有限公司官方网站,wordpress 右侧广告位动画-animation 动画-animation与 transition过渡动画的区别 transition过渡动画#xff1a;实现两个状态间的变化过程动画animation#xff1a;实现多个状态间的变化过程#xff0c;动画过程可控#xff08;重复播放、最终画面、是否暂停#xff09; 走马灯-使用transiti…动画-animation 动画-animation与 transition过渡动画的区别 transition过渡动画实现两个状态间的变化过程动画animation实现多个状态间的变化过程动画过程可控重复播放、最终画面、是否暂停 走马灯-使用transition.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {padding: 0;margin: 0;}.box {width: 600px;height: 110px;border: 5px solid #000;margin: 100px auto;overflow: hidden; /* .box父元素里的子元素的高度超出了父容器的高度 发生外溢 添加overflow: hidden超出规定宽高的(溢出)内容会被裁剪掉(不可见) */}/* ul里的所有子元素li都是 块级元素 垂直独占一行的 我们的要求是要让所有的子元素li水平排列 都在一行 给ul添加 弹性盒子属性 display: flex; */.box ul {background-color: pink;display: flex;transition: all 10s;}li {list-style: none;}/* img 是行内元素 设置宽高无效 转为块级元素 设置宽高有效 */img {display: block;width: 200px;}.box:hover ul {transform: translate(-1400px); /* translate()只写一个值表示沿着X轴水平方向移动 */}/style
/head
bodydiv classboxulliimg src./images/1.jpg alt //liliimg src./images/2.jpg alt //liliimg src./images/3.jpg alt //liliimg src./images/4.jpg alt //liliimg src./images/5.jpg alt //liliimg src./images/6.jpg alt //liliimg src./images/7.jpg alt //li!-- 替身填补显示区域的露白 --liimg src./images/1.jpg alt //liliimg src./images/2.jpg alt //liliimg src./images/3.jpg alt //li/ul/div
/body
/html 走马灯-使用animation.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {padding: 0;margin: 0;}.box {width: 600px;height: 110px;border: 5px solid #000;margin: 100px auto;overflow: hidden; /* .box父元素里的子元素ul的宽度高度(width: 800px; height: 210px;)超出了父容器的宽度高度(width: 600px;height: 110px;) 发生外溢 添加overflow: hidden将子元素ul 超出规定宽高的(溢出)内容会被裁剪掉(不可见) */}/* ul里的所有子元素li都是 块级元素 垂直独占一行的 我们的要求是要让所有的子元素li水平排列 都在一行 给ul添加 弹性盒子属性 display: flex; */.box ul {width: 800px;height: 210px;background-color: pink;display: flex;/* transition: all 10s; *//* 一进入界面执行动画: 10s完成一次移动动画:让ul元素向X轴从0左边负方向移动1400px。 无线循环 匀速 */animation: move 10s infinite linear ; }li {list-style: none;}/* img 是行内元素 设置宽高无效 转为块级元素 设置宽高有效 */img {display: block;width: 200px;}/* 定义位移动画ul使用动画鼠标悬停暂停动画 */keyframes move {0% {transform: translate(0); /* ul元素 开始不需要移动在X轴0位置 */}100% {transform: translate(-1400px); /* 让ul元素 向X轴从0左边负方向移动1400pxtranslate()只写一个值表示沿着X轴水平方向移动 */}}.box:hover ul {/* transform: translate(-1400px); translate()只写一个值表示沿着X轴水平方向移动 */animation-play-state: paused;}/style
/head
bodydiv classboxulliimg src./images/1.jpg alt //liliimg src./images/2.jpg alt //liliimg src./images/3.jpg alt //liliimg src./images/4.jpg alt //liliimg src./images/5.jpg alt //liliimg src./images/6.jpg alt //liliimg src./images/7.jpg alt //li !-- 无缝动画填补空白区域 替身复制前3张图片到区域尾部,填补区域尾部的露白 --liimg src./images/1.jpg alt //liliimg src./images/2.jpg alt //liliimg src./images/3.jpg alt //li /ul/div
/body
/html 无缝动画填补区域尾部空白 为什么要使用无缝动画: 元素(图片)移动 在区域尾部有空白区域 无缝动画原理复制开头图片到结尾位置 填补尾盘区域的空白区域,让元素(图片)累加宽度区域宽度 bodydiv classboxulliimg src./images/1.jpg alt //liliimg src./images/2.jpg alt //liliimg src./images/3.jpg alt //liliimg src./images/4.jpg alt //liliimg src./images/5.jpg alt //liliimg src./images/6.jpg alt //liliimg src./images/7.jpg alt //li !-- 无缝动画填补空白区域 替身复制前3张图片到区域尾部,填补区域尾部的露白 --liimg src./images/1.jpg alt //liliimg src./images/2.jpg alt //liliimg src./images/3.jpg alt //li /ul/div
/body 实现动画animation的步骤: 1.定义动画的关键帧使用 keyframes 规则定义动画在不同阶段的样式。 keyframes: keyframes 是用来指定 CSS 动画过程中在特定时间点需要应用的样式规则。你可以在 keyframes 内部定义动画序列中的关键帧即动画的不同状态然后浏览器会自动计算这些关键帧之间的过渡效果。 动画名称 是用于标识这个动画的唯一名称以便于在其他地方引用它。 这种格式只指定了动画的起点(from)和终点(to)的状态。 keyframes 动画名称 { from { width: 200px; } to { width: 800px; } } 这种格式允许你更精确地控制动画过程中不同百分比处的状态提供了更高的灵活性和控制力。 keyframes 动画名称 { 0% { /* 起始状态 */ } 20% { /* 中间某个时刻的状态 */ } ... 100% { /* 结束状态 */ } } 2.应用动画到元素上通过 animation 属性将定义好的动画应用到特定的 HTML 元素上并设置相关的属性如持续时间、播放次数等。 最全版不是所有的属性都必须填写
animation: animation-name 动画名称animation-duration 动画时长animation-timing-function 速度曲线 animation-delay 延迟时间animation-iteration-count 重复次数animation-direction 动画方向animation-fill-mode; 执行完毕时状态
animation:动画名称 动画花费时长;(最简版这2个属性必须填写) 注意: 动画名称和动画时长必须赋值取值不分先后顺序如果有两个时间值第一个时间表示动画时长第二个时间表示延迟时间 属性作用取值animation-name 动画名称 定义要使用的 keyframes 动画名称 必需animation-duration 动画时长 动画完成一个周期所需的时间如 2s 必需animation-delay 延迟时间 动画开始前的延迟时间可为负值 animation-fill-mode 动画执行完毕时的状态 none不保留任何样式 forwards保留最后一帧样式 backwards保留第一帧样式 both同时保留首尾帧样式 animation-timing-function 动画的速度曲线缓动函数如 ease, linear, ease-in-out ease默认 steps(n)分步动画 分n个步骤完成这个动画效果 linear 匀速 ease-in ease-out ease-in-out : 动画开始和结束时较慢中间较快 animation-iteration-count 动画重复播放次数 如 1, infinite 表示无限循环 infinite为无限循环animation-direction 动画执行方向 normal默认正常播放 reverse倒序播放 alternate正向播放完后反向播放 alternate-reverse反向播放完后正向播放 animation-play-state暂停动画 paused为暂停 通常配合:hover使用 动画animation各种使用情况案例: !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0;padding: 0;}/* 给动画元素定义基础样式 */.box {background-color: #4CAF50; /* 绿色背景 */width: 200px; /* 初始宽度 */height: 100px; /* 固定高度 */margin: 50px auto; /* 居中显示 *//*transition: width 2s ease; 添加过渡效果非必须 */}/* 定义动画的关键帧 */
keyframes 扩展宽度 {from { /* 动画开始时的样式 */width: 200px;}to { /* 动画结束时的样式 */width: 800px;}}.animated-box:hover{animation: 扩展宽度 5s;/* linear匀速 */animation: 扩展宽度 5s linear;/* steps分步动画工作中配合精灵图实现精灵动画 *//* 我们这里是单纯的逐帧动画 这里没有精灵图片 */animation: 扩展宽度 5s steps(13); /* 如果有两个时间第一个是动画时长第二个是延迟时间 */animation: 扩展宽度 3s 5s; animation: 扩展宽度 3s 3; /* 重复次数infinite无限循环 */animation: 扩展宽度 3s infinite; /* alternate反向 */animation: 扩展宽度 3s infinite alternate;/* 动画执行完毕时的状态 forwards结束状态 backwards开始状态默认 */animation: 扩展宽度 3s forwards; animation: 扩展宽度 3s backwards;
}/* 动画二从 200*100 变化到 300*300 变化到800*500 *//* 百分比表示的意思是动画时长的百分比 */keyframes 扩展宽度2 {0% {width: 200px;height: 100px;}20% {width: 300px;height: 300px;}100% {width: 800px;height: 500px;}}/* 定义关键帧动画 */keyframes 扩展宽度3 {0% {transform: translateX(0) scale(1); /* 初始位置和大小 */background-color: lightblue;}50% {transform: translateX(200px) scale(1.2); /* 中间放大并右移 */background-color: lightgreen;}100% {transform: translateY(100PX) scale(1.5); /* 下移放大 */background-color: lightcoral;}} .animated-box2:hover{animation: 扩展宽度2 5s;
}/* 应用动画到元素上 */
.animated-box3:hover{animation-name: 扩展宽度3; /*使用的动画名称为 扩展宽度3 */ animation-duration: 5s; /* 动画持续时间5s */ animation-timing-function: ease-in-out; /* 动画速度曲线 */ /* 动画开始和结束时较慢中间较快 */animation-delay: 3s; /* 延迟3秒后开始动画 */ animation-iteration-count: 3; /* 动画重复播放3次 */animation-direction: alternate; /* 动画在正向和反向之间交替 */ /* 第一次正向播放第二次反向播放第三次再正向播放 */ animation-fill-mode: forwards; /* 动画结束后保持最后一帧样式 */
}/* 使用animation
你可以将所有动画属性合并成一行
这样更简洁但建议初学者先分开写便于理解和调试。 */
.animated-box4:hover{animation: 扩展宽度3 5s ease-in-out 3s 3 alternate forwards;
}/style
/head
body!-- 创建一个div元素用于应用动画 --
div classbox animated-box !-- 这个div内部可以放置任何内容这里为空 --
/divdiv classbox animated-box2 !-- 这个div内部可以放置任何内容这里为空 --
/divdiv classbox animated-box3 !-- 这个div内部可以放置任何内容这里为空 --
/divdiv classbox animated-box4 !-- 这个div内部可以放置任何内容这里为空 --
/divdiv classbox animated-box5 !-- 这个div内部可以放置任何内容这里为空 --
/div/body
/html steps(n): 分步/逐帧/分帧 动画 steps(n) 是 CSS 中用于定义动画速度曲线的一个特定值它允许你将动画分割成几个离散的步骤即帧来进行而不是平滑过渡。 这意味着动画不是连续地进行而是以跳跃的方式从一个状态直接切换到下一个状态每个状态之间的转换是瞬间完成的。 应用场景 steps() 主要应用于逐帧动画尤其是当你处理像精灵图这样的资源时非常有用。例如如果你有一个包含多个动作姿势的图片序列比如角色行走、跑步等你可以利用 steps() 函数精确控制这些姿势如何以及何时显示从而创建流畅的角色动画效果。 注意事项 精灵图必须连续且等宽否则动画会错位。使用 steps(n) 是关键它让动画不会平滑过渡而是“跳变”。如果你希望动画在开始时立刻跳到第一帧可以写成 steps(4, start)。图片加载失败时可能看不到动画效果请确保图片地址有效。 steps(n)函数 steps(number_of_steps, direction) number_of_steps: 整数值表示动画应该分为多少个步骤或帧进行。direction: 可选值指定步进的方向。它可以取两个值 start: 第一步在动画开始时立即发生。 end: 最后一步在动画结束时发生默认值。 steps(n)逐帧动画 精灵图片的结合使用:模拟人物原地踏步 精灵动画制作步骤: 1.准备一个显示区域(元素盒子) 元素盒子(显示区域)尺寸大小一张精灵小图尺寸相同140px 2.定义动画 移动背景图(精灵图)移动距离范围精灵图宽度1680px 3.使用逐帧动画steps(n) steps(N)N与精灵小图个数相同 animation: jingling_runing 3s steps(12) infinite; 这个动画 在3s内分成12步让背景图(精灵图)沿X轴向左移动(1680px)动画 且无限重复 注意:这个动画只是让背景图(精灵图)沿X轴向左移动 元素div盒子是不动的 background-position: 0 0; x0 背景图(精灵图) 在X轴原来默认位置0不动 此时 元素盒子 显示的 背景图(精灵图)的第一个小人 background-position: -1680px 0; x-1680px 背景图(精灵图)沿X轴向左移动1680px 此时 元素盒子 显示的 背景图(精灵图)的第12个小人 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0;padding: 0;}/* 给动画元素定义基础样式 */div {/* 元素盒子尺寸大小一张精灵小图尺寸相同 */width: 140px; height: 140px;border: 1px solid #000; background-image: url(./images/bg2.png);}keyframes jingling_runing { from {background-position: 0 0; /* x0 背景图(精灵图) 在X轴原来默认位置0不动 此时 元素盒子 显示的 背景图(精灵图)的第一个小人 */}to {background-position: -1680px 0; /* x-1680px 背景图(精灵图)沿X轴向左移动1680px 此时 元素盒子 显示的 背景图(精灵图)的第12个小人 */}}div:hover{/* 这个动画 在3s内分成12步让背景图(精灵图)沿X轴向左移动(1680px)动画 且无限重复 注意:这个动画只是让背景图(精灵图)沿X轴向左移动 元素div盒子是不动的 */animation: jingling_runing 3s steps(12) infinite;} /style
/head
bodydiv/div
/body
/html 多组动画组合
animation:
动画1
动画2
动画N animation:
jingling_runing 3s steps(12) infinite,div_move 12s 4s forwards linear ; 多组动画组合 steps(n)逐帧动画 精灵图片的结合使用:
模拟人物真实步行前行 多组动画组合 ❶ 第一个动画:jingling_runing 3s steps(12) infinite : 只是让背景图(精灵图)沿X轴向左移动-1680px 元素div盒子是不动的 ( steps(n)逐帧动画 精灵图片的结合使用,只是模拟人物原地踏步) ❷ 第二个动画 : div_move 12s 4s forwards linear: 让元素div盒子沿X轴向右移动1680px (让人物离开原地,真实步行前行) !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0;padding: 0;}/* 给动画元素定义基础样式 */div {/* 元素盒子尺寸大小与一张精灵小图尺寸相同 */width: 140px;height: 140px;border: 1px solid #000; background-image: url(./images/bg2.png);}keyframes jingling_runing {from {background-position: 0 0; }to {background-position: -1680px 0; }}keyframes div_move {0% {transform: translate(0);} 100% {transform: translate(1680px);}}/* 多组动画组合 第一个动画:jingling_runing 3s steps(12) infinite 只是让背景图(精灵图)沿X轴向左移动-1680px 元素div盒子是不动的第二个动画 : div_move 12s 4s forwards linear 让元素div盒子沿X轴向右移动1680px */div:hover{animation: jingling_runing 3s steps(12) infinite,div_move 12s 4s forwards linear ;}/style
/head
bodydiv/div
/body
/html 移动端网页适配 同一个网页项目 在不同的型号手机上打开 项目界面显示的分辨率不同 需要对项目网页界面分辨率进行适配在不同手机上显示都正常不会变形 如何打开谷歌浏览器上的手机模拟器
谷歌浏览器界面右击:检查-选中 图标 -选择尺寸:三角-选择不同型号的手机 屏幕分辨率 屏幕分辨率 一块屏幕上的水平垂直上的像素点个数单位是px 水平上有多少个像素点数 就表示宽的分辨率 垂直上有多少个像素点数 就表示高的分辨率 PC(电脑)分辨率 我的电脑 物理分辨率(硬件分辨率)出厂设置: 1920*1080 默认缩放100% 系统的逻辑分辨率软件/驱动设置 :1920*1080 系统的所有 UI 元素默认显示大小不变 什么是“物理分辨率” 显示区域 物理分辨率指的是你的显示器实际拥有的像素数量。 比如你电脑屏幕是 1920×1080表示它横向有 1920 个像素点纵向有 1080 个像素点。 这是显示器硬件决定的不可更改。 什么是“逻辑分辨率” 系统的绘制界面UI元素区域 逻辑分辨率是操作系统或浏览器在渲染内容时使用的“虚拟”分辨率。 它会根据缩放比例发生变化。 在缩放为 100% 的情况下操作系统不会对内容进行放大或缩小而是直接按照原始尺寸渲染。 “缩放 100%”是什么意思 所有 UI 元素文字、图标、按钮等都显示为它们设计时的原始大小 没有放大也没有缩小 每个像素对应一个真实的屏幕像素。 系统没有做任何额外的图像处理原样显示。 所以 默认缩放 100%下 ,逻辑分辨率 物理分辨率 1920×1080,所有 UI 元素默认显示大小不变 缩放的本质 简单理解: 缩放的本质是操作系统以较低的逻辑分辨率绘制界面UI元素然后将界面UI元素 放大适当比例 已达到铺满物理分辨率的效果从而让内容看起来更大、更清晰。 详细理解: ❶ 系统设置缩放为 100% 时: 我的电脑操作系统的逻辑分辨率就是 1920×1080 系统就使用这个逻辑分辨率1920×1080 进行绘制界面UI元素 而这个 逻辑分辨率1920×1080 刚好等于 物理分辨率1920×1080 所以绘制界面UI元素显示默认大小不变 不需要放大缩小 刚好铺满 屏幕的物理分辨率1920×1080 ❷系统设置缩放为 150% 时: 我的电脑操作系统的逻辑分辨率就变成 1280×720 ( 1920/150%1280 1080/150%720) 系统就使用这个逻辑分辨率1280×720 进行绘制界面UI元素 很明显这个逻辑分辨率1280×720小于 物理分辨率1920×1080 为了将绘制界面UI元素铺满 整个屏幕的物理分辨率1920×1080 所以不得不将UI元素放大1.5倍 已达到铺满屏幕的物理分辨率1920×1080的效果 如果系统就使用这个逻辑分辨率1280×720 下进行绘制界面UI元素 不放大UI元素 也不铺满, 就会出现四周空白区域。 我的电脑 默认缩放 100% 与放大150%对比前后变化
项目 缩放 100% 默认无放大/缩小 缩放 150% 物理分辨率 (显示区域) 1920×1080 1920×1080不变 逻辑分辨率 (系统的绘制界面UI元素区域) 1920×1080 1280×720系统认为的绘图空间 1920/150%1280 1080/150%720 UI 元素大小 正常 所有 UI 元素按原始尺寸显示 所有 UI 元素放大1.5倍1个逻辑像素 1×1 1 个物理像素1个逻辑像素 1.5×1.5 2.25 个物理像素 视觉感受 所有 UI 元素默认显示大小不变 UI 元素显示变大 填满 屏幕(物理分辨率1920×1080 ) ~ 假设你有一个图标设计成 64×64 像素大小
缩放比例 物理分辨率 (显示区域) 逻辑分辨率 (绘制界面UI元素区域) UI元素图标 显示大小 像素 用户感受100%1920×10801920×1080 UI元素大小不变 64×64 正常大小150%1280×7201920×1080 UI元素放大1.5倍实际占用 96×96 (64*1.596 64*1.596) 字体变大了更容易看清楚 刚好铺满 物理分辨率 (显示区域) UI元素不放大就是用 64×64大小 UI元素没有铺满 物理分辨率 (显示区域) 四周就会留白 DPR设备像素比 DPR 物理像素 / 逻辑像素 缩放 100%DPR 1 每个 CSS 的像素即逻辑像素 占用了 1×1 1 个物理像素 缩放 150%DPR 1.5 每个 CSS 的像素即逻辑像素 占用了 1.5×1.5 2.25 个物理像素 手机的分辨率
移动端项目的网页适配方案: rem 适配方案:less
