Open hzzzzzzzq opened 2 years ago
我们来聊聊 css3 的一些新特性,但是不会仔细的去讲,会让你们了解一个大概,具体的可以自行去 MDN 查看。
css3
MDN
圆角,顾名思义,其实就是个格子的四个角设置圆角,设置方式也很简单。就简简单单提一下。
.main { width: 100px; height: 100px; border-radius: 10px; }
我们来看效果,其实就是四个角设置一个弧度。
在 css3 中,增加了阴影,以前的实现只能用图片,或者在添加一个阴影格子来实现。
语法很简单,就是直接使用 box-shadow 来设置。
box-shadow
.shadow { box-shadow: 水平阴影位置偏移 | 垂直阴影位置偏移 | 模糊距离 | 阴影大小 | 阴影颜色 | 阴影开始方向; }
.main { width: 100px; height: 100px; background-color: #f2cda5; box-shadow: 5px 5px 10px #999; }
什么是过渡呢?其实很好理解,类似于动画,在两个切换之间,让它看起来有一个过渡。
我们来举个例子,鼠标放上时变色。
.main { width: 100px; height: 100px; background-color: #f2cda5; } .main:hover { background-color: #1890ff; transition: all 2s; /* 设置一个两秒的过渡 */ }
我们来看看效果吧。
很明显,有了一个缓慢变色的过程,这就是过渡。
transform 允许我们做一些旋转、缩放、倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
我们也举一个简单的例子,就是翻转。
.main { width: 100px; height: 100px; background-color: #f2cda5; transform: rotate(45deg); }
在这里,我们添加了 rotate 对元素进行翻转 45度 角。
rotate
45度
我们来看看结果吧,就是这么神奇。
MDN 中的定义。
CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧
我们还是使用一个简单的例子来演示一下旋转、变色、放大。
.main { width: 20px; height: 20px; background-color: #f2cda5; animation: turnAround 2s ease 0s infinite; } @keyframes turnAround { 0% { transform: rotate(0deg); width: 30px; height: 30px; } 25% { transform: rotate(45deg); background-color: #f8dca3; width: 40px; height: 40px; } 50% { transform: rotate(90deg); background-color: #c6ce93; width: 50px; height: 50px; } 75% { transform: rotate(135deg); background-color: #95b5c0; width: 60px; height: 60px; } 100% { transform: rotate(180deg); background-color: #1890ff; width: 70px; height: 70px; } }
我们来看看实现动画的效果。
媒体查询,第一次听到肯定很多人都觉得很奇特,那么它是做什么的呢?
具体的可以去查看 MDN 媒体查询,我们来看看上面对媒体查询的解释。
媒体查询(Media queries)非常实用,尤其是当你想要根据设备的大致类型(如打印设备与带屏幕的设备)或者特定的特征和设备参数(例如屏幕分辨率和浏览器视窗\宽度)来修改网站或应用程序时。
当然理论很难理解,我们举一个简单的例子。
我们来看看代码。
.main { height: 200px; width: 200px; background-color: #f2cda5; } @media screen and (max-width: 600px) { /* 媒介查询,最大宽度小于等于 600 时,显示的样式 */ .main { background-color: #95b5c0; } }
<div class="main"></div>
我们来看看结果。
可以看到,在宽度 600 的时候,颜色发生了变化,所以,媒体查询 max-width 定义了,宽度最大 600 或以下生效。
600
max-width
flex 布局,在这里就不进行赘述了,在我的 flex 文章中,已经详细进行叙说了,有兴趣的可以直接去看。在这里,我就直接放一下 flex 的属性了。
flex
flex-direction
flex-wrap
row nowrap
0
1
auto
flex-grow
flex-shrink
flex-basis
0 1 auto
item
align-items
css3 新特性 - 常用
我们来聊聊
css3
的一些新特性,但是不会仔细的去讲,会让你们了解一个大概,具体的可以自行去MDN
查看。圆角 - border-radius
圆角,顾名思义,其实就是个格子的四个角设置圆角,设置方式也很简单。就简简单单提一下。
我们来看效果,其实就是四个角设置一个弧度。
阴影 - box-shadow
在
css3
中,增加了阴影,以前的实现只能用图片,或者在添加一个阴影格子来实现。语法
语法很简单,就是直接使用
box-shadow
来设置。例子
过渡效果 - transition
什么是过渡呢?其实很好理解,类似于动画,在两个切换之间,让它看起来有一个过渡。
我们来举个例子,鼠标放上时变色。
我们来看看效果吧。
很明显,有了一个缓慢变色的过程,这就是过渡。
翻转 - transform
transform 允许我们做一些旋转、缩放、倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
我们也举一个简单的例子,就是翻转。
在这里,我们添加了
rotate
对元素进行翻转45度
角。我们来看看结果吧,就是这么神奇。
动画 - animation
MDN 中的定义。
我们还是使用一个简单的例子来演示一下旋转、变色、放大。
我们来看看实现动画的效果。
媒体查询 - @media
媒体查询,第一次听到肯定很多人都觉得很奇特,那么它是做什么的呢?
具体的可以去查看 MDN 媒体查询,我们来看看上面对媒体查询的解释。
当然理论很难理解,我们举一个简单的例子。
我们来看看代码。
我们来看看结果。
可以看到,在宽度
600
的时候,颜色发生了变化,所以,媒体查询max-width
定义了,宽度最大600
或以下生效。弹性盒子 - flex
flex
布局,在这里就不进行赘述了,在我的 flex 文章中,已经详细进行叙说了,有兴趣的可以直接去看。在这里,我就直接放一下flex
的属性了。容器属性
flex-direction
和flex-wrap
两个属性的简写方式,默认值为row nowrap
。项目属性
0
。0
,如果空间又剩余,也不放大1
,如果空间不足,该项目会缩小。auto
,即项目的本来大小。flex-grow
,flex-shrink
,flex-basis
三个属性的缩写,默认值为0 1 auto
item
可以有其他项目不一样的对齐方式,可以覆盖容器属性中align-items
属性,默认值为auto
。参考资料