一个带有万圣节特色的邮箱订阅输入框及动画效果代码
代码语言：html
所属分类：表单美化
代码描述：一个带有万圣节特色的邮箱订阅输入框及动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Titan+One&display=swap");
@font-face {
font-family: 'Headhunter';
src: url("https://assets.codepen.io/383755/HeadhunterRegular.woff2") format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
body {
display: grid;
place-content: center;
height: 100vh;
--width: calc(100% + 200px);
background: radial-gradient(circle at center, #666, #222);
}
body:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
-webkit-mask: url("data:image/png;base64,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");
mask: url("data:image/png;base64,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");
background: #000;
opacity: 0.25;
-webkit-animation: static 0.4s steps(4, end) infinite;
animation: static 0.4s steps(4, end) infinite;
pointer-events: none;
mix-blend-mode: overlay;
}
@-webkit-keyframes static {
to {
-webkit-mask-position: 500px 1500px;
mask-position: 500px 1500px;
}
}
@keyframes static {
to {
-webkit-mask-position: 500px 1500px;
mask-position: 500px 1500px;
}
}
body #wrap {
width: 600px;
height: 50px;
max-width: 100%;
position: relative;
}
body #wrap .signup, body #wrap .field {
position: relative;
z-index: 10;
}
body #wrap .field {
position: absolute;
pointer-events: none;
height: 50px;
top: 0;
left: 0;
width: calc(100% - 200px);
background: transparent;
box-sizing: border-box;
outline: none;
font-size: 22px;
line-height: 1;
text-transform: uppercase;
font-family: 'Headhunter';
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 800px;
perspective: 800px;
z-index: 2;
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
body #wrap .field:after {
content: '';
position: absolute;
width: calc(100% + 200px);
height: 100%;
top: 0;
left: 0;
box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.5);
z-index: -1;
opacity: 1;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
-webkit-transition-delay: 2s;
transition-delay: 2s;
}
body #wrap .field .graves {
width: 300px;
position: absolute;
height: 10px;
top: calc(50% - 10px);
left: calc(50% - 50px);
background: repeating-linear-gradient(78deg, #9ecb62 1px, rgba(255, 255, 255, 0.0001) 1px, rgba(255, 255, 255, 0.0001) 15px, #9ecb62 15px, #9ecb62 16px), repeating-linear-gradient(60deg, #9ecb62 1px, rgba(255, 255, 255, 0.0001) 1px, rgba(255, 255, 255, 0.0001) 15px, #9ecb62 15px, #9ecb62 16px) -5px 50%, repeating-linear-gradient(84deg, #9ecb62 1px, rgba(255, 255, 255, 0.0001) 1px, rgba(255, 255, 255, 0.0001) 15px, #9ecb62 15px, #9ecb62 16px) -9px 50%, repeating-linear-gradient(71deg, #9ecb62 1px, rgba(255, 255, 255, 0.0001) 1px, rgba(255, 255, 255, 0.0001) 15px, #9ecb62 15px, #9ecb62 16px) -12px 50%, repeating-linear-gradient(101deg, #9ecb62 1px, rgba(255, 255, 255, 0.0001) 1px, rgba(255, 255, 255, 0.0001) 15px, #9ecb62 15px, #9ecb62 16px) -14px 50%, repeating-linear-gradient(110deg, #9ecb62 1px, rgba(255, 255, 255, 0.0001) 1px, rgba(255, 255, 255, 0.0001) 15px, #9ecb62 15px, #9ecb62 16px) -2px 50%, repeating-linear-gradient(68deg, #9ecb62 1px, rgba(255, 255, 255, 0.0001) 1px, rgba(255, 255, 255, 0.0001) 15px, #9ecb62 15px, #9ecb62 16px) 5px 50%, repeating-linear-gradient(94deg, #9ecb62 1px, rgba(255, 255, 255, 0.0001) 1px, rgba(255, 255, 255, 0.0001) 15px, #9ecb62 15px, #9ecb62 16px) -18px 50%, repeating-linear-gradient(114deg, #9ecb62 1px, rgba(255, 255, 255, 0.0001) 1px, rgba(255, 255, 255, 0.0001) 15px, #9ecb62 15px, #9ecb62 16px) -2px 50%, linear-gradient(to top, #92c54f, rgba(255, 255, 255, 0.0001) 7.5px);
z-index: 999;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-delay: 0.9s;
transition-delay: 0.9s;
border-radius: 100px 100px 0 0;
}
body #wrap .field .graves:after {
content: '';
position: absolute;
width: 150%;
height: 50px;
top: 100%;
left: 50%;
background: linear-gradient(tobottom, #92c54f 2.5px, #5a5002 10px, #282401 20px, rgba(255, 255, 255, 0.0001));
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transform: translateX(-50%) scaleY(0);
transform: translateX(-50%) scaleY(0);
-webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.0001)), color-stop(15%, #000), color-stop(85%, #000), to(rgba(255, 255, 255, 0.0001)));
-webkit-mask: linear-gradient(toright, rgba(255, 255, 255, 0.0001), #000 15%, #000 85%, rgba(255, 255, 255, 0.0001));
mask: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.0001)), color-stop(15%, #000), color-stop(85%, #000), to(rgba(255, 255, 255, 0.0001)));
mask: linear-gradient(toright, rgba(255, 255, 255, 0.0001), #000 15%, #000 85%, rgba(255, 255, 255, 0.0001));
}
body #wrap .field .graves:first-of-type .ghost {
position: absolute;
width: 100px;
height: 100px;
top: -125px;
left: 100px;
overflow: hidden;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
body #wrap .field .graves:first-of-type .ghost .ghostbody {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
body #wrap .field .graves:first-of-type .ghost .ghostbody:before {
content: '';
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
top: -70px;
left: -85px;
border: 35px solid;
border-color: rgba(255, 255, 255, 0.0001) #fff rgba(255, 255, 255, 0.0001) rgba(255, 255, 255, 0.0001);
border-radius: 100%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-mask: -webkit-gradient(linear, left bottom, left top, color-stop(25%, rgba(255, 255, 255, 0.0001)), color-stop(50%, #000));
-webkit-mask: linear-gradient(totop, rgba(255, 255, 255, 0.0001) 25%, #000 50%);
mask: -webkit-gradient(linear, left bottom, left top, color-stop(25%, rgba(255, 255, 255, 0.0001)), color-stop(50%, #000));
mask: linear-gradient(totop, rgba(255, 255, 255, 0.0001) 25%, #000 50%);
}
body #wrap .field .graves:first-of-type .ghost .ghostbody:after {
content: '';
position: absolute;
width: 35px;
height: 35px;
background: radial-gradient(circle at center, #000 2px, rgba(255, 255, 255, 0.0001) 2px) 50% 50%/100% 100% no-repeat, radial-gradient(circle at center, #000 2px, rgba(255, 255, 255, 0.0001) 2px) calc(50% + 12.5px) 50%/100% 100% no-repeat, #fff;
border-radius: 100%;
left: 50px;
top: 0;
z-index: 2;
-webkit-animation: look 3s ease-in-out infinite alternate;
animation: look 3s ease-in-out infinite alternate;
}
@-webkit-keyframes look {
from {
background-position: 50% 50%, calc(50% + 12.5px) 50%, 50% 50%;
}
to {
background-position: calc(50% - 12.5px) 50%, 50% 50%, 50% 50%;
}
}
@keyframes look {
from {
background-position: 50% 50%, calc(50% + 12.5px) 50%, 50% 50%;
}
to {
background-position: calc(50% - 12.5px) 50%, 50% 50%, 50% 50%;
}
}
body #wrap .field .graves .grave {
width: 100px;
height: 150px;
position: absolute;
bottom: 2px;
left: 25px;
overflow: hidden;
z-index: 2;
}
body #wrap .field .graves .grave:before, body #wrap .field .graves .grave:after {
content: 'THANK';
font-family: "Amatic SC";
font-size: 28px;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
color: #666;
position: absolute;
width: 75%;
height: 75%;
background: #ccc;
border-radius: 100px 100px 0 0;
-webkit-transform-origin: bottom;
transform-origin: bottom;
bottom: 0;
right: 0;
box-shadow: -10px 5px 0 0 #666;
-webkit-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: skewX(5deg) translateY(100%);
transform: skewX(5deg) translateY(100%);
}
body #wrap .field .graves .grave:last-of-type {
width: 150px;
height: 200px;
left: 150px;
}
body #wrap .field .graves .grave:last-of-type:before, body #wrap .field .graves .grave:last-of-type:after {
-webkit-transition: 0.9s ease-in-out;
transition: 0.9s ease-in-out;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
body #wrap .field .graves .grave:last-of-type:before, body #wrap .field .graves .grave:last-of-type:after {
content: 'YOU';
right: auto;
left: 25%;
padding-bottom: 55px;
border-radius: 0px;
box-shadow: none;
width: 60%;
z-index: 1;
background: -webkit-gradient(linear, left top, right top, color-stop(30%, rgba(255, 255, 255, 0.0001)), color-stop(30%, #ccc), color-stop(65%, #ccc), color-stop(65%, rgba(255, 255, 255, 0.0001))), -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0.0001)), color-stop(25%, #ccc), color-stop(45%, #ccc), color-stop(45%, rgba(255, 255, 255, 0.0001)));
background: linear-gradient(toright, rgba(255, 255, 255, 0.0001) 30%, #ccc 30%, #ccc 65%, rgba(255, 255, 255, 0.0001) 65%), linear-gradient(to bottom, rgba(255, 255, 255, 0.0001) 25%, #ccc 25%, #ccc 45%, rgba(255, 255, 255, 0.0001) 45%);
padding-right: 5px;
-webkit-transform: skewX(-5deg) translateY(250px);
transform: skewX(-5deg) translateY(250px);
height: 75%;
}
body #wrap .field .graves .grave:last-of-type:after {
color: rgba(255, 255, 255, 0.0001);
left: 30%;
bottom: -5%;
z-index: -1;
-webkit-filter: brightness(0.5);
filter: brightness(0.5);
}
body #wrap .field .btn {
width: 200px;
height: 50px;
right: -200px;.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0