[100天挑战100个前端效果]第七天---涟漪按钮(今天加入了JavaScript哟！)

最新推荐文章于 2021-08-25 13:52:05 发布

钧桐

最新推荐文章于 2021-08-25 13:52:05 发布

阅读量188

点赞数 1

分类专栏： 100天挑战100个前端效果文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_42136832/article/details/115229105

版权

100天挑战100个前端效果专栏收录该内容

25 篇文章 8 订阅

订阅专栏

涟漪按钮

让我们先来看看实现的效果
- html代码
- css代码
今日学习到知识总结

让我们先来看看实现的效果

在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第七天</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="bt">泛起波纹的按钮</div>
    <script>
        //找到按钮元素
        const bt = document.querySelector('div.bt');
        //绑定安修的点击事件
        bt.addEventListener('click',(e) =>{
            //获取按钮的偏移量，位置坐标中的left和top
            //此处为按钮左上角，距离页面左侧和顶部的距离
            let offsetLeft=e.target.offsetLeft;
            let offsetTop=e.target.offsetTop;
            
            //注意：当点击空白处并且连续点击两次以上
            //会点击再span元素中，所以获取的offset相关值是san的
            //而不是div的，所有计算位置是错误的
            if(e.target.nodeName=='SPAN'){
                //如果点击了span元素，则获取span的上级父元素div的offset相关值
                offsetLeft=e.target.offsetParent.offsetLeft;
                offsetTop=e.target.offsetParent.offsetTop;
            }
            //计算span的坐标
            let x=e.clientX-offsetLeft;
            let y=e.clientY-offsetTop;
            // 用来再控制台看是否监听到了点击
            // console.log(x+' '+y);
            //定义span
            let ripple=document.createElement('span');
            ripple.style.left=x+"px";
            ripple.style.top=y+"px";
            //将ripple插入到bt中
            bt.appendChild(ripple);
            //增加计时器，每秒钟自动将当前span清理掉，不至于越来越多
            setTimeout(()=>{
                ripple.remove();
            },1000);
        });
    </script>
    
</body>
</html>

css代码

:root{
    --background-color:#2c3e50;
    --show_color1:#03a9f4;
    --show_color2:#f441a5;
}
*{
    margin: 0;
    padding: 0;
}
body{
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.bt{
    font-size: 15px;
    color: #fff;
    background: linear-gradient(90deg,var(--show_color1),var(--show_color2));
    padding: 24px 48px;
    border-radius: 60px;
    position: relative;
    overflow: hidden;
}
.bt span{
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    animation: show 1s;

}
@keyframes show{
    0%{
        opacity: 0.5;
        width: 0;
        height: 0;
    }
    100%{
        opacity: 0;
        width: 300px;
        height: 300px;
    }
}

今日学习到知识总结

标签或者函数	作用
opacity	设置不透明级别
span	用来组合行内元素，很灵活
document.querySelector	获取文档中的某个元素
addEventListener	添加点击事件
e.target.offsetLeft	返回当前元素(事件)左上角
e.target.nodeName	获得节点名称
e.target.offsetParent.offsetLeft	返回父类元素左上角
e.clientX	clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
document.createElement	createElement() 方法通过指定名称创建一个元素
.style.left	left 属性设置或返回定位元素的左部位置。
appendChild	appendChild() 方法向节点添加最后一个子节点。
setTimeout	setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

钧桐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[100天挑战100个前端效果]第七天---涟漪按钮(今天加入了JavaScript哟！)

涟漪按钮让我们先来看看实现的效果html代码css代码今日学习到知识总结让我们先来看看实现的效果html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
复制链接

扫一扫

专栏目录