色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

需要純html的波紋按鈕.css與完美的波動從點擊指針

CSS
錢浩然2年前8瀏覽0評論

我想要一個純HTML和CSS程序(必須不包括js/香草或任何其他語言)的波紋按鈕。這是我做的。但是波浪不是從我點擊的點開始的。我該如何解決？

button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
  background-color: var(--btn-primary-color);
  box-shadow: 0 2px 4px #bbb;
  outline: none;
  color: white;
  position: relative;
  overflow: hidden;
}

.ripple {
  background-position: center;
  transition: background .6s;
  position: absolute;
}

.ripple:hover {
  background-color: var(--btn-secoundary-color);
  background-image: radial-gradient(circle, transparent 1%, var(--btn-primary-color) 1%);
  background-position: center;
  background-size: 15000%;
}

.ripple:active {
  transition: background 0s;
  background-color: var(--btn-secoundary-color);
  background-size: 100%;
}

 :root {
  --btn-primary-color: #ff3434;
  --btn-secoundary-color: #b61601;
}

<button class="ripple">Button</button>

有許多覆蓋按鈕的元素。這些將充當& quot點擊檢測& quot點擊時，每個單獨的動畫波紋框。這里，每個元素是10%的寬度和高度& quot粒度& quot：

button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
  background-color: var(--btn-primary-color);
  box-shadow: 0 2px 4px #bbb;
  outline: none;
  color: white;
  position: relative;
  overflow: hidden;
}

.ripple {
  transition: background .6s;
  position: absolute;
}

.ripple:hover {
  background-color: var(--btn-secoundary-color);
}

.ripple:active {
  transition: background 0s;
  background-color: var(--btn-primary-color);
}

 :root {
  --btn-primary-color: #ff3434;
  --btn-secoundary-color: #b61601;
}

.ripple-effect {
  background-position: center;
  transition:
    background-size 0.6s,
    opacity .6s,
    top 0s .6s,
    left 0s .6s,
    width 0s .6s,
    height 0s .6s,
    transform 0s .6s;
  position: absolute;
  width: 10%;
  height: 10%;
  background-position: center;
  background-image: radial-gradient(circle, transparent 1%, var(--btn-primary-color) 1%);
  background-size: 5000%;
  opacity: 0;
}

.ripple .ripple-effect:active {
  background-size: 0%;
  width: 300%;
  height: 300%;
  transform: translate(-50%, -50%);
  transition-duration: 0s;
  transition-delay: 0s;
  opacity: 1;
}

