前言 上一篇 css3 动画（一） transition 中，介绍了 transition 的用法。其中 transition 包含四个可设置的属性： 有过渡效果的属性 过渡时长 过渡函数？ 过渡时延 其中，1、2 以及 4 都挺好理解的，但是 3 是个什么东西？其实 3 是 css3 中的 tim ...
分类：
Web程序 时间：
2020-06-02 11:07:35
阅读次数：
84
一、移动端基础 二、视口 视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口（layout viewport） 2.2 视觉视口（visual viewport） 2.3 理想视口（ideal viewport） 2.4 总结 2.5 ...
分类：
移动开发 时间：
2020-06-02 00:01:31
阅读次数：
84
随着技术的发展，目前css已经发展到了第三阶段css3.css3能够支持更多的动效，以前需要用js来实现的动画、过渡，计算等功能，如今大多都能够用css来实现，而且性能更佳。当然，随着业务的需要，在编写css过程当中，为了能够让css具备js的可复用性，灵活性、模块化开发以及更好的管理样式文件，像s ...
分类：
Web程序 时间：
2020-06-01 13:40:32
阅读次数：
85
原文地址：https://www.xksblog.top/the-p... text-overflow是CSS3中的属性，它规定了当文本溢出其包含元素时以何种方式显示。但在使用的时候，有时会发现这个text-overflow设置了属性怎么不起作用呀？现在我们就来踩踩这里面的坑。 text-overf ...
分类：
其他好文 时间：
2020-06-01 13:33:26
阅读次数：
54
弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。 定义一个弹性盒子 在父盒子上定义display属性： #box{ display: -webkit-flex; //webkit内核浏览器的兼容设置，下同 display: fle ...
分类：
Web程序 时间：
2020-06-01 00:26:13
阅读次数：
92
css3动画 animation 使用css3动画需要2步 为指定元素添加animation属性及属性值。各浏览器私有属性在前，通用属性在最后。 使用@keyframes定义动画过程名称。各浏览器私有属性在前，通用属性在最后。 animation定义动画的属性值。 @keyframes规则内指定一个 ...
分类：
其他好文 时间：
2020-05-31 16:30:10
阅读次数：
53
原理 父级元素 relative，子元素 absolute，然后通过top、left、right、bottom来设置具体出现位置。 DOM结构 <div class="wrapper-dashed"> <div class="dashed"></div> </div> CSS样式 .wrapper- ...
分类：
Web程序 时间：
2020-05-31 16:15:29
阅读次数：
88
基础准备对于这个实现，我们需要一个简单的 div ，并且样式类名为 ball ： HTML 代码: <div class="ball"></div> 我们将使用 Flexbox 布局，把球放到页面中间，尺寸为 100px * 100px，背景色为橘黄色。 CSS 代码: body { display ...
分类：
Web程序 时间：
2020-05-31 11:22:13
阅读次数：
78
在flex出现之前我们做页面都是使用的左右浮动，inline-block，表格等布局方式来实现页面的各种布局，在这些写法中由于浏览器的兼容问题还需要写很多的hack来解决兼容问题。','2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已... ...
分类：
Web程序 时间：
2020-05-31 10:49:47
阅读次数：
83
css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要网络请求，既耗带宽又耗时间，下面我将介绍用css3的渐变来改善这一问题。 linear-gradient 基本用法 想要知道线性 ...
分类：
Web程序 时间：
2020-05-30 20:18:00
阅读次数：
69
