• 学习前端，我将带头冲锋
• 希望前端大佬们给点建议噻
• 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

前言

上文带大家介绍了解了部分CSS3特性，本文将继续讲一些进阶的CSS3特性。

CSS3 过度

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

transition: width 2s;//宽度属性的过渡效果，时间为2s
transition: width 2s, height 2s, transform 2s;// 多项改变效果，宽度、高度

CSS3动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

animation: myfirst 5s;//myfirst为动画规则，@keyframes为创建规则

CSS3多列

在CSS3中，可以让文本内容在一行中，分多列展示。

column-count:3;// 3为文本内容分列数
column-gap:10px;// 10px为列与列之间相隔的距离

CSS3图片

• 创建圆角图片

img
{
   border-radius: 8px; // 也可使用百分比，创建头像类型的图片
}

• 创建响应式图片：即自动适配各种尺寸的屏幕

max-width: 100%;// 最大宽度为100%
height: auto;// 高度auto即可实现

• 图片滤镜

filter: blur(4px);//为图片添加模糊度
filter: brightness(250%);//为图片添加亮度
filter: contrast(100%);// 为图片添加对比度

CSS3 框大小

在传统的CSS中，使用padding 会使盒子被撑大，使用box-sizing属性，会使padding的距离包括在盒子的宽高。

box-sizing: border-box;

CSS3按钮

在原生HTML的Button按钮确实非常丑，使用CSS3之后，能让按钮变得更加好看，仿真！

background-color: #4CAF50; // 给按钮添加背景色
border: none; // 去除掉边框
color: white; // 按钮文字颜色
padding: 15px 32px; // 内边距
text-align: center; // 文字居中
font-size: 16px; // 字体大小，也即是按钮大小
cursor: pointer; // 鼠标悬浮出现手势

• 鼠标悬浮展示效果

// 使用伪类：hover,实现悬浮按钮背景色变红，字变白色
:hover { background-color: red; color: white; }

• 禁用按钮效果

cursor: not-allowed;

总结

本文我们看到了许多动画相关的效果，其实在实现很多特效的时候，如果使用图片或者一些插件是非常耗费时间的，如果我们使用CSS3的相关特性，可以非常简单使用一些属性即可使用，不过值得注意的是在某些浏览器没有很好的兼容这些属性。