CSS的按钮交互和输入框效果_css input交互-CSDN博客

本文探讨了如何使用CSS来创建button的交互效果，详细解析了HTML和CSS代码，展示了如何实现input元素的交互变化。同时，文章还介绍了hover效果的应用，包括当鼠标悬停在图片上时，如何呈现两个不同图片的切换效果。

button效果

HTML部分

<button></button>

CSS部分

button {
   
   
  z-index: 1;
  position: relative;
  font-size: inherit;
  font-family: inherit;
  color: white;
  padding: 0.5em 1em;
  outline: none;
  border: none;
  background-color: hsl(236, 32%, 26%);
  overflow: hidden;
  transition: color 0.4s ease-in-out;
}

button::before {
   
   
  content: '';
  z-index: -1;
  position: absolute;
  top: 100%;
  right: 100%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #3cefff;
  transform-origin: center;
  transform: translate3d(50%, -50%, 0) scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
}

button:hover {
   
   
  cursor: pointer;
  color: #161616;
}

button:hover::before {
   
   
  transform: translate3d(50%, -50%, 0) scale3d(15, 15, 15);
}

input的交互效果

HTML部分

<div>
  <input type="text" placeholder="Input Outline">
  <span class="bottom"></span>
  <span class="right"></span>
  <span class="top"></span>
  <span class="left"></span>
</div>

CSS部分

div {
   
   
  position: relative;
}

input {
   
   
  width: 6.5em;
  color: white;
  font-size: inherit;
  font-family: inherit;
  background-color: hsl(236,