CSS3 动画 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。 指定至少这两个CSS3的动画属性绑定向一个选择器： 规定动画的名称 规定动画的时长 <style> div.div1:hover { animation: myfirst 2s; //设置动画名称和 ...
分类：
Web程序 时间：
2020-04-11 22:22:17
阅读次数：
159
一、制作关键帧： 1）@keyframes 动画名称{ from{开始} to{结束} } 2）@keyframes 动画名称{ 0%{} 中间可以添加任意关键帧 100%{} } 二、调用关键帧 animation: ①animation-name(动画名称） ②animation-duratio ...
分类：
Web程序 时间：
2020-04-08 20:45:26
阅读次数：
90
尽量使用css3动画，开启硬件加速 适当使用touch时间代替click时间 避免使用css3渐变阴影效果 可以用transform: translateZ(0) 来开启硬件加速 不滥用float。float在渲染时计算量比较大，尽量减少使用 不滥用web字体。web字体需要下载，解析，重绘当前页面 ...
分类：
移动开发 时间：
2020-04-06 17:34:37
阅读次数：
72
move.js是一款简单的支持CSS3动画的JavaScript库，对于对CSS3的操作不是很熟悉的人来说，使用move.js提供的方法操作CSS3动画更简单方便。 要想使用move.js提供的方法，首先应在我们的HTML页面中引入move.js： <!DOCTYPE html> <html> <h ...
分类：
Web程序 时间：
2020-03-27 20:01:25
阅读次数：
171
1 <!-- 一般用作活动专题网页制作，平常不太用 --> 2 <!-- transition-property 设置过渡的属性，例如：width height background-color 3 transition-duration 设置过渡时间，比如：1s 500ms 4 transitio ...
分类：
Web程序 时间：
2020-03-14 17:07:36
阅读次数：
76
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 width: 300px; 9 h ...
分类：
Web程序 时间：
2020-03-14 17:01:58
阅读次数：
77
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 width: 100px; 9 h ...
分类：
Web程序 时间：
2020-03-14 17:00:38
阅读次数：
81
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 width: 200px; 9 h ...
分类：
Web程序 时间：
2020-03-14 16:54:10
阅读次数：
64
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 width: 200px; 9 h ...
分类：
Web程序 时间：
2020-03-14 16:53:09
阅读次数：
117
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 width: 100px; 9 h ...
分类：
Web程序 时间：
2020-03-14 16:51:49
阅读次数：
61
