css实现酷炫的鼠标滑过按钮动画特效

css 实现酷炫的鼠标滑过按钮动画特效，通过鼠标悬停各种 ui 动画特效。

HTML 代码：

<div class="container">
  <div class="button-wrapper">
    <div class="button">
      <span class="text">Not really clickable</span>
    </div>
  </div>
  <div class="button-wrapper">
    <div class="button">
      <span class="text">Hover me</span>
    </div>
  </div>
  <div class="button-wrapper">
    <div class="button">
      <span class="text">And Me</span>
    </div>
  </div>
</div>

SCSS 代码：

body {
  background-color: #555555;
}

$colors: #FF8B94, #02A7E1, #98CB4A, #AE5A41, #F7D842;

@for $i from 1 through length($colors) {
	.container .button-wrapper:nth-child(#{length($colors)}n+#{$i}) div:before {
		border-color: nth($colors, $i);
	} 
  .container .button-wrapper:nth-child(#{length($colors)}n+#{$i}) div {
		border-color: nth($colors, $i);
	} 
}

.container {  
  z-index: 99;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0;
  flex-wrap: wrap;
  
  .button-wrapper {
    overflow:hidden;  
    .button {
    position:relative;
    text-transform: uppercase;
    color: #fff;
    border: solid 2px #02A7E1;
    padding: 10px 30px;
    z-index:1;
    &::before {
      position:absolute;
      border-bottom: solid 3px;
      content:'';
      min-height: 10px;
      min-width: 100px;
      z-index:200;
      left: 50%;
      transform: translateX(-50%);
      top: 60%;
      opacity:1;
      transition-duration:0.5s;
      
    }
    &::after {
      pointer-events: none;
      position:absolute;
      content:'';
      width: 600px;
      height: 160px;
      border-radius:50%;
      background-color: #555555;
      //background-color: red;
      
      //border: solid 2px red;
      top:-120%;
      left:-30%; 
      z-index: -10;
      //transform: rotate(30deg);
      transition-duration: 2s;
    }
    &:hover:after {
      width:0;
      height:50px;
    }
    &:hover:before {
      opacity:0;
    }
  }
  }
}

以上关于css实现酷炫的鼠标滑过按钮动画特效的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。