有你喜欢的绿色嘛---css小项目

我正在参加 码上掘金体验活动，详情：show出你的创意代码块
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

今天在昨天的小圆圈的基础上，加了一点小动画，下面是效果的展示，在你点到小圆点的时候，他就会出现小波纹的效果。

使用到的技术

html:a标签（多的部分使用css样式去除就可以）
css:选择器的使用，flex布局，linear-gradient渐变色，基础的属性该表图与字的大小等
js:document.querySelectorAll对样式进行更改，setTimeout函数计算毫秒

下面代码部分

代码

html

    <a href="#">G1</a>
    <a href="#">G2</a>

</body>

css

  /*外边距*/
  margin: 0; 
  /*内边距*/
  padding: 0; 
  /* 字体 */
  font-family: 'Courier New', Courier, monospace;
  /*背景颜色*/
  background-color: #FFFFFF;
}
body
{
  display: flex;
  /* body中的内容在主轴上居中 */
  justify-content: center;
  /* body中的内容在他所在的列居中对齐 */
  align-items: center;
  min-height: 100vh;
  /* 将body中的内容垂直处理 */
  flex-direction: column;

}
a{
  /*此部分是改变文字的颜色*/
  position: relative;
  display: inline-block;
  padding: 50px 50px;
  margin: 50px 50px;
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(#83cbac,#D9EDDF,#EDFDF5) ;是小圆圈出现三种渐变的颜色
}

a:nth-child(2)
{
    background: linear-gradient(#F0F5E5,#F0F5E5,#C8D8C5) ;

}
span{
  position: absolute;
  background: #fff;
  transform:translate(-50%,-50%);
   /* 属性定义元素是否对指针事件做出反应 */
  pointer-events: none;
  border-radius: 50%;
  animation:animate 1s linear infinite;

}
css3的关键帧动画
@keyframes animate{
  0%
  {
    width:0px;
    height:0px;
    opacity: 0.5;
  }
  100%
  {
    width: 1000px;
    height: 1000px;
    opacity: 0.5;

  }
}

js

//改变样式
const buts = document.querySelectorAll('a');
buts.forEach(btn =>{
  btn.addEventListener('click',function(e){
      确定x，y坐标
     let xline = e.clientX - e.target.offsetLeft;//判断边距
     let yline = e.clientY - e.target.offsetTop;

     let wave = document.createElement('span');
     wave.style.left = xline + 'px';
     wave.style.top = yline + 'px';
     this.appendChild(wave);

     setTimeout(() => {
       wave.remove()
     },1000);

  })
})

后续延伸

可以在后续加上更多的色彩，点击小圆球的时候，颜色的波澜更大，比如说在不同的点，可以出现不同的效果。可以放大到水墨画的互动屏幕上，点击一个地放，此处的水墨画就有所变化。