<button class="ripple">
  <span style="position: relative; z-index: 1; pointer-events: none">Button</span>
  <div class="ripple-effect" style="top:0%; left:0"></div>
  <div class="ripple-effect" style="top:0%; left:10%"></div>
  <div class="ripple-effect" style="top:0%; left:20%"></div>
  <div class="ripple-effect" style="top:0%; left:20%"></div>
  <div class="ripple-effect" style="top:0%; left:30%"></div>
  <div class="ripple-effect" style="top:0%; left:40%"></div>
  <div class="ripple-effect" style="top:0%; left:50%"></div>
  <div class="ripple-effect" style="top:0%; left:60%"></div>
  <div class="ripple-effect" style="top:0%; left:70%"></div>
  <div class="ripple-effect" style="top:0%; left:80%"></div>
  <div class="ripple-effect" style="top:0%; left:90%"></div>
  <div class="ripple-effect" style="top:10%; left:0"></div>
  <div class="ripple-effect" style="top:10%; left:10%"></div>
  <div class="ripple-effect" style="top:10%; left:20%"></div>
  <div class="ripple-effect" style="top:10%; left:20%"></div>
  <div class="ripple-effect" style="top:10%; left:30%"></div>
  <div class="ripple-effect" style="top:10%; left:40%"></div>
  <div class="ripple-effect" style="top:10%; left:50%"></div>
  <div class="ripple-effect" style="top:10%; left:60%"></div>
  <div class="ripple-effect" style="top:10%; left:70%"></div>
  <div class="ripple-effect" style="top:10%; left:80%"></div>
  <div class="ripple-effect" style="top:10%; left:90%"></div>
  <div class="ripple-effect" style="top:20%; left:0"></div>
  <div class="ripple-effect" style="top:20%; left:10%"></div>
  <div class="ripple-effect" style="top:20%; left:20%"></div>
  <div class="ripple-effect" style="top:20%; left:20%"></div>
  <div class="ripple-effect" style="top:20%; left:30%"></div>
  <div class="ripple-effect" style="top:20%; left:40%"></div>
  <div class="ripple-effect" style="top:20%; left:50%"></div>
  <div class="ripple-effect" style="top:20%; left:60%"></div>
  <div class="ripple-effect" style="top:20%; left:70%"></div>
  <div class="ripple-effect" style="top:20%; left:80%"></div>
  <div class="ripple-effect" style="top:20%; left:90%"></div>
  <div class="ripple-effect" style="top:30%; left:0"></div>
  <div class="ripple-effect" style="top:30%; left:10%"></div>
  <div class="ripple-effect" style="top:30%; left:20%"></div>
  <div class="ripple-effect" style="top:30%; left:20%"></div>
  <div class="ripple-effect" style="top:30%; left:30%"></div>
  <div class="ripple-effect" style="top:30%; left:40%"></div>
  <div class="ripple-effect" style="top:30%; left:50%"></div>
  <div class="ripple-effect" style="top:30%; left:60%"></div>
  <div class="ripple-effect" style="top:30%; left:70%"></div>
  <div class="ripple-effect" style="top:30%; left:80%"></div>
  <div class="ripple-effect" style="top:30%; left:90%"></div>
  <div class="ripple-effect" style="top:40%; left:0"></div>
  <div class="ripple-effect" style="top:40%; left:10%"></div>
  <div class="ripple-effect" style="top:40%; left:20%"></div>
  <div class="ripple-effect" style="top:40%; left:20%"></div>
  <div class="ripple-effect" style="top:40%; left:30%"></div>
  <div class="ripple-effect" style="top:40%; left:40%"></div>
  <div class="ripple-effect" style="top:40%; left:50%"></div>
  <div class="ripple-effect" style="top:40%; left:60%"></div>
  <div class="ripple-effect" style="top:40%; left:70%"></div>
  <div class="ripple-effect" style="top:40%; left:80%"></div>
  <div class="ripple-effect" style="top:40%; left:90%"></div>
  <div class="ripple-effect" style="top:50%; left:0"></div>
  <div class="ripple-effect" style="top:50%; left:10%"></div>
  <div class="ripple-effect" style="top:50%; left:20%"></div>
  <div class="ripple-effect" style="top:50%; left:20%"></div>
  <div class="ripple-effect" style="top:50%; left:30%"></div>
  <div class="ripple-effect" style="top:50%; left:40%"></div>
  <div class="ripple-effect" style="top:50%; left:50%"></div>
  <div class="ripple-effect" style="top:50%; left:60%"></div>
  <div class="ripple-effect" style="top:50%; left:70%"></div>
  <div class="ripple-effect" style="top:50%; left:80%"></div>
  <div class="ripple-effect" style="top:50%; left:90%"></div>
  <div class="ripple-effect" style="top:60%; left:0"></div>
  <div class="ripple-effect" style="top:60%; left:10%"></div>
  <div class="ripple-effect" style="top:60%; left:20%"></div>
  <div class="ripple-effect" style="top:60%; left:20%"></div>
  <div class="ripple-effect" style="top:60%; left:30%"></div>
  <div class="ripple-effect" style="top:60%; left:40%"></div>
  <div class="ripple-effect" style="top:60%; left:50%"></div>
  <div class="ripple-effect" style="top:60%; left:60%"></div>
  <div class="ripple-effect" style="top:60%; left:70%"></div>
  <div class="ripple-effect" style="top:60%; left:80%"></div>
  <div class="ripple-effect" style="top:60%; left:90%"></div>
  <div class="ripple-effect" style="top:70%; left:0"></div>
  <div class="ripple-effect" style="top:70%; left:10%"></div>
  <div class="ripple-effect" style="top:70%; left:20%"></div>
  <div class="ripple-effect" style="top:70%; left:20%"></div>
  <div class="ripple-effect" style="top:70%; left:30%"></div>
  <div class="ripple-effect" style="top:70%; left:40%"></div>
  <div class="ripple-effect" style="top:70%; left:50%"></div>
  <div class="ripple-effect" style="top:70%; left:60%"></div>
  <div class="ripple-effect" style="top:70%; left:70%"></div>
  <div class="ripple-effect" style="top:70%; left:80%"></div>
  <div class="ripple-effect" style="top:70%; left:90%"></div>
  <div class="ripple-effect" style="top:80%; left:0"></div>
  <div class="ripple-effect" style="top:80%; left:10%"></div>
  <div class="ripple-effect" style="top:80%; left:20%"></div>
  <div class="ripple-effect" style="top:80%; left:20%"></div>
  <div class="ripple-effect" style="top:80%; left:30%"></div>
  <div class="ripple-effect" style="top:80%; left:40%"></div>
  <div class="ripple-effect" style="top:80%; left:50%"></div>
  <div class="ripple-effect" style="top:80%; left:60%"></div>
  <div class="ripple-effect" style="top:80%; left:70%"></div>
  <div class="ripple-effect" style="top:80%; left:80%"></div>
  <div class="ripple-effect" style="top:80%; left:90%"></div>
  <div class="ripple-effect" style="top:90%; left:0"></div>
  <div class="ripple-effect" style="top:90%; left:10%"></div>
  <div class="ripple-effect" style="top:90%; left:20%"></div>
  <div class="ripple-effect" style="top:90%; left:20%"></div>
  <div class="ripple-effect" style="top:90%; left:30%"></div>
  <div class="ripple-effect" style="top:90%; left:40%"></div>
  <div class="ripple-effect" style="top:90%; left:50%"></div>
  <div class="ripple-effect" style="top:90%; left:60%"></div>
  <div class="ripple-effect" style="top:90%; left:70%"></div>
  <div class="ripple-effect" style="top:90%; left:80%"></div>
  <div class="ripple-effect" style="top:90%; left:90%"></div>
</button>