svg+css实现鱼儿游动中文登录注册表单效果代码-html代码-BFW代码库

代码语言：html
代码描述：svg+css实现鱼儿游动中文登录注册表单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  
  
  
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto);
@-webkit-keyframes btn {
  0%, 100% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  80% {
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  90% {
    -moz-transform: scale(0.96);
    -ms-transform: scale(0.96);
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
  }
}
@-moz-keyframes btn {
  0%, 100% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  80% {
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  90% {
    -moz-transform: scale(0.96);
    -ms-transform: scale(0.96);
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
  }
}
@keyframes;
@-webkit-keyframes fish {
  0%, 70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fish {
  0%, 70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes;
html {
  height: 100%;
}

body {
  font-family: Roboto, sans-serif;
  color: #515a6e;
  background-color: #d5eafc;
  height: 100%;
  margin: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

a {
  cursor: pointer;
  color: #000;
  text-decoration: none;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
a:hover {
  color: #ff5050;
}

.fish, .fish-shadow {
  width: 640px;
  height: auto;
  position: absolute;
  top: -145px;
  left: -177px;
  -moz-animation: fish 3s forwards ease-in-out;
  -webkit-animation: fish 3s forwards ease-in-out;
  animation: fish 3s forwards ease-in-out;
}
.fish path, .fish-shadow path {
  fill: #fff;
}
.fish path:hover, .fish-shadow path:hover {
  fill: #ff6100;
}
.fish .line, .fish-shadow .line {
  fill: none;
}

.fish-shadow-con {
  opacity: 0.2;
  filter: blur(10px);
  position: absolute;
  top: 0;
  left: 0;
}

.fish-shadow {
  top: -125px;
  left: -157px;
}
.fish-shadow path {
  fill: #211922;
}
.fish-shadow path:hover {
  fill: #211922;
}

.fish-shadow {
  -webkit-filter: url("#goo");
  filter: url(#goo);
  top: -125px;
  left: -157px;
  opacity: 0.4;
}

.container {
  position: relative;
  background-color: #fafafe;
  border-radius: 10px;
  margin: 40px;
  padding: 25px 20px 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  width: 320px;
  box-sizing: border-box;
}
.container:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 60%;
  background-color: #fafafe;
  border-radius: 10px;
  z-index: 2;
}

.card {
  position: relative;
  z-index: 2;
}

.card_title {
  font-size: 24px;
  margin: 0;
}

.card_title-info {
  font-size: 14px;
  margin: 7px 0 10px;
}

.card_button {
  border-radius: 4px;
  border: none;
  outline: none;
  width: 100%;
  padding: 0 15px;
  font-size: 18px;
  line-height: 36px;
  font-weight: 500;
  margin: 25px 0 10px;
  color: #fff;
  background: linear-gradient(#ff6100, #ff5050);
  box-shadow: 0 2px 12px -3px #ff5050;
  -moz-animation: btn 6s 3s infinite ease-in-out;
  -webkit-animation: btn 6s 3s infinite ease-in-out;
  animation: btn 6s 3s infinite ease-in-out;
  opacity: 0.9;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.card_button:hover {
  opacity: 1;
  box-shadow: 0 2px 2px -3px #ff5050;
}

.card_info {
  font-size: 14px;
}

.input {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  padding-top: 10px;
}
.input + .input {
  margin-top: 10px;
}

.input_label {
  color: #8597a3;
  position: absolute;
  top: 20px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.input_field {
  border: 0;
  padding: 0;
  z-index: 1;
  background-color: transparent;
  border-bottom: 2px solid #eee;
  font: inherit;
  font-size: 14px;
  line-height: 30px;
}
.input_field:focus, .input_field:valid {
  outline: 0;
  border-bottom-color: #665856;
}
.input_field:focus + .input_label, .input_field:valid + .input_label {
  color: #665856;
  -moz-transform: translateY(-25px);
  -ms-transform: translateY(-25px);
  -webkit-transform: translateY(-25px);
  transform: translateY(-25px);
}

.input_eye {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.input_eye svg {
  width: 24px;
  height: auto;
  stroke: #8597a3;
}

.link {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 3;
}

.rabbit {
  width: 50px;
  height: 50px;
  fill: #fff;
}
</style>



</head>

<body  >
  <div class="container">
        <div class="card">
            <h1 class="card_title">创建一个账号</h1>
            <p class="card_title-info">www.bootstrap.com</p>
            <form class="card_form">
                <div class="input"><input type="text" class="input_field" required /><label class="input_label">用户名</label></div>
                <div class="input"><input type="text" class="input_field" required /><label class="input_label">Email</label></div>
                <div class="input"><input type="password" class="input_field" required /><label class="input_label">登录密码</label><span class="input_eye"><svg viewBox="0 0 146 74" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M143 37C143 45.4902 136.139 53.9606 123.263 60.487C110.554 66.9283 92.7879 71 73 71C53.2121 71 35.446 66.9283 22.7375 60.487C9.86096 53.9606 3 45.4902 3 37C3 28.5098 9.86096 20.0394 22.7375 13.513C35.446 7.07167 53.2121 3 73 3C92.7879 3 110.554 7.07167 123.263 13.513C136.139 20.0394 143 28.5098 143 37Z" stroke-width="6" /><circle cx="73" cy="37" r="34" stroke-width="6" /></svg></span></div>
                <button
                    class="card_button">注 册</button>
            </form>
            <div class="card_info">
                <p>已有账号? <a href="#">点击登录</a></p>
            </div>
        </div>
        <div class="fish-shadow-con"><svg class="fish-shadow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin slice" viewBox="0 0 743 645"><g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M177.367 337.568L182.709 357.739C198.517 417.421 249.748 460.995 311.193 467.019L421.508 477.834C478.237 483.396 532.831 454.649 560.346 404.729C607.09 319.923 557.549 214.182 462.47 195.822L375.079 178.946C368.369 177.651 361.766 175.854 355.324 173.572C251.651 136.837 149.205 231.245 177.367 337.568Z" class="line" id="Line" /><g xmlns="http://www.w3.org/2000/svg" id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group" transform="translate(-103.000000, 3.000000)" fill="#F2AFAF"><g id="l-1" transform="translate(118.396084, 37.985234) rotate(-89.000000) translate(-118.396084, -37.985234) translate(104.396084, 23.985234)"><path d="M14.1723611,27.5145257 C19.9713509,27.5145257 24.6723611,22.8135155 24.6723611,17.0145257 C24.6723611,15.8258883 28.1981217,2.09701504 27.8341336,1.03166708 C26.4223375,-3.10048431 18.7827136.........完整代码请登录后点击上方下载按钮下载查看