<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.5.1.min.js"></script>
<title>情人节快乐</title>
<style>
* {
margin: 0;
padding: 0;
outline: none;
}
.contain {
display: flex;
position: relative;
height: 100vh;
background: #fae1dd;
/*弹性布局-默认子元素都会沿着x轴对齐*/
justify-content: center;
align-items: center;
/*让弹性布局垂直*/
flex-direction: column;
}
.valentine {
position: relative;
top: 50px;
/*向上移动三秒 匀速 循环*/
animation: up 3s linear infinite;
cursor: pointer;
}
/*关键帧 上下移动*/
@keyframes up {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-25px);
}
}
.envelope {
position: relative;
width: 450px;
height: 300px;
background-color: #f08080;
}
/*信封*/
.env {
display: none;
content: "";
position: absolute;
top: 3px;
width: 318px;
height: 318px;
background-color: #f08080;
/*旋转45度*/
transform: rotate(-45deg);
/*旋转原点*/
transform-origin: 0 0;
border-top-right-radius: 30px;
}
.font {
position: absolute;
width: 0;
height: 0;
border-top: 143px solid transparent;
border-bottom: 150px solid transparent;
border-right: 270px solid #f4978e;
top: 6px;
left: 180px;
}
.font1 {
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 240px solid #f08080;
border-right: 450px solid transparent;
top: 8px;
}
/*创建一个直角三角形*/
.font::before {
content: "";
position: absolute;
width: 0;
height: 0;
/*应该是font这个三角形(top+bottom)143px+150px*/
border-top: 293px solid transparent;
border-left: 450px solid #f8ad9d;
top: -142px;
left: -180px;
}
/*按钮*/
.button {
position: absolute;
width: 70px;
height: 70px;
background: url(./猫爪.png) no-repeat rgb(247, 247, 121);
background-size: 100%;
background-position: center;
border-radius: 50%;
top: 100px;
left: 180px;
}
/*贺卡*/
.card {
width: 410px;
height: 255px;
background-color: hwb(51 58% 4%);
position: absolute;
top: 8px;
left: 20px;
/*
box-shadow: -5px -5px 100px rgba(0, 0, 0, .3)*/
}
.txt {
padding: 30px;
font-size: 16px;
color: #003049;
}
.shadow {
position: absolute;
width: 495px;
height: 38px;
background-color: rgba(0, 0, 0, .3);
bottom: 60px;
border-radius: 50%;
/*投影加动画,匀速运动,无限循环*/
animation: shadow-size 3s linear infinite;
}
/*阴影在水平方向上缩放*/
@keyframes shadow-size {
0%,
100% {
transform: scaleX(1);
}
50% {
transform: scaleX(0.85);
}
}
</style>
</head>
<body>
<div class="contain">
<div class="valentine">
<div class="envelope"></div>
<div class="env"></div>
<!--为了让贺卡卡在信封中间(浏览器是从上往下渲染)-->
<div class="card">
<div class="txt"></div>
</div>
<div class="font1"></div>
<div class="font"></div>
<div class="button"></div>
</div>
<div class="shadow"></div>
</div>
</body>
<script>
var btn = document.querySelector('.button');
var font1 = document.querySelector('.font1');
var card = document.querySelector('.card');
var a = prompt();
$(".button").click(() => {
$(".font1").hide();
$(".env").show();
$(".card").stop().animate({
top: "-90px"
}, "show")
typewriter();
})
$(".button").mouseleave(() => {
$(".font1").show();
$(".env").hide();
$(".card").css("background-color","#f08080")
$(".card").stop().animate({
top: 0
}, "show")
})
//打字机
function typewriter() {
const el = $(".txt")
const str = a;
let progress = 0
const timer = setInterval(() => {
const curr = str.substr(progress, 1)
if (curr === "<") {
progress = str.indexOf(">", progress) + 1;
} else {
progress++;
}
el.html(str.substring(0, progress) + (progress & 1 ? "_" : ""))
//停止打字机
if (progress > str.length) {
clearInterval(timer);
}
}, 250)
}
</script>
</html>
信封(使用者自己输入文字 打字机输出)
140 浏览量
2024-02-15
21:57:08
上传
评论
收藏 38KB ZIP 举报
信封.zip （3个子文件） 
情人节信封.html 5KB
èצ.png 7KB
jquery-3.5.1.min.js 87KB资源评论
想看看风景
- 粉丝: 100
- 资源: 2
