svg+css实现信封邮件鼠标悬停翻转打开信件圣诞节快乐祝福效果代码
代码语言:html
所属分类:悬停
代码描述:svg+css实现信封邮件鼠标悬停翻转打开信件圣诞节快乐祝福效果代码
代码标签: svg css 信封 邮件 鼠标 悬停 翻转 打开 信件 圣诞节 快乐 祝福
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.bunny.net/css?family=nothing-you-could-do:400); *, ::before, ::after { box-sizing: border-box; } body { font-family: "Nothing You Could Do", handwriting; background: radial-gradient(#005f8f, #001f3f, black); color: #4a4a4a; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 1rem; } .envelope { --duration: 1000ms; --shadow-width: calc(var(--envelope-width) * 0.85); --shadow-blur: 15px; --envelope-width: 300px; --envelope-height: 175px; --envelope-clr-bg: #d14d44; --envelope-clr-bg-side: #c24e46; --envelope-clr-bg-bottom: #e15349; --envelope-clr-bg-top: #d14d44; --envelope-clr-txt: #fff; /*--envelope-transform: rotateY(0deg);*/ --envelope-transform-hover: rotateY(180deg); --evelope-rotate-delay: calc(var(--duration) / 1); --evelope-rotate-delay-hover: 0ms; --letter-clr-bg: #fff; --letter-clr-text: green; --letter-font-size: 1rem; --letter-delay: 0ms; --letter-delay-hover: calc( var(--duration) * 1.25 ); /* delay before revealing card */ --letter-height: calc(var(--envelope-height) - 2rem); --letter-height-hover: calc(var(--envelope-height) * 1.75); --fold-rotate: rotateX(0deg); /*--fold-zindex: 10;*/ --fold-zindex-hover: 0; --fold-rotate-hover: rotateX(180deg); --fold-delay: calc(var(--duration) / 2); /* delay before opening top section */ --fold-delay-hover: calc(var(--duration) * .75); --front-font-size: 1rem; --snowman-width: 50px; --bells-width: 30px; position: relative; height: var(--envelope-height); width: var(--envelope-width); perspective: 1000px; cursor: pointer; } @media (min-width: 720px) { .envelope { --envelope-width: 600px; --envelope-height: 350px; --letter-font-size: 1.6rem; --snowman-width: 130px; --bells-width: 60px; --front-font-size: 1.25rem; } } /* shadow */ .envelope::after { content: ""; position: absolute; top: 110%; left: 50%; width: var(--shadow-width); height: 40px; transition: var(--duration) ease-in-out; transition-delay: var(--evelope-rotate-delay); transform: var(--shadow-transform); translate: -50% 0; border-radius: 50%; background: rgba(56, 6, 6, 0.4); filter: blur(var(--shadow-blur)); } .envelope:hover { --envelope-transform: var(--envelope-transform-hover, 0deg); --evelope-rotate-delay: var(--evelope-rotate-delay-hover); --shadow-transform: rotateY(180deg); --fold-rotate: var(--fold-rotate-hover); --fold-delay: var(--fold-delay-hover); --fold-zindex: var(--fold-zindex-hover); --letter-height: var(--letter-height-hover); --letter-delay: var(--letter-delay-hover); } .envelope-inner { position: relative; width: 100%; height: 100%; transition: var(--duration) ease-in-out; transition-delay: var(--evelope-rotate-delay); transform-style: preserve-3d; transform: var(--envelope-transform); display: grid; } .envelope-front, .envelope-back { position: relative; grid-area: 1/1; width: 100%; height: 100%; background-color: var(--envelope-clr-bg); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0