-
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
在本文中主要的知识点就是:
- 怎么使用javascript为标签添加动画
- 一些动画的特性
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-01-18 10:27:24关于HTML动画效果 一. 动画的位移 表示的是,一个物体当前位置位移到另一个位置而产生的动画效果,如 从0%时background背景我,到100%时background的背景你,而产生位移。 二. 动画在位移时物体的变化 就是说,...关于HTML动画效果
一. 动画的位移
表示的是,一个物体当前位置位移到另一个位置而产生的动画效果,如
从0%时background背景我,到100%时background的背景你,而产生位移。
二. 动画在位移时物体的变化
就是说,物体在移动的时候不停的发生形状的改变
物体形状改变时,会有一段从0%25%50%变化的过程
Span为物体的主体标签,transform是初始位置animation-duration是物体移动时间,
Animation-delay是物体移动准备时间。
-
HTML动画及过渡效果
2019-08-12 19:15:54HTML动画及过渡效果 1.动画 1) 动画定义 @keyframes 动画名称{ from { } to{ } } =》 @keyframes 动画名称{ 10% { } 20%{ } … 100%{ } } 2) 动画应用 animation-name:动画名称; animation-duration: ...HTML动画及过渡效果
1.动画
1) 动画定义
-
@keyframes 动画名称{
from {
}
to{
}
}
=》
-
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
-
transition和animation的区别
1). transition必须要触发,一般使用:hover
2). transition不需要设置关键帧
简单的过渡效果使用transition,复杂的动画使用animation
-
用法
-
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;
- 变形(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
这次介绍的是动画的页面,东西不是很多,主要就是要记要理解的名字有点多,其余的也没什么了~下一篇写一个简单的动画效果 嘿嘿
-
-
HTML动画效果
2019-08-11 16:35:29我们在页面上总能看的很多的很有趣的动态效果,而这些动态效果 仅用我们的html css代码便可实现,以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要...我们在页面上总能看的很多的很有趣的动态效果,而这些动态效果 仅用我们的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-12-24 16:56:14入场动画(一) 图片从左至右逐渐消失 实现逻辑: a: 将遮罩分割为数个div,多个div通过图片定位拼接成一张图片; b: 运用requestAnimationFrame + animation实现动画; c: 遮罩层网格状逐步消失设置background-... -
好看的html 动画特效
2020-01-13 22:10:13好看的html 动画特效 <div class="wrap"> <!--部署内外层图片--> <div class="cube"> <!--前面图片 --> <div class="out_front"> <img src="https://www.... -
html动画部分
2018-08-26 18:35:13鼠标悬浮动画效果,实现一个国庆的倒计时: 看下效果: 标题 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <... -
网站(十六)HTML动画与过渡实例
2018-07-09 18:10:54HTML动画与过渡实例 补充 html:hover(当鼠标放在整个网页的任何地方的时候都可以触发) animation-fill-mode:forwards(使得动画停留在最后一帧) opacity(不透明度,为0时透明) div(分块符) <!... -
html动画的引用
2019-03-13 11:23:40对于一些常用的样式动画,在以下链接中可以进行预览,其中包含很多css样式 https://daneden.github.io/animate.css/ 怎么使用呢??? 在你的html代码之中加上这个,并且你需要在css文件夹中加入这个animate.css ... -
HTML动画 request animation frame
2018-09-23 08:27:59在网页中,实现动画无外乎两种方式。 1. CSS3 方式,也就是利用浏览器对CSS3 的原生支持实现动画; 2. 脚本方式,通过间隔一段时间用JavaScript 来修改页面元素样式来实现动画。 接下来我们就分别介绍这两种方式的... -
HTML动画滑动图片特效
2017-10-12 10:47:391、jQuery/CSS3图片洗牌切换动画特效 这是一款基于jQuery和CSS3的图片动画特效,该图片动画是洗牌的效果,我们只需点击切换按钮,即可一张张切换图片。另外,如果你长按住按钮不放,图片的洗牌效果就会更加明显和... -
html动画的基本知识点,用动画做出一个轮播图
2018-06-25 17:11:53定义动画关键帧方案 @keyframe 动画名{ 0%(from){ 样式 } 100%(to){ 样式 }}设置动画名称(关键帧)animation-name:动画名;动画播放时间animation-duration: 2s;动画播放完成后的停止位置 默认是backwards:播放... -
HTML动画实现波纹效果
2018-12-07 23:39:59详情参考自 https://blog.csdn.net/u010870890/article/details/77346479 -
html动画加载页面效果scrollReveal.js插件
2018-05-24 17:36:49scrollReveal.js 使用方法html页面引入文件scrollReveal.js 在需要加载动画效果的div 或者其他标签 中添加 data-scroll-reveal属性<div data-scroll-reveal="enter left and move 50px over 1.33s"... -
html动画完成一个环形的照片墙加背景音乐
2018-06-25 17:22:44思路:大致就是让所有盒子绝对定位,然后给每一个盒子设置动画,让其盒子沿y轴方向旋转,并且向z轴移动,盒子之间的动画需要有一定的延迟时间,让所有盒子旋转到一定位置时,让其父级进行关于y轴的旋转&... -
html动画(1)大白
2017-06-11 23:10:27DOCTYPE html><html> PS:学习自其它文章,画完是不是特别有成就感呢,哈哈哈哈哈哈~下次画点啥呢~你说我来画? 学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群 343599877,... -
设计师10大必备HTML动画工具
2015-03-15 16:44:31发表于2015-03-11 11:29| 6786次阅读| 来源CSDN| 26 条评论| ...Web设计编程语言HTML ...摘要:近三年HTML 5的增长迅猛,已经成为Web开发者当中最流行的语言之一。在本文将为您推荐十个HTML -
Animy.js,自己编写的功能丰富的html动画库
2015-06-08 14:43:53最近因为项目需要,本人制作了一款js的动画插件,可以用于完成各种js动画,比如移动、拉升、变色等等,所有动画常用的功能都已经实现,比如播放、暂停、停止、循环、加速、减速、反向播放、缓动、路径动画、锚点动画... -
HTML5小车动画
2012-02-02 21:45:15HTML5小车动画 -
HTML5 绘制动画
2018-04-25 21:59:58绘制动画虽然canvas的API并未直接提供支持动画的方法,但就其本身而言,在canvas中实现动画效果也很简单:只需要持续的更新并重绘画布就行了。这种持续的更新并重绘就叫做动画循环,它是所有动画的核心逻辑。在... -
HTML5动画
2016-10-06 23:33:03Html5动画效果这篇文章涉及到的内容有: 2D,3D的转换 过度效果 动画 多列 1.2D,3D转化2D,3D转化是指对元素的外观进行一些操作,例如: 移动元素 旋转 缩放 倾斜 3D转换 接下来以代码来演示如何进行2D,3D平面的一些... -
HTML5浪漫爱心表白动画在线演示程序
2014-02-12 23:50:10HTML5浪漫爱心表白动画在线演示.htm 修改一下情人节送女友 -
Unity3D教程:动画融合、动画层、动画混合、附加动画、程序动画、动画重放和取样
2015-06-05 18:00:44原帖地址:http://www.unitymanual.com/5323.html 动画脚本 Animation Scripting Unity's 动画系统允许你创建一个漂亮的动画蒙皮角色,动画系统支持动画融合,混合,添加动画,步调周期时间同步.动画层,控制动画... -
HTML5动画-翻转音乐盒效果动画
2017-07-06 10:03:09HTML5动画-翻转音乐盒效果动画 -
HTML5加载动画
2019-05-21 17:00:49HTML5 Canvas奇幻色彩Loading加载动画 之前我们分享过很多基于CSS3的Loading加载动画,通过CSS3的高级特性,可以制作出形态各异的Loading加载动画组件。今天给大家带来的这款Loading加载动画是基于HTML5Canvas的... -
html-动画制作
2019-06-20 15:05:29视频能很方便的实现我们h5很难制作的动画,那么我们怎么将视频导出成为html canvas动画呢? AE + 插件Bodymovin.zxp 这样就可以导出一份data.json(动画工程文件)和一份图片文件夹(里面包含着各样的帧图图片) 将... -
html5动画特效
2018-03-23 10:31:56HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE678之类的浏览器了。下面精选的几款HTML5 3D动画,希望你会喜欢。1、HTML5 SVG 3D空间模型 可拖拽缩放这是一个基于HTML5和SVG的3D空间模型,... -
HTML简单动画制作
2019-08-12 19:37:54HTML简单动画制作(圆移动变色) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆</title> <style> .circle{ width: 100px; ... -
html渐变动画
2018-07-17 16:13:33DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">... -
HTML5特效动画
2019-05-21 17:06:03HTML5 Canvas 鼠标滑过3D动画背景 在网页中我们经常会设置元素的背景,简单点的设置背景颜色,复杂的就设置背景图片。今天给大家分享一个将HTML5canvas动画作为网页背景的例子,将canvas置于文本底部,canvas上绘制...