css3 div跳动动画_那些年我们学过的css3技巧

随着2013年以后，移动互联网的普及，到今天的2020年，css3已经不再是，高级#前端开发#师用来分享的技巧了，已经成为广大的前端从业者，必须掌握的基本技能,掌握css3是一个合格的前端工程师必备的基础能力。

以前需要使用图片实现的一些效果，现在使用css3可以直接实现，提高了效果和体验，也提高了开发者对效果的控制力。比如以下几个作品：

css3实现钢琴

css3实现奔马

css3实现风车

很多开发者担心css3的兼容性，建议大家使用时，根据项目情况，进行兼容性调查，例如使用caniuse网站。

点击图片查看主流浏览器的支持情况

css3 常用到的几个属性：

• border-radius 圆角边框
• box-shadow 盒子阴影
• animation 帧动画
• transition 过渡动画
• 以及各种新增选择器

---

接下来，看一下 border-radius的使用情况

border-radius:2em; /*基本使用*/

border-radius: [左上] [右上] [右下] [左下]

/*高级使用可以定义各个角的数值*/

单位可以为 像素px，em，rem以及 百分比。

比较常用的几个效果：

圆形

border-radius:50%;

或者元素为 方形，例如 长宽为100px，border-radius则为50px

border-radius：50px

半圆

div {

width: 200px;

height: 100px;

background: red;

border-radius: 100px 100px 0 0;

}

当然也可以给图片使用，例如大家常见的圆形头像，如果不使用圆形图片的情况下，使用

border-radius也是可以实现的，例如微博的头像

点击图片查看大图

感谢大家观看文章，后续更新敬请期待！