CSS3动画--过渡效果 transition 设置四个过渡属性 transition-property 过渡的名称 transition-duration 过度效果花费的时间 transition-timing function 过渡效果的时间曲线 transition-delay 过渡效果开始时 ...
分类：
Web程序 时间：
2017-08-19 00:52:54
阅读次数：
261
好久没写轮播图了，今天在vue上写了个超简单的，效果还ok。 .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用.moveLeft向左移动一个格子，造成滚动的假象，此时第二张图在第一个格子的位置； 这时候把第一个 ...
分类：
其他好文 时间：
2017-08-18 13:39:00
阅读次数：
170
1、设置transition设置过渡，添加transform设置形状，形成动画效果，如下： 此种方式比较小众，不易控制 2、添加animation属性，设置动画效果，如下： 以上百分比后的方括号内可以添加各种属性值，比如transform ratote、left。。。。。。添加left top等定位 ...
分类：
Web程序 时间：
2017-08-17 20:17:26
阅读次数：
300
Document 主要使用label+input来实现改变left的值,下面是核心代码，意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px); 当然要配合transition来实现 下面是效果 ON OFF ON OFF ON OFF 全 ...
分类：
其他好文 时间：
2017-08-17 00:49:24
阅读次数：
131
css的2d转换十分强大，能够在不使用js的情况下，实现页面的元素与用户之间更多动态的交互，增强用户体验。其中使用最多的就是hover伪类。 1、创建一个页面的div元素： 2、css中给定元素的样式： 3、浏览器解析的效果： 4、给第一个正方形加入鼠标点击后的效果css： 效果： 鼠标移动到正方形 ...
分类：
Web程序 时间：
2017-08-12 12:48:04
阅读次数：
225
<div class="ballContain"> <div v-for="ball in balls"> <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop" > ...
分类：
其他好文 时间：
2017-08-10 13:33:38
阅读次数：
145
下文转自http://www.cnblogs.com/ihardcoder/p/3859026.html 如demo（如果没有显示，请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/）所示，基本的效果是在点击“Translate”按钮后，蓝色区域透明度变为0， ...
分类：
其他好文 时间：
2017-08-09 13:10:14
阅读次数：
248
HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现; 当然最原始的你还可以使用w ...
分类：
Web程序 时间：
2017-08-09 11:28:32
阅读次数：
241
所需更改文件 App.vue template结构： <template> <div id="app"> <div id="nav"> <router-link to="/come">Come</router-link> </div> <transition :name="transitionNam ...
分类：
其他好文 时间：
2017-08-07 11:57:48
阅读次数：
512
3.jpg bg.png 主要知识点 ： 相对定位、绝对定位：子元素采用绝对定位，父元素要采用相对定位，简称“子绝父相”。 过渡效果： transition: 要过渡的属性（一般设置为all） 花费时间 运动曲线 何时开始 一般transition只设置前两个属性 其中运动曲线有： 以下为详细代码: ...
分类：
Web程序 时间：
2017-08-05 22:46:33
阅读次数：
406
