精华内容
下载资源
问答
我要提问
  • html动画
    千次阅读
    2019-08-11 16:35:29

    我们在页面上总能看的很多的很有趣的动态效果,而这些动态效果 仅用我们的html css代码便可实现,以前来讲，3D动画拿到网页上展示是一件非常奢侈的事情,HTML5的出现，让实现网页3D动画变得非常简单，当然前提是你不要再使用像IE678之类的浏览器了,下面我大致上为大家介绍一些html 和 css的基础标签

    动画
    使用动画流程

    • 1: 执行动画 @keyform
    • 2: 执行动画 animation
      2D
      transform 将元素应用 2D 或 3D 转换。

    translate()

    • 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
      rotate()
    • 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
      实例
    • 例如：值 rotate(30deg) 把元素顺时针旋转 30 度。

    scale()

    • 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

    skew()

    • 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
    • 实例：值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

    matrix() 六个函数和

    3D
    应用场景；实现酷炫效果；在实际开发中；一般不会用到；如果有需要；用的都是第三方库

    translate3d(x,y,z) 定义 3D 转化。

    动画是使元素从一种样式逐渐变化为另一种样式的效果。

    可以改变任意多的样式任意多的次数。

    需用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

    0% 是动画的开始，100% 是动画的完成。

    为了得到最佳的浏览器支持，所以应该始终定义 0% 和 100% 选择器。

    更多相关内容

  • HTML动画

     千次阅读 2019-04-17 20:27:52
    开发工具与关键技术：DW与 HTML、...怎么使用javascript为标签添加动画 一些动画的特性 HTML代码： <body> <div class="content"> <div id="widthfanwei"></div> </di... 
    开发工具与关键技术：DW与 HTML、javascript
撰写时间：2019/04/11

    在本文中主要的知识点就是：

    1. 怎么使用javascript为标签添加动画
    2. 一些动画的特性

    HTML代码：

    <body>
<div class="content">
		<div id="widthfanwei"></div>	
</div>
</body>

    CSS代码：

    <style>	.content{position: relative;width:100%;	height: 700px;overflow: hidden;}
		#widthfanwei{position: absolute;width:100%;	height:700px;}
		/*落下div样式 */
		#widthfanwei > div{position: absolute;width:100px;height:100px;			
			/*提前填写动画属性*/
			animation-iteration-count: infinite, infinite;/*运动次数*/
			animation-direction: normal, normal;/*规定完成的时间*/
			animation-timing-function: linear, ease-in;/*过渡时间*/	}		
		/*落下img样式 */  
		#widthfanwei > div > img{position: absolute;width:70px;height: 70px;		
			/*提前填写动画属性*/
			animation-iteration-count: infinite;
			animation-direction: alternate;
			animation-timing-function: ease-in-out;
			transform-origin: 50% -100%;
/*			overflow: hidden;*/}
		/*定义动画*/
		@keyframes SAH{/*开始的时候显示*/0% {opacity: 1;}95% {opacity: 1;}/*结束后隐藏*/
			100% {opacity: 0;}}
		/*到达最后距离，隐藏*/
		@keyframes drop{0% {-webkit-transform: translate(0px,-50px);}
100% {-webkit-transform: translate(0px,-1050px);}}		
		/*左旋转，动画*/
		@keyframes leftframe{0% {transform: rotate(-50deg);}100% {transform: rotate(50deg);}}		
		/*右旋转，动画*/
		@keyframes rightframe{0% {transform: rotate(50deg);}100% {transform: rotate(-50deg);}}</style>

    接下来就是最重要的Javascript代码

    <script>/*定义下落数量*/	var Num = 60; //创建落下div与img
		function createEle(){
			var div = document.createElement('div');
			var img = document.createElement('img');			
			img.src = 'png/img' + RandomInt(1,4) + '.png';//给img的src赋值	
			//出现位置
			div.style.top="850px";
			//在宽度中出现的位置
			div.style.left = px(RandomInt(0,1920));			
			//调用动画
			var swayanimation = (Math.random() < 0.5) ? 'leftframe' : 'rightframe';	
			//将动画赋值给div
			div.style.webkitAnimationName = 'SAH,drop';
			//将动画赋值给img
			img.style.webkitAnimationName = swayanimation;			
			//消失持续时间
			var DropTime = s(RandomFloat(5,11));			
			//div消失动画完成时间
			div.style.webkitAnimationDuration = DropTime + ',' + DropTime;			
			//旋转所需时间
			var RotateTime = s(RandomFloat(4,8));			
			//img旋转完成时间
			img.style.webkitAnimationDuration = RotateTime;					
			//延迟时间
			var DelayTime = s(RandomFloat(0,5));
			//div下落延迟时间
			div.style.webkitAnimationDelay = DelayTime + ',' + DelayTime;			
			//在div中创建img
			div.appendChild(img);			
			//返回一个div
			return div;} //数值范围内的随机整数
		function RandomInt(X,D){return X + Math.floor(Math.random() * (D - X));} 
