css3水墨按钮动画

水墨风格的按钮一直是网页设计中非常流行的一种风格，它简洁而又美观，给人留下淡雅清新的印象。今天我们来学习一下如何用CSS3实现水墨按钮动画。

.button{
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 20px;
    font-family: Arial, sans-serif;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.5s ease;
}
.button:before{
    content: '';
    display: block;
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: rgba(255,255,255,0.2);
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: -1;
    transition: all 0.5s ease;
}
.button:hover{
    color: #FFFFFF;
    background-color: #333333;
}
.button:hover:before{
    transform: translate(-50%, -50%) rotate(45deg) scale(2);
}
    

首先定义一个button的class，设置基本的样式，然后设置一个:before伪类，用来实现水墨效果。通过绝对定位，将:before置于按钮上方并且设置z-index为-1，使其处于按钮背后。通过transform属性来调整它的旋转、缩放和位置等样式。在按钮hover时，改变按钮背景色和字体颜色，同时通过改变:before的transform属性使水墨效果放大，达到动画效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！