css -动画按钮

最新推荐文章于 2024-08-19 09:33:22 发布

_小太子

最新推荐文章于 2024-08-19 09:33:22 发布

阅读量514

点赞数 1

分类专栏： css 文章标签： html5

本文链接：https://blog.csdn.net/Teemo_shape/article/details/124120229

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

按钮上的紫色会动的，不知道怎么上传动效

<button>CSS 动画按钮</button>

button {
  display: block;
  border: 0;
  color: white;
  cursor: pointer;
  border-radius: 26px;
  font-size: 20px;
  padding: 15px 25px;
  margin: 60px auto;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: #007eaf;
  background: linear-gradient(-45deg, #4776E6 50%, #8E54E9 60%, #4776E6 70%);
  background-size: 600% 100%;
  animation: shine 20s infinite;
  animation-delay: 0s;
  animation-timing-function: linear;
  transition: all 0.3s;
  &:active{
    transform: scale(0.86);
  }
}


@keyframes shine {
  0% {
    background-position-x: 400%;
  }
  50% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: -400%;
  }
}