在移动端想实现一个弹出框渐渐出现和消失的效果。由于用的是vue.js,所以写法有些独特,用变量控制是否显示类名。但是核心解决方法就是CSS3的animation属性应用还有CSS中的z-index应用，必须初始化定义让弹出框在最底部。还有就是opacity属性的应用，这样才有渐健弹出和渐渐消失的效果 ...
分类：
移动开发 时间：
2018-12-03 19:57:12
阅读次数：
370
点击查看效果 在前端开发中经常会遇到项目展示，往往会采用图片方式来描述。众多网站中，普遍采用CSS3的scale()方法来实现交互。 在前端开发中经常会遇到项目展示，往往会采用图片方式来描述。众多网站中，普遍采用CSS3的scale()方法来实现交互。 在前端开发中经常会遇到项目展示，往往会采用图片 ...
分类：
Web程序 时间：
2018-11-26 20:01:36
阅读次数：
409
transform布局不会脱离文档流 transform布局不会脱离文档流，也不改变文档流的大小和位置。 width offsetWidth clientWidth offsetLeft ... 设置元素的 transform 属性后，上述等属性均不会发生改变 ...
分类：
其他好文 时间：
2018-11-23 22:00:21
阅读次数：
1146
预期效果：一行显示三张图片，宽度随屏幕宽度而改变。~~css3的新单位vw vh由于兼容性问题就不提了。~~ 一个比较好的方案是：设置垂直方向的 padding 撑开容器 在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding的百分比数值计算。 margin, padding ...
分类：
Web程序 时间：
2018-11-23 20:49:18
阅读次数：
219
下图注册按钮的边框有渐变效果，如果让你来实现，你会怎么做呢 个人觉得，省事的做法，直接让UI给背景图片就可以了，如下图 不过这种做法感觉不太灵活，如果要修改border的渐变颜色，就需要UI重新做图。那应该怎么做呢？ 我首先想到的方法就是用CSS3的border-image属性 border-ima ...
分类：
其他好文 时间：
2018-11-21 12:25:57
阅读次数：
822
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于 ...
分类：
其他好文 时间：
2018-11-21 10:21:58
阅读次数：
1830
一、css3的@media媒体查询 1、定义和使用 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要开发响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。 语法： 参数解释： media ...
分类：
移动开发 时间：
2018-11-19 21:37:07
阅读次数：
227
1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. 如果要强制两行的话，得用到css3的知识 overflow:hidden; text-overfl ...
分类：
Web程序 时间：
2018-11-15 11:03:30
阅读次数：
457
最近遇到一个需求，如下图，input框要有透明效果 首先想到的方法是CSS3的 opacity属性，但事实证明我想的太简单了 这个属性虽然让input框有透明效果，同时文字也会有透明效果，导致文字不清晰，如下图 于是我开始思考其它方式，最后想到了通过透明背景图来实现 背景图虽然能够解决问题，但会造成 ...
分类：
Web程序 时间：
2018-11-15 01:38:44
阅读次数：
435
在css3 中，有一个转换效果，也可以替代js,并且比 js 做得好，那就是转换，即transform 属性，只需要个这个属性加上值，就可以实现转化效果了;有三种值，平移（translate），旋转(rotate)*和缩放(scale); 1. transform:translate 初始状态： 加 ...
分类：
Web程序 时间：
2018-11-11 20:15:08
阅读次数：
286
