这是最终实现的效果，类似于微信对话框的样式。 分析一下这个对话框的结构，由一个小三角形和一个长方形构成。长方形很容易就可以实现，重点是如何用CSS3做出一个小三角形。 一、如何生成一个三角形 总结：三角形是由设置宽度高度为0，由边框构成的正方形，分别设置边框四个边的样式，得到四个三角形拼凑在一起的效 ...
分类：
Web程序 时间：
2019-09-29 21:51:49
阅读次数：
156
这是我用js和css3，实现的vue transition组件相同的效果核心js 全部代码 ...
分类：
其他好文 时间：
2019-09-28 18:31:04
阅读次数：
77
CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率 ...
分类：
Web程序 时间：
2019-09-27 19:42:01
阅读次数：
130
1、transform: 旋转rotate、移动translate、缩放scale、扭曲skew transform:rotate(±30deg) 正数：顺时针旋转，负数：逆时针旋转。 旋转 transform:translate(100px,20px) translateX translateY ...
分类：
Web程序 时间：
2019-09-26 18:43:23
阅读次数：
181
Animation animation属性是以下属性的一个简写属性形式。 初始值 animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。 一个圆球的不同animation！ 原文：https://developer.mozilla.org/zh- ...
分类：
Web程序 时间：
2019-09-26 18:42:02
阅读次数：
133
方法一 ：使用弹性布局 方法二 ：CSS3 transform 属性 父级元素定位 子集元素加属性： position: absolute; top: 50%; transform: translateY(-50%); 方法三： 使用伪元素和vertical-align: middle; .pare ...
分类：
Web程序 时间：
2019-09-26 00:48:43
阅读次数：
167
在HTML中，除了能在JS中制作动画外，还能在CSS中设置动画，需要用到CSS3的animation属性 如何使用animation属性呢？ 首先，需要定义一个动画的样式 @keyframes 样式名{ } 里面可以写从0到100的百分数 0%{此时的样式： left：300； top：300； } ...
分类：
Web程序 时间：
2019-09-25 12:08:47
阅读次数：
98
3D变形（CSS）transform 2d x y 3d x y z CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图 简单记住他们的坐标： x左边是负的，右边是正的 y 上面是负的， 下面是正的 z 里面是负的， 外面是正的 rotateX() 就是沿 ...
分类：
Web程序 时间：
2019-09-23 22:31:06
阅读次数：
125
1、对vertical align的理解？ 目前还未理解透， "深入理解css中vertical align属性" 2、对Css3 Transform 各种变形旋转理解了吗？ "回顾" 3、white space 属性记住了吗？ 规定段落中的文本不进行换行 "CSS white space 属性" ...
分类：
其他好文 时间：
2019-09-23 15:11:00
阅读次数：
79
1、绝对定位不占位置吗？ 绝对定位 absolute不占位置完全浮动，相对定位 relative会占有位置。 2、今天刚接触到CSS3 transition 属性，现在还记得怎么用吗？ "CSS3 transition 属性" 3、之前自己写的定位你又忘记了，希望你现在要记住 position: f ...
分类：
其他好文 时间：
2019-09-23 15:01:34
阅读次数：
72
