前端 - CSS 实现自适应文本的头像_个人文章 - SegmentFault 思否
欢迎关注我的公众号:前端侦探Ant-design 中有一个这样的头像组件,当字符串较长时,字体大小可以根据头像宽度自动调整,效果如下当然,这里是通过JS根据字符数量自动缩放文本实现的而现在,仅仅通过
顺晟科技
2022-09-13 13:52:11
98
大家已经见惯了用CSS3画的图标、LOGO、头像,这次***同学Rei给我们带来了用纯CSS3绘制的日本动漫《轻音少女》女主角秋山澪的动态头像。CSS3的强大再次霸气测漏!
请点击Demo查看效果,示例支持Chrome、Firefox、Opera、Safari等全系列的现代浏览器。
示例中用到的主要CSS3特性如下:
border-radius:绘制边框圆角。
transform:主要是旋转(rotate)和偏斜(skew),用于绘制各种形状。
animation:动画效果的实现,例如头发的飘动、眼睛的闪动。
只要掌握了这几个特性,你也能画出同样奇妙的CSS3动画,赶快试试吧!
相关链接:《用纯CSS3实现QQ Logo》
31
2022-10
19
2022-10
15
2022-09
13
2022-09
13
2022-09
13
2022-09