HTML学习笔记（9）-CSS3动画

最新推荐文章于 2022-03-04 17:48:17 发布
最新推荐文章于 2022-03-04 17:48:17 发布
阅读量192 收藏
点赞数
分类专栏： HTML 文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45774939/article/details/118557224
版权

目录

1. CSS3动画

使用css3的动画能够通过原生的css实现页面动态效果。老旧的浏览器不支持CSS3的大部分属性。

1.2 变形

变形由一些列的函数构成。

transform:函数();

1.2.1变形函数

  • translate: 平移
  • scale： 缩放
  • rotate：旋转
  • skew：倾斜

不同函数使用之后的效果是不同的。

平移

translateX(x) /*仅横向平移*/
translateY(y) /*仅纵向平移*/
translate(x,y); /*第一个参数控制x轴，第二个参数控制y轴*/

缩放

scaleX(x) /*仅横向缩放，元素默认大小为1，  1.5放大1.5倍。   0.5，缩小0.5倍*
最低0.47元/天 解锁文章
活胶力
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现html页面及css3动画
Android10001的博客
11-04 931
Title *{ margin:0 auto; } body{ background-image: url("img/bg.jpg"); -webkit-background-size: cover; background-size: cover
css3动画如何在动作结束时保持该状态不变
热门推荐
青菜馒头web前段
09-13 2万+
animation-fill-mode : none | forwards | backwards | both; 属性值值 描述 none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 backwards 动画将应用在 animation
HTML5第九章
qq_43142032的博客
02-13 1285
第九章 1.CSS3变形 CSS3变形是一些效果的集合 如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化 浏览器对变形属性的支持情况，并根据不同浏览器添加前缀 变形函数 translate()：平移函数，基于X、Y坐标重新定位元素的位置 语法：translate(tx,ty); scale()：缩放函数，可以使任意元素...
html动画如何延迟,CSS3如何实现动画延迟-css3编程词典-php中文网
weixin_34582773的博客
06-07 960
animation英 [ˌænɪˈmeɪʃn] 美 [ˌænəˈmeʃən]n.生气，活泼;动画片制作，动画片摄制;[影视]动画片复数： animationsdelay英 [dɪˈleɪ] 美 [dɪˈle]n.耽搁;延迟，拖延;被耽搁或推迟的时间vt.耽搁;延期，推迟vi.延缓，延期第三人称单数： delays 现在分词： delaying 过去式： delayed 过去分词： dela...
CSS3：animation属性保持动画在最后状态
dx_zheng的博客
07-11 3746
设置animation-fill-mode:forwards css3：animation样式有6个属性： animation-name ：规定需要绑定到选择器的 keyframe 名称。。 animation-duration ：规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function ：规定动画的速度曲线。 animation-delay ：规定在动画开始之前的延迟。 animation-iteration-count ：规定动画应该播放的次数。 animation-
【EduCoder实训答案】CSS3动画
weixin_44505587的博客
09-05 1433
简介 其他各类实训答案的目录见这里 答案查询的入口网页版 答案获取的方法简介见这里 并不是所有的关卡都有答案，有些只有部分关卡有，因为金币数量有限 CSS3动画 >>>查看 第1关:简单的小动画 解题代码 第2关:CSS3动画延迟和完成后状态的保持 解题代码 第3关:CSS3动画执行次数和逆向播放 解题代码 ...
css3动画保持状态不变
文摘资讯
03-04 2765
css3动画在动作结束时保持该状态不变的解决办法animation-fill-mode : none | forwards | backwards | both;1、none：不改变默认行...
css3的animation动画如何在动作结束时保持该状态不变
yiyueqinghui的博客
09-14 4570
把物体动画地从一个地方移动到另一个地方，并让它停留在那里： animation-fill-mode:forwards; none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 应用动画结束样式到目标元素上 backwards 应用动画开始样式到目标元素上 both 向前和向后填充模式都被应用 注意 如果forwards与backwards效果相反，则可能是动画animation-timing-function 使用的是ease-in 或ease-out，致使动画效果相
css3动画在动作结束时保持该状态不变的解决办法
weixin_33861800的博客
08-11 2629
animation-fill-mode : none | forwards | backwards | both; none：不改变默认行为。 forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 ...
css3动画之后一次后保持最后状态
sunsineq的专栏
07-14 2245
animation-fill-mode:forwards这个属性可以在动画完成后将动画最后的状态应用到元素上 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width:100px; height:100px; background:red; /position:relative;/ animat..
HTML5、CSS3学习笔记
m0_51221102的博客
02-03 398
HTML5、CSS3学习笔记 本文章是基于B站pink老师的视频和PPT，结合个人认为重点的部分以及自身模糊的知识点进行归纳。 一、 HTML5 和 CSS3 提高 1. HTML5 的新特性 1.1 HTML5 新增的语义化标签 <header>：头部标签 <nav>：导航标签 <article>：内容标签 <section>：定义文档某个区域 <aside>：侧边栏标签 <footer>：尾部标签 注意：
vue学习笔记之Vue中css动画原理简单示例
11-21
本文实例讲述了Vue中css动画原理。分享给大家供大家参考，具体如下： 当transition包裹了一个元素之后，vue会自动分析元素的css样式，构建动画流程。 so，我们需要定义style。 vue中的css动画，其实就是某一个时间点...
HTML之CSS动画综合
08-17
配合HTML学习笔记9使用
CSS_study:CSS3学习笔记和代码
04-18
个人学习笔记CSS简介前端3大部分Html - 结构CSS - 表现，表皮JavaScript - 动态交互如何学习CSS是什么CSS怎么用-快速入门CSS选择器（如何定位，重难点）美化网页（文字，阴影，超链接，列表，渐变）盒子模型浮动定位...
reyfany-portfolio:组合 HTML Css Js
08-04
reyfany-投资组合包含 HTML、CSS、JS 的网站组合推荐在笔记本电脑上打开- 黑暗模式-三个js滚动和动画-bg 视差-滚动顶部-地图要查看网络视图，请单击以下链接： : 还在学习阶段 :)
HTML5CSS3Study:HTML5和CSS3学习手记及
03-23
HTML5 + CSS3学习记录，后面增加更少与Sass学习内容 笔记为个人纪录，章节号与文件夹序号对应 01什么是HTML5，HTML5新特性概览-新的标签属性 H5并不是新的语言，而是HTML语言的第五次重大版本修改。 支持：所有的...
html中如何设置动画效果,css3如何设置动画？
weixin_36082987的博客
06-04 921
首先我们来了解一下css3实现简单动画需要用到的属性：animation属性，@keyframes“规则”。animation属性和@keyframes“规则”是css3新增的属性，animation属性可用来给动画设置许多的CSS样式，例如color，background-color，height，或width。【推荐视频学习：css3教程，了解更多css3属性】我们先通过@keyframes“...
html---css3 动画
web_wq
05-15 205
html---css3 动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3动画(runoob.com)</title> <style> div { width:100px; height:100px; ...
cssloading动画
最新发布
08-16
用CSS实现loading动画有多种方法。你引用的内容中给出了三种不同的实现方式。 第一种方法是使用loader-7类，它定义了一个圆形loader动画。这个动画使用了animloader7动画，通过改变元素的大小和位置来创建动画效果。这个动画还使用了animation-delay属性来给不同的元素添加延迟，以实现两个圆圈的先后出现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [CSS多种Loading动效](https://blog.csdn.net/hyupeng1006/article/details/126287374)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [CSS实现loading小动画](https://blog.csdn.net/qq_43377853/article/details/107574188)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值