HTML制作3D樱花漫天飞舞及浪漫信封

最后

不知道你们用的什么环境，我一般都是用的Python3.6环境和pycharm解释器，没有软件，或者没有资料，没人解答问题，都可以免费领取（包括今天的代码），过几天我还会做个视频教程出来，有需要也可以领取~

给大家准备的学习资料包括但不限于：

Python 环境、pycharm编辑器/永久激活/翻译插件

python 零基础视频教程

Python 界面开发实战教程

Python 爬虫实战教程

Python 数据分析实战教程

python 游戏开发实战教程

Python 电子书100本

Python 学习路线规划

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

Flip

部分CSS

#letter {

background: #fafafa;

width: 90%;

height: 95%;

position: absolute;

left: 5%;

top: 5%;

z-index: 0;

-webkit-transition: .5s .5s;

-moz-transition: .5s .5s;

-o-transition: 0s 0s;

transition: 0s 0s; }

#content:target #letter {

top: -40%;

-o-transition: .5s .5s;

transition: .5s .5s; }

#letter .container {

position: absolute;

width: 100%;

/height: 50%;/

-webkit-perspective: 800px;

-moz-perspective: 800px;

perspective: 800px;

top: 0;

left: 0;

-webkit-transition: 0s 0s;

-moz-transition: 0s 0s;

transition: 0s 0s;

z-index: 1; }

#letter .flip {

width: 100%;

height: 100%; }

#letter .flip {

position: absolute;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transition: -webkit-transform 0.5s 0s;

-moz-transition: -moz-transform 0.5s 0s;

transition: -moz-transform 0.5s 0s;

-webkit-transform-origin: left top;

-moz-transform-origin: left top;

transform-origin: left top; }

#letter .flip > .front, #letter .flip > .back {

position: absolute;

width: 100%;

height: 100%;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

backface-visibility: hidden; }

#letter .flip > .back {

-webkit-transform: rotateX(180deg);

-moz-transform: rotateX(180deg);

transform: rotateX(180deg); }

#content:target #letter .flip {

-webkit-transform: rotateX(180deg);

-moz-transform: rotateX(180deg);

transform: rotateX(180deg);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

transition-duration: 0.5s;

-webkit-transition-delay: 1s;

-moz-transition-delay: 1s;

transition-delay: 1s; }

letter.js

var aparted = false;

$(“#open”).click(function(){

if(!aparted)

{

var typed = new Typed(‘.letter’, {

strings: [“^1000Dear  Ming”,

“M^{200ing<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;夜には}300いつも^{200寒いよね、}600でも、^600手を200繋いでいると、^600暖か200くなるよ！
       どんなに^{300寒い夜も、}600君と^{300二人でいれば、}600ちっとも^300寒くない！

^1000H200ao

”],

typeSpeed: 100,

backSpeed: 50

});

$(‘#open’).find(“span”).eq(0).css(‘background-position’, “0 -150px”);

aparted = true;

var music = document.getElementById(‘music2’);

if (music.paused)

{

music.play();

$(‘#music_btn2’).css(“opacity”, “1”);

}

}

});

function playPause() {

var music = document.getElementById(‘music2’);

var music_btn = $(‘#music_btn2’);

if (music.paused){

music.play();

music_btn.css(“opacity”, “1”);

}

else{

music.pause();

music_btn.css(“opacity”, “0.2”);

}

}

window.onload = function () {

var currentUrl = window.location.href;

var firstIndex = currentUrl.indexOf(“#”);

if (firstIndex <= 0) window.location.href = currentUrl + “#contact”;

$(‘#music2’).attr(‘src’, bgmsrc);

document.addEventListener(‘touchstart’,function (event) { if(event.touches.length > 1) event.preventDefault(); });

var lastTouchEnd = 0;

document.addEventListener(‘touchend’,function (event) {

var now = (new Date()).getTime();

if(now - lastTouchEnd <= 300) event.preventDefault();

lastTouchEnd = now;

}, false);

document.addEventListener(‘gesturestart’, function (event) { event.preventDefault(); });

$(‘body’).css(‘opacity’, ‘1’);

$(‘#jsi-cherry-container’).css(‘z-index’, ‘-99’);

}

演示图片

💕浪漫信封在线演示地址：http://haiyong.site/demo/eluvletter

💌 3D樱花漫天飞舞

---

HTML 内容

made by

CSS 内容

body {

padding:0;

margin:0;

overflow:hidden;

height: 600px;

}

canvas {

padding:0;

margin:0;

}

div.btnbg {

position:fixed;

left:0;

top:0;

}

.page-footer {

position: fixed;

right: 0;

bottom: 20px;

display: flex;

align-items: center;

padding: 5px;

color: black;

background: rgba(255, 255, 255, 0.65);

}

.page-footer a {

display: flex;

margin-left: 4px;

}

.touxiang{

width:24px;

height:24px;

}

部分 JS 内容