<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>圣诞贺卡</title>
</head>
<body>
<style>
@import url("https://fonts.googleapis.com/css?family=Mirza&subset=latin-ext");
* {
box-sizing: border-box;
}
body {
background-color: #928A97;
background-image: url("https://images.pexels.com/photos/257909/pexels-photo-257909.jpeg?fit=crop&w=1920&h=1280");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
.card {
perspective: 1500px;
position: absolute;
left: calc(50% - 175px);
top: calc(50% - 250px);
transition-property: transform;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition-delay: initial;
transform: rotate(-10deg) translate(0, 0);
-webkit-animation: cardIn 1s alternate cubic-bezier(0.87, -0.41, 0.19, 1.44);
animation: cardIn 1s alternate cubic-bezier(0.87, -0.41, 0.19, 1.44);
}
@media (max-width: 767px) {
.card {
left: calc(50% - 115px);
top: calc(50% - 164.5px);
}
}
@media (max-width: 479px) {
.card {
left: calc(50% - 75px);
top: calc(50% - 107px);
}
}
.card:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 50px #000;
transition: all 0.5s ease-in-out;
}
.card.is-opened {
transform: rotate(0deg) translate(175px, 0);
}
@media (max-width: 767px) {
.card.is-opened {
transform: rotate(0deg) translate(115px, 0);
}
}
@media (max-width: 479px) {
.card.is-opened {
transform: rotate(0deg) translate(75px, 0);
}
}
.card.is-opened .cart-page-front {
transform: rotateY(-180deg);
}
@-webkit-keyframes cardIn {
0% {
opacity: 0;
transform: rotate(-10deg) translate(0, -100%);
}
25% {
opacity: 1;
}
100% {
opacity: 1;
transform: rotate(-10deg) translate(0, 0);
}
}
@keyframes cardIn {
0% {
opacity: 0;
transform: rotate(-10deg) translate(0, -100%);
}
25% {
opacity: 1;
}
100% {
opacity: 1;
transform: rotate(-10deg) translate(0, 0);
}
}
.card,
.card-page {
width: 350px;
height: 500px;
}
@media (max-width: 767px) {
.card,
.card-page {
width: 230px;
height: 329px;
}
}
@media (max-width: 479px) {
.card,
.card-page {
width: 150px;
height: 214px;
}
}
.card-page {
transition: transform 1s ease-in-out;
cursor: pointer;
position: absolute;
outline: 1px solid transparent;
}
.cart-page-front {
transform-origin: 0 50% 0;
transform-style: preserve-3d;
transform: rotateY(-20deg);
z-index: 2;
}
.cart-page-outside,
.cart-page-inside {
position: absolute;
-webkit-backface-visibility: hidden;
}
.cart-page-outside {
border: 10px solid #fbfbfb;
background: #c72320 url("https://www.dropbox.com/s/xsgg2exs2oparkm/front-bg.png?raw=1") no-repeat center;
background-size: cover;
width: 100%;
height: 100%;
}
@media (max-width: 767px) {
.cart-page-outside {
border: 5px solid #fbfbfb;
}
}
.cart-page-inside,
.cart-page-bottom {
background-color: #d4d1d0;
background-image: url("https://www.dropbox.com/s/8hw7guch8d151kg/pattern.png?raw=1");
border: 20px solid #d4d1d0;
display: -webkit-box;
display: -moz-box;
display: box;
display: -moz-flex;
display: flex;
box-pack: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
box-align: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
text-align: center;
}
@media (max-width: 767px) {
.cart-page-inside,
.cart-page-bottom {
border: 10px solid #d4d1d0;
}
}
.cart-page-inside {
transform: rotateY(-180deg);
border-right: none !important;
background-position: 0px 80px;
}
@media (max-width: 767px) {
.cart-page-inside {
background-position: 0px 30px;
}
}
@media (max-width: 479px) {
.cart-page-inside {
background-position: 0px 30px;
}
}
.cart-page-bottom {
z-index: 1;
border-left: none !important;
background-position: -22px 80px;
}
@media (max-width: 767px) {
.cart-page-bottom {
background-position: 85px 30px;
}
}
@media (max-width: 479px) {
.cart-page-bottom {
background-position: 0px 30px;
}
}
.merry-christmas {
transform: rotate(-20deg);
}
.merry-christmas svg {
width: 350px;
height: auto;
}
@media (max-width: 767px) {
.merry-christmas svg {
width: 200px;
}
}
@media (max-width: 479px) {
.merry-christmas svg {
width: 150px;
}
}
.click-icon {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: 20px;
-webkit-animation: iconAnimation 1s infinite alternate ease-in-out;
animation: iconAnimation 1s infinite alternate ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity: 1;
}
.click-icon svg {
width: 96px;
height: 96px;
}
@media (max-width: 767px) {
.click-icon svg {
width: 72px;
height: 72px;
}
}
@media (max-width: 479px) {
.click-icon svg {
width: 48px;
height: 48px;
}
}
.click-icon.is-hidden {
圣诞贺卡.zip （1个子文件） 
圣诞贺卡.html 30KB资源评论
LeonDL168
- 粉丝: 3003
- 资源: 785
最新资源
- Socket tcp服务器端通信框架，服务器端部分，这是从一个商业级的物联网项目分离出来的核心代码，让你绕过最难写的Socket管理，内置两个Socket，有两个数据缓冲队列，，仅一个DLL文件，调用
- moubus下位机+上位机
- 三菱FX3U系列13伺服焊接系统程序，本人以前工程项目亲自编写，比系统包括了PLC之间通讯，伺服定位，模拟量高级应用 PLC程序，触摸屏程序，原理图全部包含 需要软件者送软件 送FX3U编程资料
- cocosCreator 实时高斯模糊套餐
- SecureJS目标网站链接采集工具
- 西门子1500plc，杀菌机功能比较齐整，程序灵活度很高，通过一级代码和二级代码，步骤和每步的动作都可在屏上更改，输出输入屏上灵活操作
- SM2、SM3、SM4加密解密源程序
- 信捷XDPLC和两台变频器通讯程序，已经实机量产运行 实时读取变频器频率，故障代码，多段速度通讯实时动态更新 基本上各品牌变频器都可以控制参照用 最大可控32台 走串口485.MODBUS R
- DSP28035 Bootloader CAN在线升级程序DSP Bootloader TMS320F28035、TMS320F28335 UART、SPI、TCP、CAN在线升级程序，提供Bootl
- CIBV6.0.24.apk
- 2ASK调制解调通信链路matlab误码率仿真【包括程序，中文注释，程序操作和讲解视频】
- 内网穿透介绍 于如何实现远程管理或让局域网的服务可以被公网访问到.比如： 微信公众号小程序开发调试 公网访问本地 web 项目 异地远程处理公司服务问题
- EverydayTechNews(每日科技新闻)每天自动发送科技新闻到邮箱
- 微信小程序开发入门教程：从注册账号到首屏‘Hello World’的完整流程指导
- HiToolsDeliverySetup_CN_1736978428458.zip
- 730528018599182MarkDown教程.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
