🌊 作者主页:海拥 🌊 作者简介 :🏆CSDN全栈领域优质创作者 、🥇HDZ核心组成员 🌊 粉丝福利:👉 粉丝群 👈每周送6-9本书,不定期送各种小礼品(往期获奖记录 )
视频及在线演示
💕浪漫信封:http:///eluvletter 💌3D樱花漫天飞舞:http:///yinghua 🌊公众号【海拥】回复【樱花】获取完整源码!
💕 浪漫信封
HTML 内容
< div id = " jsi-cherry-container" > </ div>
< section class = " container" id = " contact" >
< form class = " flip" >
< div class = " front" >
< h2> To Ming</ h2>
< a id = " flip2back" href = " #" > Flip</ a>
</ div>
< div id = " content" class = " back" >
< div id = " letter" >
< div class = " container" >
< div class = " flip" >
< div class = " front" > </ div>
< div class = " back" >
< p class = " letter" > </ p>
< a id = " close" href = " #" > Close</ a>
</ div>
</ div>
</ div>
</ div>
< div id = " top" >
< a id = " flip" href = " #contact" > Flip</ a>
</ div>
< div id = " lid" class = " container" >
< div class = " flip" >
< div class = " front" >
< a id = " open" href = " #content" > < span> </ span> </ a>
</ div>
< div class = " back" > </ div>
</ div>
</ div>
</ div>
</ form>
</ section>
< div id = " footer" >
< audio id = " music2" preload = " auto" loop > </ audio>
< a id = " music_btn2" href = " javascript:playPause();" > </ a>
</ div>
部分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> 夜には^300いつも^200寒いよね、^600でも、^600手を^200繋いでいると、^600暖か^200くなるよ!<br> どんなに^300寒い夜も、^600君と^300二人でいれば、^600ちっとも^300寒くない!<br><br><p style='float:right; display:block; width:80px;'>^1000H^200ao</p>" ] ,
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:///eluvletter
💌 3D樱花漫天飞舞
HTML 内容
< canvas id = " sakura" > </ canvas>
< div class = " btnbg" >
</ div>
< footer class = " page-footer" >
< span> made by </ span>
< a href = " http:///moyu" target = " _blank" >
< img class = " touxiang" src = " http:///wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" alt = " George Martsoukos logo" >
</ a>
</ footer>
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 内容
< script id= "sakura_point_vsh" type= "x-shader/x_vertex" >
uniform mat4 uProjection;
uniform mat4 uModelview;
uniform vec3 uResolution;
uniform vec3 uOffset;
uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
attribute vec3 aPosition;
attribute vec3 aEuler;
attribute vec2 aMisc; //x:size, y:fade
varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;
//varying mat3 rotMat;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;
varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;
void main ( void ) {
// Projection is based on vertical angle
vec4 pos = uModelview * vec4 ( aPosition + uOffset, 1.0 ) ;
gl_Position = uProjection * pos;
gl_PointSize = aMisc. x * uProjection[ 1 ] [ 1 ] / - pos. z * uResolution. y * 0.5 ;
pposition = pos. xyz;
psize = aMisc. x;
pdist = length ( pos. xyz) ;
palpha = smoothstep ( 0.0 , 1.0 , ( pdist - 0.1 ) / uFade. z) ;
vec3 elrsn = sin ( aEuler) ;
vec3 elrcs = cos ( aEuler) ;
mat3 rotx = mat3 (
1.0 , 0.0 , 0.0 ,
0.0 , elrcs. x, elrsn. x,
0.0 , - elrsn. x, elrcs. x
) ;
mat3 roty = mat3 (
elrcs. y, 0.0 , - elrsn. y,
0.0 , 1.0 , 0.0 ,
elrsn. y, 0.0 , elrcs. y
) ;
mat3 rotz = mat3 (
elrcs. z, elrsn. z, 0.0 ,
- elrsn. z, elrcs. z, 0.0 ,
0.0 , 0.0 , 1.0
) ;
mat3 rotmat = rotx * roty * rotz;
normal = rotmat[ 2 ] ;
mat3 trrotm = mat3 (
rotmat[ 0 ] [ 0 ] , rotmat[ 1 ] [ 0 ] , rotmat[ 2 ] [ 0 ] ,
rotmat[ 0 ] [ 1 ] , rotmat[ 1 ] [ 1 ] , rotmat[ 2 ] [ 1 ] ,
rotmat[ 0 ] [ 2 ] , rotmat[ 1 ] [ 2 ] , rotmat[ 2 ] [ 2 ]
) ;
normX = trrotm[ 0 ] ;
normY = trrotm[ 1 ] ;
normZ = trrotm[ 2 ] ;
const vec3 lit = vec3 ( 0.6917144638660746 , 0.6917144638660746 , - 0.20751433915982237 ) ;
float tmpdfs = dot ( lit, normal) ;
if ( tmpdfs < 0.0 ) {
normal = - normal;
tmpdfs = dot ( lit, normal) ;
}
diffuse = 0.4 + tmpdfs;
vec3 eyev = normalize ( - pos. xyz) ;
if ( dot ( eyev, normal) > 0.0 ) {
vec3 hv = normalize ( eyev + lit) ;
specular = pow ( max ( dot ( hv, normal) , 0.0 ) , 20.0 ) ;
}
else {
specular = 0.0 ;
}
rstop = clamp ( ( abs ( pdist - uDOF. x) - uDOF. y) / uDOF. z, 0.0 , 1.0 ) ;
rstop = pow ( rstop, 0.5 ) ;
//-0.69315 = ln(0.5)
distancefade = min ( 1.0 , exp ( ( uFade. x - pdist) * 0.69315 / uFade. y) ) ;
}
< / script>
演示图片
💌3D樱花漫天飞舞在线演示地址:http:///yinghua
HTML5制作3D樱花漫天飞舞及浪漫信封 [代码]
如果你在复制上述代码时遇到困难,可以通过下面的方式来创建此项目(使用 JavaScript 的 3D樱花漫天飞舞及浪漫信封)
有很多初学者无法将所有这些代码放在一起。对于他们,我已经把所有的代码放在一起了。关注公众号【海拥】回复【樱花】获取源码。
希望通过本教程,你也可以使用 HTML5制作3D樱花漫天飞舞及浪漫信封。
作者立志打造一个拥有100个小游戏/工具的摸鱼网站 ,更新进度:50/100
我已经写了很长一段时间的技术博客,并且主要通过CSDN发表,这是我的一篇关于如何使用 HTML5制作3D樱花漫天飞舞及浪漫信封。我喜欢通过文章分享技术与快乐。你可以访问我的博客: https://haiyong.blog.csdn.net/ 以了解更多信息。希望你们会喜欢!😊
💌 欢迎大家在评论区提出意见和建议 !💌