css实现渐变色按钮动画效果代码-html代码-BFW代码库

css实现渐变色按钮动画效果代码

代码语言：html

代码描述：css实现渐变色按钮动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v24/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v24/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf) format('truetype');
}
/*----------------------------------------

	VARIABLES

----------------------------------------*/
body * {
  all: unset;
}
body * {
  box-sizing: border-box;
}
html,
body {
  min-height: 100%;
}
html {
  font-size: 62.5%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-size: 1.6rem;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}
/*----------------------------------------

	BUTTONS	

----------------------------------------*/
button {
  background: #03a9f4;
  color: #fff;
  padding: 2rem 4rem;
  border-radius: 5rem;
  text-transform: uppercase;
  margin: 0 1rem;
}
button.anim-1 {
  background: linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5);
  background-size: 600%;
  animation: anim-1 10s linear infinite;
}
button.anim-2 {
  background: linear-gradient(-45deg, #FF0085, #00FFA8);
  background-size: 500%;
  animation: anim-1 10s linear infinite;
}
button.anim-3 {
  background: linear-gradient(-45deg, #00EAFF, #F701FE);
  background-size: 500%;
  animation: anim-1 10s linear infinite;
}
@keyframes anim-1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*----------------------------------------

	UNRELATED GARBAGE

----------------------------------------*/
body {
  background: rebeccapurple;
}
body:after {
  position: fixed;
  display: block;
  content: ' ';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #303f9f, #e91e63);
  z-index: -2;
  transform: translateZ(0);
  opacity: 1;
  pointer-events: none;
}
i,
u,
x {
  display: block;
}
i,
x {
  text-transform.........完整代码请登录后点击上方下载按钮下载查看