前端图片、动画基本知识
来源:互联网 发布:nginx lua 写入txt 编辑:程序博客网 时间:2024/05/22 22:12
一、最原生的方法实现图片或者动画
1、img
作用:展示一个图片
使用方法:
<img src="图片路径" alt="图片没有加载成功出现的内容" data-src="自定义属性,不属于html规范"></img>
注意:data-src:一般会用于懒加载(在瀑布流视图中经常用到,鼠标滚轮)
ps:懒加载和预加载的区别
懒加载:当需要用户看到内容的时候再去请求优点:减轻服务器压力,减少用户流量方法:设置data-src属性预加载:提前加载图片等相关资源优点:加载速度快,响应快方法: 1、提前把图片加载,放在屏幕外面 2、创建html元素,但不插入dom文档流 3、ajax异步加载补充:屏幕可视窗口大小:windows.innerHeight滚动条的距离:windows.pagYoffset
2、svg
作用:展示图形
使用方法:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /></svg>
特点:svg是可伸缩矢量图形的缩写;(svg本身,定义了一些图像的形状,滤镜等);使用xml描述;放大或缩小,图片质量不会损失
3、canvas
作用:xml描述2D图形,通过像素进行渲染
特点:弱文本渲染;能够以png或者jpg存储;不支持事件处理
4、css动画
作用:@keyframes
简介:
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。一共有8个属性(很好记的)animation:是所有属性的简写animation-name:动画的名字animation-duration:持续时间(必须)animation-timing-funciton:速度曲线animation-delay:何时开始animation-iteration-count:播放次数,默认为1animation-direction:下一个周期是否逆向播放animation-play-state:是否正在播放animation-fill-mode:动画之外时间的状态
5、Js动画
理解:这个很好理解了,通过js改变dom元素的位置,实现动画效果
二、外部库函数
1、three.js
3D模型库
github地址
2、WebGL
MDN介绍:
WebGL (Web图形库) 是一种JavaScript API,用于在任何兼容的Web浏览器中呈现交互式3D和2D图形,而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API,可以在HTML5 <canvas> 元素中使用。
阅读全文
0 0
- 前端图片、动画基本知识
- 前端基本知识
- web前端的基本知识
- 前端基本知识(一)
- 前端基本知识题目
- 【web前端】JavaScript实现图片幻灯片滚动播放动画效果
- 前端动画
- Android 属性动画:基本知识总结
- chapter10_1图片读取像素基本知识
- 【翻译】前端开发者应掌握的基本知识
- 前端必须会的基本知识题目
- 图片动画
- 图片动画
- 图片 动画
- 图片动画
- 动画:图片动画
- web前端之JavaScript DOM编程艺术之用JavaScript实现动画效果拓展(预览图片)
- 前端动画大乱炖
- mxnet多层感知机训练MNIST数据集详解【转】
- MongoDB学习笔记
- Yii2.0数据操作【使用createCommand()函数】
- 一个子类化重绘仿QQ2009
- HPU 1413 StarFarming (最短路)
- 前端图片、动画基本知识
- POJ 1144 Network(求无向图中的割点)
- 数据结构之链表(四)
- Parenthesis CSU
- CodeForces
- 一步一步的搭建Tomcat服务器 + servlet + android客户端
- debug查看dos加载汇编源程序到内存过程分析
- 洛谷 3379 最近公共祖先(LCA 倍增)
- RecyclerView下划线