[分享]CSS3教程编发超长发

CSS3是前端开发中非常重要的一环，它可以实现很多想象不到的效果，如今我们就来使用CSS3编发超长发。/先定义全局的样式/ { margin: 0; padding: 0; boxsizing: bo...

CSS3是前端开发中非常重要的一环，它可以实现很多想象不到的效果，如今我们就来使用CSS3编发超长发。

/*先定义全局的样式*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*设置背景色*/
body{
    background-color: #f7d8ba;
}

/*定义头发中的单根细发*/
.hair{
    width: 3px;
    height: 100px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    transform-origin: bottom center;
}

/*用伪类after和before绘制真实的头发*/
.long-hair::after,
.long-hair::before{
    content: "";
    display: block;
    position: absolute;
    left: 50%;
}

/*绘制左边卷发*/
.long-hair::before{
    width: 80px;
    height: 80px;
    border-radius: 40px 40px 0 40px;
    transform: translate(-60px, -20px) rotate(-45deg);
    box-shadow: -4px -3px 0 #000;
    z-index: 1;
}

/*绘制右边卷发*/
.long-hair::after{
    width: 80px;
    height: 80px;
    border-radius: 0 40px 40px 40px;
    transform: translate(60px, -20px) rotate(45deg);
}

/*绘制头发主体*/
.long-hair{
    width: 3px;
    height: 1300px;
    position: relative;
    margin: 50px auto;
}

/*使用延迟和动画*/
.long-hair .hair{
    animation: hair 10s infinite;
}

/*定义动画*/
@keyframes hair {
    /*设置动画逐渐向上贴近*/
    0%{
        transform: rotate(-10deg) translateY(0%);
    }
    50%{
        transform: rotate(10deg) translateY(-20%);
    }
    100%{
        transform: rotate(-10deg) translateY(0%);
    }
}

/*最后加上点毛发的装饰*/
.long-hair::before,
.long-hair::after{
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: -5px;
    left: 50%;
    margin-left: -5px;
    background-color: #000;
    z-index: 2;
} 

经过以上的代码编写，我们就可以用CSS3来编发一头长长的头发啦，喜欢的小伙伴们快来尝试一下吧，相信它会是你收获满满的体验。