上一篇讲过css动画transform transition的语法，这一节展示自己做的几个小例子加深印象 1. 线条动画效果 代码：最外层div包含2个小的div : a和b. a有左右边框(高度变化)， b有上下边框（宽度变化）, 默认不显示，鼠标移上去时，a的高度和b的宽度发生变化，交叉效果 2 ...
分类：
Web程序 时间：
2018-08-16 01:01:20
阅读次数：
242
css过渡：元素从一种样式逐渐改变为另一种的效果。过渡所需的条件：1.所过渡的元素必须有css样式。2.必须有过渡时间。以下是过渡元素的属性：transition:简写属性，用于在一个属性中设置四个过渡属性。transition-property:规定应用过渡的 CSS 属性的名称。transiti ...
分类：
Web程序 时间：
2018-08-14 14:47:17
阅读次数：
216
1. 单元素/组件的过渡 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 实例： 2. 过渡的类名 在进入/离开的过渡中，会有 6 个 class 切换：v- ...
分类：
Web程序 时间：
2018-08-13 17:59:51
阅读次数：
194
概述 概述 纯CSS实现蜂窝六边形的个性相册 纯CSS实现蜂窝六边形的个性相册 详细 详细 代码下载：http://www.demodashi.com/demo/12804.html 此案例主要用到CSS3的 transform 和 transition属性，还有nth-child() 选择器 一、 ...
分类：
Web程序 时间：
2018-08-10 10:50:53
阅读次数：
255
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 浏览器兼容性： Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -webkit-。 注释：Internet Explorer 9 以及更早的版 ...
分类：
Web程序 时间：
2018-08-08 23:20:10
阅读次数：
282
最近在类似于滴滴软件的一款小程序，工程确实有点大，很多东西都是第一次做。这次记录一下关于左滑删除的一个代码记录。主要的思想就是计算滑动距离的大小来使用css中的 transition 控制滑动的效果，主流的都是控制边距margin来达到左滑的效果。 根据我所拿到的ui，我所运用的是使用宽度和radi ...
分类：
微信 时间：
2018-08-08 17:38:40
阅读次数：
224
利用css的transition属性详解，上图就是利用transition效果做的一个按钮。 transition属性：//举例子:transition:all 1s ease;transition:全部 1秒 缓和 transition: property duration timing-func ...
分类：
Web程序 时间：
2018-08-07 15:08:50
阅读次数：
437
一、使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时，浏览器会不停的执行重排（reflow）和重绘（repaint） 可以避免占用JS主线程 这边就不细说这两者具体的低优缺点。一般做2D动画的话,可以使用CSS3的transition或animatio ...
分类：
Web程序 时间：
2018-08-03 14:27:42
阅读次数：
219
transition .v-enter{} 当前组件刚进入时的样式 .v-enter-to{} 当前组件进入完成的样式 .v-enter-active{} 当前组件进入的过程中的样式 .v-leave 当前组件离开时的样式 .v-leave-to 当前组件离开完成时的样式 .v-leave-acti ...
分类：
其他好文 时间：
2018-07-30 20:19:36
阅读次数：
533
方法一： .container{ background-size: 100% 100%; transition: all 2s; } .container:hover{ background-size: 120% 120%; } 方法二： img{ transition: all 2s; } img ...
分类：
Web程序 时间：
2018-07-29 16:29:56
阅读次数：
169
