输入框锁定和解锁切换动画效果-html代码-BFW代码库

输入框锁定和解锁切换动画效果

代码语言：html

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<titleLocked input field - CSS only</title>

<style>
      @import url("https://fonts.googleapis.com/css?family=Fira+Sans:300&display=swap");
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  height: 100vh;
}

body {
  display: flex;
  align-items: center;
  background: #cad1e7;
  color: #4a5568;
  height: 100%;
  font-size: 16px;
  font-family: "Fira Sans", sans-serif;
}

div {
  --field-size: 50px;
  --field-border-color: #ccc;
  margin: 0 auto;
  font-size: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  background: #ffffff;
  border-radius: 5px;
  position: relative;
  width: 400px;
  overflow: hidden;
  display: flex;
  background: white;
}
div input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: var(--field-size);
  height: var(--field-size);
  cursor: pointer;
  padding: 0;
  margin: 0;
}
div input[type="checkbox"]:hover + span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233fc079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%;
}
div input[type="checkbox"]:checked + span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233fc079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%;
}
div input[type="checkbox"]:checked + span::before, div inp.........完整代码请登录后点击上方下载按钮下载查看