時間：2023-07-20 08:12:01 | 來源：網(wǎng)站運營
時間：2023-07-20 08:12:01 來源：網(wǎng)站運營
?生日禮物/告白/七夕情人節(jié)? HTML+css3+js 實現(xiàn)炫酷3D相冊 (含背景音樂)： 一年一度的/520/七夕情人節(jié)/女朋友生日/程序員表白,是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇博客就分享下前端代碼如何實現(xiàn)3D立體動態(tài)相冊。趕緊學(xué)會了，來制作屬于我們程序員的浪漫吧！
在線咨詢
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.min.js"></script> <link type="text/css" href="./css/style.css" rel="stylesheet" /> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .container { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #000000; } </style> </head> <body> <audio autoplay="autopaly"> <source src="renxi.mp3" type="audio/mp3" /> </audio> <div id="jsi-cherry-container" class="container"> <div class="box"> <ul class="minbox"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ol class="maxbox"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> </div> <script> .... </script> </body></html>@charset "utf-8";*{ margin:0; padding:0;}body{ max-width: 100%; min-width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size:100% 100%; position: absolute; margin-left: auto; margin-right: auto;}li{ list-style: none;}.box{ width:200px; height:200px; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size:100% 100%; position: absolute; margin-left: 42%; margin-top: 22%; -webkit-transform-style:preserve-3d; -webkit-transform:rotateX(13deg); -webkit-animation:move 5s linear infinite;}.minbox{ width:100px; height:100px; position: absolute; left:50px; top:30px; -webkit-transform-style:preserve-3d;}.minbox li{ width:100px; height:100px; position: absolute; left:0; top:0;}.minbox li:nth-child(1){ background: url(../images/01.png) no-repeat 0 0; -webkit-transform:translateZ(50px);}.minbox li:nth-child(2){ background: url(../images/02.png) no-repeat 0 0; -webkit-transform:rotateX(180deg) translateZ(50px);}.minbox li:nth-child(3){ background: url(../images/03.png) no-repeat 0 0; -webkit-transform:rotateX(-90deg) translateZ(50px);}.minbox li:nth-child(4){ background: url(../images/04.png) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px);}.minbox li:nth-child(5){ background: url(../images/05.png) no-repeat 0 0; -webkit-transform:rotateY(-90deg) translateZ(50px);}.minbox li:nth-child(6){ background: url(../images/06.png) no-repeat 0 0; -webkit-transform:rotateY(90deg) translateZ(50px);}.maxbox li:nth-child(1){ background: url(../images/1.png) no-repeat 0 0; -webkit-transform:translateZ(50px);}.maxbox li:nth-child(2){ background: url(../images/2.png) no-repeat 0 0; -webkit-transform:translateZ(50px);}.maxbox li:nth-child(3){ background: url(../images/3.png) no-repeat 0 0; -webkit-transform:rotateX(-90deg) translateZ(50px);}.maxbox li:nth-child(4){ background: url(../images/4.png) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px);}.maxbox li:nth-child(5){ background: url(../images/5.png) no-repeat 0 0; -webkit-transform:rotateY(-90deg) translateZ(50px);}.maxbox li:nth-child(6){ background: url(../images/6.png) no-repeat 0 0; -webkit-transform:rotateY(90deg) translateZ(50px);}.... 完整代碼在下方↓公眾號獲取var RENDERER = { INIT_CHERRY_BLOSSOM_COUNT: 30, MAX_ADDING_INTERVAL: 10, init: function() { this.setParameters(); this.reconstructMethods(); this.createCherries(); this.render(); if ( navigator.userAgent.match( /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i ) ) { var box = document.querySelectorAll('.box')[0]; console.log(box, '移動端'); box.style.marginTop = '65%'; } }, setParameters: function() { this.$container = $('#jsi-cherry-container'); this.width = this.$container.width(); this.height = this.$container.height(); this.context = $('<canvas />') .attr({ width: this.width, height: this.height }) .appendTo(this.$container) .get(0) .getContext('2d'); this.cherries = []; this.maxAddingInterval = Math.round( (this.MAX_ADDING_INTERVAL * 1000) / this.width ); this.addingInterval = this.maxAddingInterval; }, reconstructMethods: function() { this.render = this.render.bind(this); }, createCherries: function() { for ( var i = 0, length = Math.round( (this.INIT_CHERRY_BLOSSOM_COUNT * this.width) / 1000 ); i < length; i++ ) { this.cherries.push(new CHERRY_BLOSSOM(this, true)); } }, render: function() { requestAnimationFrame(this.render); this.context.clearRect(0, 0, this.width, this.height); this.cherries.sort(function(cherry1, cherry2) { return cherry1.z - cherry2.z; }); for (var i = this.cherries.length - 1; i >= 0; i--) { if (!this.cherries[i].render(this.context)) { this.cherries.splice(i, 1); } } if (--this.addingInterval == 0) { this.addingInterval = this.maxAddingInterval; this.cherries.push(new CHERRY_BLOSSOM(this, false)); } } }; var CHERRY_BLOSSOM = function(renderer, isRandom) { this.renderer = renderer; this.init(isRandom); };.... 完整代碼在下方↓公眾號獲取關(guān)鍵詞：實現(xiàn),相冊,音樂,背景,七夕,告白,禮物,生日
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
