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
html: <button id="showToast">此按钮是测试toast的例子</button> CSS: /*手机*/ @media screen and (max-width:600px) { /* toast start */ @-webkit-keyframes toastAnima ...
分类：
其他好文 时间：
2020-03-15 18:54:16
阅读次数：
61
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 /* 定义动画 */ 8 @keyframes e ...
分类：
Web程序 时间：
2020-03-14 16:50:17
阅读次数：
80
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>loading动画</title> 6 <style type="text/css"> 7 @keyframes loading{ 8 fr ...
分类：
Web程序 时间：
2020-03-14 16:41:32
阅读次数：
60
<!-- CSS3 animation动画： 1、@keyframes 定义关键帧动画 2、animation-name 动画名称 3、animation-duration 动画时间 4、animation-timing-function 动画曲线linear(匀速)|ease(缓冲)|steps( ...
分类：
Web程序 时间：
2020-03-14 16:36:50
阅读次数：
79
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>旋转的风车</title> 6 <style type="text/css"> 7 @keyframes fengche{ 8 form{ ...
分类：
Web程序 时间：
2020-03-14 16:27:41
阅读次数：
76
CSS3 动画 动画的基本使用 制作动画分为两不 先定义动画 再使用(调用)动画 用keyframes定义动画(类似定义类选择器) 元素使用动画 动画序列 0% 是动画的 开始 ，100% 是动画的 完成 ，这样的规划就是动画序列 再 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果 ...
分类：
Web程序 时间：
2020-03-09 21:08:55
阅读次数：
81
轻松实现带图片旋转立方体盒子 需要使用 transform，@keyframes， animation这三个重要的属性 实现基本的布局，让父盒子成为3D的舞台，让父盒子X,Y轴各转20deg方便我们观察 <div class="parbox"> <div class="son before"></d ...
分类：
Web程序 时间：
2020-03-01 14:28:38
阅读次数：
106
html部分： <div class="mode"> <p class="hu"></p> <p class="z" id="z"></p> <p class="center"></p></div> css部分： //可以采用@keyframes结合animation 或者直接js控制c3 动态控制 ...
分类：
Web程序 时间：
2020-02-27 17:32:54
阅读次数：
98
