文章图片
哈喽！C站的小伙伴，由于最近一直在学习 java，很久没有来C站了，前一阵很火的头像，只需要一行 css3代码就搞定了，快来看看吧！
1.html部分
简简单单，一个盒子放上我们的头像，后面会使用 js 操作它，整体思路就是css3新特性渲染，借助 js 更换图片，对不同图片进行200X200的渲染。
Document - 锐客网
文章图片
2.css部分
-webkit-mask: linear-gradient(100deg,#000 10%, transparent 60%,transparent);
提示：很在乎兼容性的场景，目前慎用.box{
position: relative;
width: 200px;
height: 200px;
margin-top: 50px;
}
.box::after{
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url(../image/国旗.png);
background-size: cover;
/* 除了 webkit 内核的浏览器，其他浏览器的兼容不太友好 */
-webkit-mask:
linear-gradient(100deg,#000 10%,
transparent 60%,transparent);
}
3.js部分
>
var fileName = document.getElementById("tou");
var img = document.getElementById("wo");
fileName.onchange = function(){
img.src = https://www.it610.com/article/URL.createObjectURL(this.files[0]);
}
效果演示：
【CSS|一行代码渲染头像】好了，这次分享就到这了，白白ヾ(?ω?`)o
文章图片
推荐阅读
- 技术闲聊|emmet编辑a*5或 span*5，生成多个行内标签时，不会自动换行的解决方案
- CSS|CSS实现水滴动效
- 性能|SQL调优心得（二）（常见性能问题的优化）
- javascript|SegmentFault 创始人祁宁对话 C# 之父 Anders Hejlsberg
- MyGameLife|【MyGameLife】我的游戏职业生涯是从TS（TypeScript）开始的（2｜CSDN创作打卡）
- javascript|Delphi、C#之父Anders Hejlsberg首次访华 推广TypeScript
- Vue|Vue组件之间的数据共享
- 有道技术团队|有道词典Flutter架构与应用
- 数据结构与算法|算法——找出缺失的整数