html+css 实现可点击的光影按钮

宝码香车

于 2024-07-22 22:22:46 发布

阅读量95

点赞数 1

分类专栏： # html+css+js 绚丽效果文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_33650655/article/details/140620193

版权

html+css+js 绚丽效果专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果

点击效果

原理解析

1.光影变化：
使用了css3的keyframes定义了一个shine动画并调用。
在这里插入图片描述

2.可点击：
点击是用了 button 按钮的 active属性，把按钮做一个position: relative; top: 0;的设置，当点击的时候 top: 2px;实现的。

在这里插入图片描述

上代码，可以直接复制使用

html

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>css button</title>

<link rel="stylesheet" href="style.css">

</head>
<body>
<h1>纯 html+css 实现</h1>
<div class="buttonWrap">
    <button class="shiny">CSS button！</button>
    <button class="shinydarken">CSS光影按钮</button>
</div>

</body>
</html>

css

body {
    background-color: #313131;
   
    height: 100vh;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}


h1{
text-align: center;
color:#f5f5f5;
}

.buttonWrap{
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
/*核心代码*/
/* 按钮的基础样式 */
button {
  display: block;
  position: relative;
  top: 0;
  border: 0;
  cursor: pointer;
  background: #9ccc65;
  color: white;
  border-radius: 3px;
  line-height: 1;
  font-size: 20px;
  padding: 15px 25px;
  outline: 0;
  margin: 20px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
/* 第一个按钮光影移动 */
button.shiny {
    background: #007eaf;
    background: linear-gradient(-45deg, #2284fb 50%, #0a0e92 60%, #2e59d4 70%);
    background-size: 600% 100%;
    /* 这里调用了shine */
    -webkit-animation: shine 20s infinite;
    animation: shine 20s infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
/* 第二个按钮光影移动 */
button.shinydarken {
  background: #9ccc65;
  background: linear-gradient(-45deg, #9ccc65 50%, #699833 60%, #9ccc65 70%);
  background-size: 600% 100%;
/* 这里调用了shine */
  -webkit-animation: shine 20s infinite;
          animation: shine 20s infinite;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
/* 点击时的效果 */
button:active {
  top: 2px;
}
/* 定义光影效果-兼容写法 */
@-webkit-keyframes shine {
  0% {
    background-position-x: 400%;
  }
  50% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: -400%;
  }
}
/* 定义光影效果 */
@keyframes shine {
  0% {
    background-position-x: 400%;
  }
  50% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: -400%;
  }
}