一行代码渲染头像

一行代码渲染头像_第1张图片

哈喽!C站的小伙伴,由于最近一直在学习 java,很久没有来C站了,前一阵很火的头像,只需要一行 css3代码就搞定了,快来看看吧!

1.html部分

简简单单,一个盒子放上我们的头像,后面会使用 js 操作它,整体思路就是css3新特性渲染,借助 js 更换图片,对不同图片进行200X200的渲染。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <link rel="stylesheet" href="../css/4.css">
head>
<body>
    <div class="box">
        <img src="../image/头像.jpg" alt="" width="200" height="200" id="wo">
    div>
    <input type="file" id="tou">
body>
html>

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部分

<script>
    var fileName = document.getElementById("tou");
    var img = document.getElementById("wo");
    fileName.onchange = function(){
        img.src = URL.createObjectURL(this.files[0]);
    }
</script>

效果演示:

好了,这次分享就到这了,白白ヾ(•ω•`)o
一行代码渲染头像_第2张图片

你可能感兴趣的:(CSS,html5,html,javascript,css3,css)