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

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

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

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;
    }
  }
  }
}

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » css实现酷炫的鼠标滑过按钮动画特效

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们