//数值范围内的随机浮点数
		function RandomFloat(X,D){return X + Math.random() * (D - X);} //px
		function px(value){return value + 'px';} 
//秒s
		function s(value){return value + 's';}
//调用创建div与创建img方法
		function ADfunction()
		{
			var widthDIV = document.getElementById("widthfanwei");
			for(var i = 0;i < Num;i++)
			{
				widthDIV.appendChild(createEle());
			}
		}
	ADfunction();
</script>

    //最后调用ADfunction()方法来进行添加div、img

    效果图：
    在这里插入图片描述
    02.
    在这里插入图片描述

    花瓣由下往上飘，若设置从上往下飘则，修改css代码中的drop动画，将100%中的第二个值取反即可。

    收起
    展开全文

  • HTML动画及过渡效果

     千次阅读 2019-08-12 19:15:54
    HTML动画及过渡效果 1.动画 1) 动画定义 @keyframes 动画名称{ from { } to{ } } =》 @keyframes 动画名称{ 10% { } 20%{ } … 100%{ } } 2) 动画应用 animation-name:动画名称; animation-duration: ...

    HTML动画及过渡效果

    1.动画

    1) 动画定义

    1. @keyframes 动画名称{

      from {

      }

      to{

      }

      }

    =》

    1. @keyframes 动画名称{

      10% {

      }

      20%{

      }

      …

      100%{

      }

      }

      2) 动画应用

    • animation-name:动画名称;

    • animation-duration: 动画持续时间

      5s;

    • animation-delay: 动画的延迟

      1s

    • animation-direction 动画运动方向

      reverse

      alternate

    • animation-fill-mode: 动画结束后保留哪个样式

      forwards 保留最后一帧的样式

      backwards 保留第一帧的样式

    • animation-iteration-count: 动画执行的次数

      4

      infinite

    • animation-timing-function: 动画执行的时间曲线

      linear

      steps

    • animation-play-state: ; 动画播放状态

      running

      paused

      animation:

    • 速写形式

    • animation: 4s linear 0s infinite alternate move_eye

      3) 第三方动画库（animate.css）

    • 封装了css3的通用的动画样式，专业

    • https://daneden.github.io/animate.css/

      引入动画库

      为元素添加class

      2. 过渡效果

    • transition

    1. transition和animation的区别

      1). transition必须要触发，一般使用:hover

      2). transition不需要设置关键帧

      简单的过渡效果使用transition，复杂的动画使用animation

    2. 用法

    • transition-property 指定过渡的属性

      可以指定一个属性 width

      可以指定多个属性 width,background

      可以指定所有属性 all

    • transition-duration 过渡持续的时间

      可以指定秒，以及毫秒 s /ms

    • transition-timing-function 过渡的时间曲线

    • transition-delay 过渡延迟

      可以指定秒，以及毫秒 s /ms

    • transition 速写

      transition:property duration timing delay;

    • 例如：

      transition: margin-right 2s ease-in-out .5s;

    1. 变形(transform:)

    • scale(2) 变大

    • skewX(45deg) 倾斜

    • skewY(45deg) 倾斜

    • skew(45deg) 倾斜

    • rotate(45deg) 旋转

    • rotateX(45deg) 旋转

    • rotateY(45deg) 旋转

    • rotateZ(45deg) 旋转

    • translateX(200px)

    • translateY(300px)

    • translate(200px,300px)

    • …

    • mdn

    CSS百度脑图

    这次介绍的是动画的页面，东西不是很多，主要就是要记要理解的名字有点多，其余的也没什么了~下一篇写一个简单的动画效果 嘿嘿

    在这里插入图片描述 在这里插入图片描述

    收起
    展开全文

  • HTML中的动画效果

     万次阅读 2021-08-16 09:47:18
    一、HTML中的动画 在HTML中也可根据个人要求添加动画，有过渡动画transition和生动的动画效果animation以及线上的动画库 二、过渡动画transition transition是一种提供了在更改CSS属性时控制动画速度的方法，其...

    目录

    一、HTML中的动画

    二、过渡动画transition

    二、transition案例---手风琴效果

    三、动画animation

    四、线上动画库animate.css

    五、2D转换模型 transform

    一、HTML中的动画

    在HTML中也可根据个人要求添加动画，有过渡动画transition和生动的动画效果animation以及线上的动画库

    二、过渡动画transition

    transition是一种提供了在更改CSS属性时控制动画速度的方法，其可以让属性变化成为一个持续一段时间的过程

    为页面创建一个div，为其设置背景颜色等属性

    页面预览：

    当鼠标悬停时，改变大小，之后在加上过渡动画效果

     

    页面预览：当鼠标放在div上时，div向右移动，宽度改变，颜色改变

    属性：

    transition-property是规定应用过渡的CSS属性的名称

    transition-duration定义过渡效果花费的时间。默认是0秒

    transition-timing-function规定过渡效果的时间曲线。默认是ease

            linear 是以相同速度开始至结束的过渡效果

            ease 是从慢速开始，然后变快，然后慢速结束的过渡效果

            ease-in 是以慢速开始的过渡效果

            ease-out 是以慢速结束的过渡效果

            ease-in-out 是慢速开始和结束的过渡效果

    transition-delay规定过渡效果从何时开始，即是延时效果。默认是0

    transition是连写格式：

            transition：过渡属性  过渡时长  运动速度 延迟时间

                           transition-property    transition-duration   transition-timing-function   transition-delay

    二、transition案例---手风琴效果

    页面最终效果：

    当鼠标放置在某张图片前时，该张图片放大，其他图片缩小

    首先，为页面添置几张图片

     清除页面默认内外边距

    为整体框架设置宽高边框等基本属性，为图片设置相同的宽高，将图片浮动起来，且使超过边框的图片其他地方隐藏起来

    手风琴效果：当鼠标移入ul时，所有图片缩小，当鼠标移入具体某张图片时，该张图片放大

     注意：在li上设置过渡动画transition

    三、动画animation

    设置基本的页面

    设置animation动画时，要给需要的动画起一个名称，在里面设置0%到100%的变化

     页面预览：

    初始页面

    动画结束时：

    属性：

            animation-name 是绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

            animation-duration是动画的完成时间，告诉系统动画持续的时长

            animation-timing-function是设置动画如何完成一个周期，告诉系统动画执行的速度（与过度动画类型）   

                    linear 是以相同速度开始至结束的过渡效果

                    ease 是从慢速开始，然后变快，然后慢速结束的过渡效果

                    ease-in 是以慢速开始的过渡效果

                    ease-out 是以慢速结束的过渡效果

                    ease-in-out 是慢速开始和结束的过渡效果

            animation-delay 设置动画在启动前的延迟间隔

            animation-iteration-count 定义动画的播放次数，告诉系统动画需要执行几次

                    n 定义动画播放n次                infinite无限次往返执行

            animation-direction 指定是否应给轮流反向播放动画

                    normal 默认取值 ，执行一次后回到起点继续执行下一次

                    alternate 往返动画，执行完一次后往回执行下一次

                    reverse 方向执行

            animation-fill-mode 规定当动画不播放时（完成时，延时未开始播放时），应用到的元素样式

                    none 不做任何改变        forwards 结束时保持动画最后一帧的样式

                    backwards 等待时显示动画第一帧的样式

                    both 等待时显示动画第一帧的样式，结束时保持动画最后一帧的样式

            animation-play-state 告诉系统当前动画是否需要暂停

     

    页面预览：

    四、线上动画库animate.css

    在CDN中引入animate的cdn，具体网址：https://www.bootcdn.cn/

    在底下有其搜索内容，点击第一个

    选择适合自己的版本，点击后缀为.min.css，进行复制

     将复制的内容粘贴在代码的head标签内的link标签中

     给指定元素加入class"animate__animated <动效名称>

    进入线上动画库，选择自己喜欢的动画效果（在侧边栏中），线上动画库地址：https://animate.style

    复制去名称

     在代码中复制

     此时页面就会出现对应的动画效果

    五、2D转换模型 transform

    transform属性应用从2D或3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜

    旋转 rotate    即：transform:rotate(45deg);   其中deg是一种单位，表示角度

    页面预览：

    平移 translate  即：transform:translate(100px,100px) 

                                    第一个参数表示的是水平方向的平移，第二个参数是垂直方向的平移

    给页面一个父容器，子元素在父容器中平移

    给父容器和子元素设置合适的宽高，给子元素设置平移属性

     页面预览：在未平移之前

    平移之后

    缩放scale   即transform:scale(n)  其中也可将n分为两个参数

            第一个参数水平方向  第二个参数垂直方向

    注意：若参数是1，则代表保持不变；若参数大于1，则表示放大；若参数小于1，则表示缩小

    放大：

     页面预览：

    缩小：

     页面预览：

     连写格式：

    transform:rotate(45deg) translate(100px) scale(0.8)

    形变中心点： transform-origin  第一个参数水平方向  第二个参数垂直方向

    默认情况下所有元素都是以自己的中心点作为参考来旋转的，但我们可以通过形变中心点来修改他的参考点

    是页面子元素旋转

    页面预览：

    旋转中心为子元素的中心点

    改变形变点

    页面预览：

     旋转的中心参考点变为左下方

    收起
    展开全文

  • HTML中对于 animation（动画）属性的使用方法

     千次阅读 2021-12-15 11:00:37
    @keyframes 自定义动画函数名{ } HTML： 把鼠标放在我上面出现动画效果下拉框 这是具有动画效果的下拉框 CSS： div{ width: 200px; height: 50px; background-color: yellow; margin: auto; position: relative; } ...
    收起

  • HTML动画滑动图片特效

     千次阅读 2017-10-12 10:47:39
    1、jQuery/CSS3图片洗牌切换动画特效 这是一款基于jQuery和CSS3的图片动画特效，该图片动画是洗牌的效果，我们只需点击切换按钮，即可一张张切换图片。另外，如果你长按住按钮不放，图片的洗牌效果就会更加明显和...
    收起
    jquery 图片

  • html5+css3实现动画、逐帧动画效果

     千次阅读 2020-03-02 01:15:35
    上篇博文中讲明了html5+css3实现2D-3D动画效果，介绍了html5中2d、3d的运用，顺便简明的提到了动画，而本篇将更加详细的说明动画的各运用及说明。 首先我们需要了解css3中动画的意思,明了的意思就是能动态显示的页面...
    收起

  • HTML实现简单的动画效果(盒子过渡，扑克旋转)

     万次阅读 多人点赞 2019-08-22 22:46:04
    HTML实现简单的动画效果(盒子过渡，扑克旋转) // 实现一个简单的鼠标点击div触发过渡效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title>过渡效果</title> <...
    收起

  • animation的八大属性及HTML基础动画效果——平移、旋转、缩放、倾斜、过渡

     千次阅读 2022-01-09 10:35:15
    1.动画（animation）的8个属性及 关键帧 animation：复合属性，设置对象的动画属性，共有8个属性 1.1 animation-name 作用：设置对象所应用的动画名称 书写格式：@keyframes 动画名称 .box{ margin: auto;...
    收起

  • html如何实现加载动画

     千次阅读 2019-12-10 15:52:38
    0.8秒，如果后端数据处理不当还有超过一秒的接口，甚至两秒，在这段时间里我们需要向客户表达正在加载而且不能让用户进行其他操作，那么就需要一个加载动画了，下面凡玉就带大家来看看html如何实现加载动画 ...
    收起

  • HTML 动画（一）

     万次阅读 2019-12-24 16:56:14
    入场动画（一） 图片从左至右逐渐消失 实现逻辑： a: 将遮罩分割为数个div,多个div通过图片定位拼接成一张图片; b: 运用requestAnimationFrame + animation实现动画； c: 遮罩层网格状逐步消失设置background-...
    收起

  • HTML不会实现旋转动画？这里教你如何实现

     千次阅读 2021-02-03 22:19:10
    本文利用HTML+CSS在网页实现旋转动画，源码以及素材已经全部放到了Gitee仓库中，需要源码的小伙伴们到仓库自取（本文在仓库中对应的项目名为Rotate） 仓库地址：https://gitee.com/dream-flight/repository 提示：...
    收起

  • 4行代码 超级简单 html/css 实现平移动画

     千次阅读 2020-01-18 18:21:22
    源代码（直接复制粘贴到txt另存为html文件即可）: <div style="transition: transform 1s;height:150px;width:150px;background-color:red"></div> <style> div:hover {transform: translateX....
    收起

  • HTML5实现一个时钟动画

     千次阅读 2018-09-15 19:18:42
    我们首先要理解如何去实现这个时钟，暂时不要考虑动画，学着将问题进行拆解，一步一步实现。 首先我们需要画个方形，有个边框，给一个圆角就可以实现最外边的圆环 再通过一个长的矩形旋转多个就可以实现刻度 ...
    收起

  • HTML5酷炫动画集锦

     万次阅读 多人点赞 2016-02-25 14:44:51
    HTML5酷炫动画集锦  本人搜集了一些用HTML5实现的酷炫动画Demo。在这里进行展示，以供大家借鉴参考：  1.HTML5 Canvas圆盘抽奖：  实现效果截图：http://www.html5tricks.com/html5-canvas-choujiang.html    2...
    收起

  • 10大炫酷的HTML5文字动画特效欣赏

     千次阅读 2020-12-19 05:02:08
    7款让人惊叹的HTML5粒子动画特效HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效，特别是Canvas特性，可以实现在网页上绘制任何图形和动画。本文要分享7款让人惊叹的HTML5粒子动画特效，这些粒子...
    收起

  • html+css设置背景图移动以及人物行走的动画效果

     千次阅读 2021-02-07 22:28:00
    /* 使用动画效果，设置时间，速度匀速，执行动画的次数为无限次 */ animation: bg-ani 30s linear infinite; } .parent { /* 人物图片设置绝对定位,相对于视口区进行定位,脱离文档流,不保留原来的位置 */ position:...
    收起

  • HTML动画 request animation frame

     千次阅读 2018-09-23 08:27:59
    在网页中，实现动画无外乎两种方式。 1. CSS3 方式，也就是利用浏览器对CSS3 的原生支持实现动画； 2. 脚本方式，通过间隔一段时间用JavaScript 来修改页面元素样式来实现动画。 接下来我们就分别介绍这两种方式的...
    收起

  • Html+css3动画效果

     万次阅读 2019-01-18 12:25:16
    Html+css3动画效果 开发工具与关键技术：DW 作者：彭春怡 撰写时间：2019/1/16 1.下面是通过html+css3完成的一个动画效果，“跳跳球”。实现的代码如图所示： Html代码： Css3 代码： 通过“@...
    收起

  • HTML5小车动画

     热门讨论 2012-02-02 21:45:15
    HTML5小车动画
    收起

  • html动画的基本知识点，用动画做出一个轮播图

     千次阅读 2018-06-25 17:11:53
    定义动画关键帧方案 @keyframe 动画名{ 0%(from){ 样式 } 100%(to){ 样式 }}设置动画名称(关键帧)animation-name:动画名;动画播放时间animation-duration: 2s;动画播放完成后的停止位置 默认是backwards:播放...
    收起

  • HTML5+CSS动画最佳实战

     2016-02-22 15:27:31
    HTML5+CSS动画最佳实战，研究一下css3动画的魅力，提高篇...网络下载收集的
    收起

  • 【HTML5】网页实用技巧2：设置动画自动循环播放，鼠标移上去，停止动画播放

     千次阅读 2020-12-10 11:21:55
    需要实现的效果：圆形图片，一直执行旋转的动画，鼠标移上去时，动画停止 实现思路： ①制作一个圆形图片，制作步骤参照：圆形图片的制作 ②创建动画，关键内容：@keyframes 的使用 ③给图片使用动画，关键...
    收起

  • 哈哈，又找到几个强大的html5+css3的动画效果

     万次阅读 多人点赞 2017-08-29 22:15:06
    一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览 发表回复 13 又是一周即将过去，我们来精心挑选这周分享的31款别出心裁的HTML5动画，很多还比较实用，一起来看看吧。 1、HTML5迷你...
    收起

  • html5+css3实现2D动画效果演示

     千次阅读 2016-10-27 22:36:43
    这些代码主要实现的功能就是一些2D的动画效果，如平移动画，旋转动画等等。 HTML5代码： 动画效果 平移动画 图片描述 图片描述 图片描述 旋转动画
    收起

  • 【动画消消乐】HTML+CSS 自定义加载动画：电池充电动画 058

     千次阅读 多人点赞 2021-05-01 18:44:10
    前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机...HTML <!DO
    收起
    自定义加载动画

  • 必须掌握的CSS3动画（Animation）的8大属性

     千次阅读 2021-06-12 17:09:19
    如果有多个属性值时以"，"隔开，适用于所有元素，包含伪对象:after和:before1.animation-name 检索或设置对象所应用的动画名称必须与规则@keyframes配合使用，eg:@keyframes animations animation-name:animations;...
    收起

  • HTML纯CSS3动画轮播图（详解）

     万次阅读 多人点赞 2018-08-12 20:22:20
    HTML纯CSS3动画轮播图（详解） 网页开发初学者学习时，一般都是先编写静态的页面，并没有JS、JQ等，在学习CSS3 时可以利用animation 属性制作一个简单的纯CSS3轮播图 基础知识 废话不多说，先来复习一下CSS的...
    收起

  • css动画，如何隔两秒执行一次？？求指教

     千次阅读 2021-06-14 05:08:55
    一只萌萌小番薯把动画时间设置为2.5s,然后前80%不动，后20%做动画就行了.item{animation:gelatine2.5sinfinite}@keyframesgelatine{80%{-webkit-transform:scale(1,1);transform:scale(1,1);}85%{-web...
    收起

  • 程序员爱情表白专用html5动画网页的代码

     千次下载 热门讨论 2014-09-23 14:29:15
    程序猿表白专用的html5动画特效网页，真的挺羡慕创作者的水平，有这水平可以把爱表白给想表白的人，不要以为那些鲜花是用的图片，你会发现在资源文件中没有一个图片资源，但HTML5强大的功能不能不让你惊叹，左侧的...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 361,819
精华内容 144,727
热门标签
关键字：

html动画