html+css 实现水波纹按钮

news2024/9/22 7:30:45

前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

支持一下

文章目录

效果
原理解析
- 上代码，可以直接复制使用
- - 目录
  - 图片
  - html
  - css

效果

水纹效果

原理解析

1.给每一个按钮添加一个hover效果，并给每一个按钮添加一个子元素带水波纹的背景图。
水纹子元素带背景图

2.当按钮上有鼠标时，hover效果触发，改变这个子元素（带背景图的位置和字体颜色）。
水纹hover时的动画

3.具体的变换参数，直接看代码，可以一键复制，查看效果

上代码，可以直接复制使用

图片

水纹图片

html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>html+css 实现水波纹按钮</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
<div class="container">
    <h1 style="text-align: center;color:#000;margin-bottom: 50px;padding-top: 50px">html+css 实现水波纹按钮</h1>
    <div class="btn-box">
        <div class="btn">
            <span>点赞</span>
            <div class="wave"></div>
        </div>
        <div class="btn">
            <span>关注</span>
            <div class="wave"></div>
        </div>
        <div class="btn">
            <span>收藏</span>
            <div class="wave"></div>
        </div>
        <div class="btn">
            <span>转发</span>
            <div class="wave"></div>
        </div>
    </div>
</div>

</body>

</html>

css

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
.container{
    /* 100%窗口高度 */
    height: 100vh;

    /* 渐变背景 */
    background: linear-gradient(200deg,#e7f0fd,#accbee);
}

.btn-box{
    width: 500px;
    /* 弹性布局 */
    display: flex;
    /* 横向排列 */
    flex-direction: row;
    /* 允许换行 */
    flex-wrap: wrap;
    margin: 0 auto;
    /* 平均分配宽度 */
    justify-content: space-around;
}
.btn-box .btn{
    /* 相对定位 */
    position: relative;
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #00adff;
    border: 2px solid #00adff;
    font-size: 18px;
    margin: 20px 0;
    /* 字间距 */
    letter-spacing: 4px;
    cursor: pointer;
    /* 溢出隐藏 */
    overflow: hidden;
}
.btn-box .btn span{
    position: relative;
    z-index: 1;
    /* 动画过渡 */
    transition: 1s;
}
.btn-box .btn .wave{
    /* 绝对定位 */
    position: absolute;
    top: calc(100% + 22px);
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00adff;
    transition: 1s;
}
.btn-box .btn .wave::before{
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    background-image: url("./wave.png");
    width: 100%;
    height: 22px;
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: animate 0.5s linear infinite;
}

/* 定义动画 */
@keyframes animate {
    0%{
        background-position-x: 0;
        background-position-y: -22px;
    }
    100%{
        background-position-x: 118px;
        background-position-y: -22px;
    }
}

/*hover时进行的动画*/
.btn-box .btn:hover .wave{
    top: 0;
}
.btn-box .btn:hover span{
    color: #fff;
}