svg+css实现信封邮件鼠标悬停翻转打开信件圣诞节快乐祝福效果代码-html代码-BFW代码库

svg+css实现信封邮件鼠标悬停翻转打开信件圣诞节快乐祝福效果代码

代码语言：html

所属分类：悬停

代码描述：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.6.........完整代码请登录后点击上方下载按钮下载查看