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,6.51452565 14.1723611,6.51452565 C9.87015746,6.51452565 1.67467528,-2.67194974 0.0523652038,1.03166708 C-0.512055182,2.32019808 3.67236107,15.5177394 3.67236107,17.0145257 C3.67236107,22.8135155 8.3733712,27.5145257 14.1723611,27.5145257 Z" /></g></g><animateMotion dur="6s" begin="0s" repeatCount="indefinite" rotate="auto" fill="freeze"><mpath xlink:href="#Line" /></animateMotion></g><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(-71.000000, 3.000000)"><g id="l-2" transform="translate(96.916890, 37.437926) rotate(-89.000000) translate(-96.916890, -37.437926) translate(60.416890, 13.437926)"><ellipse id="Oval" cx="36.5" cy="24" rx="16.5" ry="24" /><path d="M52.8409492,28.4193415 C56.9830848,28.4193415 67.8409492,23.8671728 67.8409492,17.7920406 C67.8409492,16.3338966 72.7364131,8.06546148 72.3851131,6.79204055 C71.2727759,2.75994931 63.4888957,6.79204055 60.3409492,6.79204055 C56.1988135,6.79204055 52.8409492,11.7169083 52.8409492,17.7920406 C52.8409492,23.8671728 48.6988135,28.4193415 52.8409492,28.4193415 Z" id="Oval" /><path d="M1.84094917,28.4193415 C5.98308479,28.4193415 16.8409492,23.8671728 16.8409492,17.7920406 C16.8409492,16.3338966 21.7364131,8.06546148 21.3851131,6.79204055 C20.2727759,2.75994931 12.4888957,6.79204055 9.34094917,6.79204055 C5.19881354,6.79204055 1.84094917,11.7169083 1.84094917,17.7920406 C1.84094917,23.8671728 -2.30118646,28.4193415 1.84094917,28.4193415 Z" id="Oval" transform="translate(10.701577, 16.709671) scale(-1, 1) translate(-10.701577, -16.709671) " /></g></g><animateMotion dur="6s" begin="0.1s" repeatCount="indefinite" rotate="auto" fill="freeze"><mpath xlink:href="#Line" /></animateMotion></g><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(-58.000000, 3.000000)" fill="#D8D8D8"><g id="l-3-" transform="translate(83.924588, 36.883456) rotate(-89.000000) translate(-83.924588, -36.883456) translate(69.424588, 12.883456)"><path d="M14.1723611,48 C19.4148996,48 23.903645,41.8034457 25.7601702,33.016917 C26.3483828,30.2330353 28.8341336,32.1407168 28.8341336,28.9515567 C28.8341336,15.6967227 21.0759204,1.42108547e-14 14.1723611,1.42108547e-14 C7.2688017,1.42108547e-14 3.55271368e-15,13.745166 3.55271368e-15,27 C3.55271368e-15,29.9816317 1.95554677,29.8362716 2.47309478,32.4701788 C4.25630479,41.5452976 8.82173488,48 14.1723611,48 Z" id="l-3" /></g></g><animateMotion dur="6s" begin="0.2s" repeatCount="indefinite" rotate="auto" fill="freeze"><mpath xlink:href="#Line" /></animateMotion></g><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(-48.000000, 3.000000)" fill="#D8D8D8"><g id="l-4-" transform="translate(73.917498, 37.202362) rotate(-89.000000) translate(-73.917498, -37.202362) translate(61.417498, 13.202362)"><path d="M12.2878333,48 C16.8332608,48 20.7251285,41.8034457 22.3347878,33.016917 C22.8447845,30.2330353 25,32.1407168 25,28.9515567 C25,15.6967227 18.2734123,1.42108547e-14 12.2878333,1.42108547e-14 C6.30225431,1.42108547e-14 0,13.745166 0,27 C0,29.9816317 1.69551372,29.8362716 2.14424232,32.4701788 C3.69033525,41.5452976 7.64869079,48 12.2878333,48 Z" id="l-4" /></g></g><animateMotion dur="6s" begin="0.3s" repeatCount="indefinite" rotate="auto" fill="freeze"><mpath xlink:href="#Line" /></animateMotion></g><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(-32.000000, 3.000000).........完整代码请登录后点击上方下载按钮下载查看