今天登录掘金发现头像处有了一个小圣诞帽。很阔爱~~尝试在本地复现一次。最后效果如下。

效果图

实际效果可以在博客中查看。

核心代码

其中实现圣诞帽效果的核心代码如下

.happy:after {
            content: "";
            position: absolute;
            left: 25%;
            bottom: 30%;
            width: 90%;
            height: 90%;
            background-position: 50%;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/cap.12a740a.svg);
            transform: rotate(15deg);
            transform-origin: bottom right;
            transition: all .2s;
        }
.happy:hover:after {
            transform: rotate(20deg);
        }

完整代码

话不多说,直接放代码。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>模仿掘金的小圣诞帽</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        img{
            width: 100%;
            border-radius: 50%;
        }
        .happy{
            width: 100px;
            position: relative;
            background-repeat: no-repeat;
            flex: 0 0 auto;
        }
        
        .happy:after {
            content: "";
            position: absolute;
            left: 25%;
            bottom: 30%;
            width: 90%;
            height: 90%;
            background-position: 50%;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/cap.12a740a.svg);
            transform: rotate(15deg);
            transform-origin: bottom right;
            transition: all .2s;
        }
        .happy:hover:after {
            transform: rotate(20deg);
        }

    </style>
    
    
</head>

<body>
    <h1>模仿掘金的小圣诞帽</h1>
    
    <div class="happy">
        <img src="image.jpg" />
    </div>
    
</body>

</html>
最后修改:2018 年 12 月 22 日 01 : 38 PM
生活需要一些仪式感,比如手冲一杯咖啡:)