CSS3的 transition 属性用于状态过度效果！ 1、语法： 上以语法兼容各浏览器。 2、transition含有四个部份设置，各部份设置如下： a) property ：规定设置过渡效果的 CSS 属性的名称，可选值如下： 比如： transition: width 3s; 只让宽度产生动 ...
分类：
Web程序 时间：
2018-06-29 14:14:56
阅读次数：
680
1、transition属性 transition--过渡--补间动画 transition-property: 设置属性以动画效果执行。all或者具体属性 transition-duration: 动画执行时间 transition-delay: 动画演示时间 transition-timing- ...
分类：
Web程序 时间：
2018-06-29 01:10:29
阅读次数：
358
前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的，具体请自行详看文档介绍：https://vuefe.cn/v2/guide/migration.html#过渡。在使用2.0版本做过渡效果的时候，虽然比1.0版本强大很多，但是实践过程中还是踩了一些不应该踩但是还是踩了的坑。虽然官网文档已 ...
分类：
其他好文 时间：
2018-06-28 13:52:43
阅读次数：
166
强无敌。 是否厌倦了页面枯燥的跳转？ 试试这样的跳转吧。 Duration:表示滤镜特效的持续时间(单位：秒) Transition:滤镜类型。表示使用哪种特效，取值为0-23。 <Meta http-equiv="Page-Enter" Content="revealTrans(duration= ...
分类：
Web程序 时间：
2018-06-21 13:52:23
阅读次数：
180
.tooltip .tooltiptext { visibility: hidden; /* 淡入 - 1秒内从 0% 到 100% 显示: */ opacity: 0; transition: opacity 1s;} .tooltip:hover .tooltiptext { visibilit ...
分类：
其他好文 时间：
2018-06-19 18:28:33
阅读次数：
130
1.边框渐变 如： .arrow div {transition: border-color 0.5s ease-in-out; } .arrow div:hover {border-color: #009688; } 2.display的flex属性使用详解 flex的兼容性在pc端还算阔以，但是 ...
分类：
Web程序 时间：
2018-06-18 18:26:16
阅读次数：
205
官网上关于过渡属性的值： transition-timing-function 的值 有一下特点： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width= ...
分类：
其他好文 时间：
2018-06-16 15:13:20
阅读次数：
209
上一节中我们学会了如何旋转x轴标签以及自定义标签内容，在这一节中，我们将接触动画（transition） 首先，我们要在页面上添加一个按钮，当我们点击这个按钮时，调用我们的动画。所以，我们还需要在原来的基础上添加两个东西。 添加一个按钮 <div id="option"> <input name=" ...
分类：
Web程序 时间：
2018-06-15 13:08:50
阅读次数：
283
1、需求 需要用简单动画的形式将一组图片进行展示，图片数量不固定 2、效果如下: 3、思路 说到动画，首先想到使用-webkit-transition:;因为这个最简单好用,首先将图片都放在左侧，然后根据图片数量计算每个图片的左边距，这样就可以依次排列了。然后就是设置图片所在div的padding值 ...
分类：
Web程序 时间：
2018-06-15 12:55:47
阅读次数：
893
需求：点击某个标签，紧随其后的ul列表展开或者关闭并有transition效果。 难点：ul 里面的 li 数量未知，ul 高度不定，需要获取 li 数量乘以 li 高度然后计算出 ul 高度。 直接上代码： ...
分类：
其他好文 时间：
2018-06-13 14:38:08
阅读次数：
928
