本文主要内容： 过渡：transition 2D 转换 transform 3D 转换 transform 动画：animation 过渡：transition transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画 ...
分类：
Web程序 时间：
2020-02-27 00:32:00
阅读次数：
115
动效设计一直都是最近几年前端开发的热门趋势之一。动画是Web和UI设计的主要内容。一个完全静止的网站，即使是使用了微妙的悬停状态，也可能感觉不一样。如果缺少动画，就像缺少必要的东西一样。幸运的是，有很多方法可以为你的网站添加动画。如果你仔细找找的话，会发现许多有趣的用来构建UI动效的工具，而这些工具也正在成为越来越多设计项目中不可或缺的催化剂。WebGL，JavaScript甚至HTML5都支持或
分类：
Web程序 时间：
2020-02-26 16:44:49
阅读次数：
82
最近，项目中遇到这样的问题。 要给这个tab的底部蓝线左右加上圆角。 然而，这个元素确实如上图所示，只是active的时候加了个underline的类，蓝线并没有单独的html。 若给这个span加上border-bottom-left-radius和border-bottom-right-radi ...
分类：
Web程序 时间：
2020-02-24 18:16:54
阅读次数：
104
参考 博客 1、 "中高级前端面试题（万字长文）" 2、 "大前端吊打面试官系列" 资料 1、 "HTML 5 教程" 2、 "CSS3 教程" 3、 "JavaScript 教程" 收费小册 "前端面试之道" 注：某大佬这本收费小册干货很多，有些参考其中的问题，就不列答案了。 写在前面的话 因为一 ...
分类：
其他好文 时间：
2020-02-24 12:45:16
阅读次数：
69
目录： 1.立方体2.动画3.设置动画的一些属性4.案例：无缝滚动5.web字体6.弹性布局7.多列布局8.弹性布局9.案例：伸缩盒子的flex属性的应用案例（菜单个数不限）10.伸缩盒子的align-items属性 设置侧轴对齐方式11.案例：伸缩盒子，宽高自适应 1、立方体 *transform ...
分类：
Web程序 时间：
2020-02-24 10:00:12
阅读次数：
71
CSS中一共有五种定位： position：static；默认值 position：absolute；绝对定位 position：relative；相对对定位 position：fixed；固定定位 position：sticky；粘性定位 其中，粘性定位是CSS3新增加的 兼容性比较差 定位的作用 ...
分类：
Web程序 时间：
2020-02-24 00:42:20
阅读次数：
87
Css3基础操作 . Css3? css3事css的最新版本 width. heith.background.border**都是属于css2.1CSS3会保留之前 CSS2.1的内容，只是添加了一些新的语法。CSS3 : border-radius :nth-of-type() backgroun ...
分类：
Web程序 时间：
2020-02-23 20:30:22
阅读次数：
97
1、@keyframes 定义关键帧动画2、animation-name 动画名称3、animation-duration 动画时间4、animation-timing-function 动画曲线 linear 匀速 ease 开始和结束慢速 ease-in 开始是慢速 ease-out 结束时慢速 ...
分类：
Web程序 时间：
2020-02-23 18:43:09
阅读次数：
75
1、transition-property 设置过渡的属性，比如：width height background-color2、transition-duration 设置过渡的时间，比如：1s 500ms3、transition-timing-function 设置过渡的运动方式 linear 匀 ...
分类：
Web程序 时间：
2020-02-23 18:23:51
阅读次数：
86
浏览器样式前缀 为了让CSS3样式兼容，需要将某些样式加上浏览器前缀： -ms- 兼容IE浏览器-moz- 兼容firefox-o- 兼容opera-webkit- 兼容chrome 和 safari 比如： div { -ms-transform: rotate(30deg); -webkit-t ...
分类：
Web程序 时间：
2020-02-23 18:19:31
阅读次数：
70
