Super hot 3D photo album (confession) making tutorial is here
❤Chinese Valentine's Day confession, programmers can also be very romantic ❤ 520 creative confession website, let your girlfriend be heartbroken to you. The goddess can easily lead home ❤
Html+css to achieve 3d rotating album-including music, (birthday girlfriend, confession, sultry girl), dynamic generation effect, vibrato very popular rotating album, made like this~, now, more and more Many people like to use videos to record their lives, and friends with many photos will also choose to make dynamic album videos, which are not only creative, but also show their self-demeanor.
The effect is cool, the theme is -Happy Birthday/Sister Artifact/3D Album/Confession, it will be a good gift to your beloved girl or practice your own hands, welcome to download!
More beautiful 3D materials
❤Rotate 3D Meteor Album (Rotate/Drag/Scroll-with music)
Online demo address
download link
Static effect
Start making
First, you need to prepare 10 pictures without cropping.
Focus>(Solved) Free-Deploy online tools (permanently available)
You can deploy online without buying a server , and the whole world can access your connection. Here is a must-have software for programmers, and you need a tutorial to contact me. The
plug-in integrates a lot of useful plug-ins, free download and installation, simple Easy to understand, it is an artifact! Who uses it and knows it!!!
Deployment process
If the connection is successful, you can visit your webpage happily
Code part
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D旋转相册</title>
<link rel="stylesheet" href="style.css">
<style>
*{
margin: 0;padding: 0;}
html,body{
height: 100%;}
body{
display: flex;
perspective: 1000px;
transform-style: preserve-3d;
/* background-image: url(./img/3.png); */
height:100%;
width: 100%;
}
#box p{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 1200px;
height: 1200px;
background: -webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
border-radius: 50%;
transform: rotateX(90deg) translate3d(-600px,0,-105px);
}
</style>
</head>
<body>
<!-- 相册 -->
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p></p>
</div>
<!-- 流星 -->
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
....
制作不易, 需要完整代码请联系我qq 365392777
</body>
</html>
css part (meteor)
/* 流星css */
:root {
--primary-color: hsl(196, 78%, 61%);
--secondary-color: hsl(217, 15%, 83%);
--success-color: hsl(165, 58%, 55%);
--info-color: hsl(214, 79%, 65%);
--warning-color: hsl(43, 100%, 66%);
--danger-color: hsl(354, 81%, 63%);
--primary-color-darker: hsl(196, 68%, 54%);
--secondary-color-darker: hsl(215, 13%, 70%);
--success-color-darker: hsl(165, 55%, 48%);
--info-color-darker: hsl(214, 68%, 58%);
--warning-color-darker: hsl(39, 97%, 62%);
--danger-color-darker: hsl(354, 67%, 56%);
--primary-color-lighter: hsl(196, 78%, 81%);
--secondary-color-lighter: hsl(214, 16%, 92%);
--success-color-lighter: hsl(165, 58%, 75%);
--info-color-lighter: hsl(214, 79%, 85%);
--warning-color-lighter: hsl(43, 100%, 86%);
--danger-color-lighter: hsl(354, 81%, 83%);
--secondary-color-darkest: hsl(215, 11%, 30%);
--secondary-color-lightest: hsl(220, 1%, 98%);
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
overflow: hidden;
}
.star {
--star-color: var(--primary-color);
--star-tail-length: 6em;
--star-tail-height: 2px;
--star-width: calc(var(--star-tail-length) / 6);
--fall-duration: 9s;
--tail-fade-duration: var(--fall-duration);
position: absolute;
top: var(--top-offset);
left: 0;
width: var(--star-tail-length);
height: var(--star-tail-height);
color: var(--star-color);
background: linear-gradient(45deg, currentColor, transparent);
border-radius: 50%;
filter: drop-shadow(0 0 6px currentColor);
transform: translate3d(104em, 0, 0);
animation: fall var(--fall-duration) var(--fall-delay) linear infinite,
tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}
@media screen and (max-width: 750px) {
.star {
animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
}
}
.star:nth-child(1) {
--star-tail-length: 6.07em;
--top-offset: 18.71vh;
--fall-duration: 6.295s;
--fall-delay: 8.613s;
}
.star:nth-child(2) {
--star-tail-length: 5.87em;
--top-offset: 91.61vh;
--fall-duration: 6.744s;
--fall-delay: 5.299s;
}
.star:nth-child(3) {
--star-tail-length: 7.01em;
--top-offset: 66.77vh;
--fall-duration: 7.356s;
--fall-delay: 8.793s;
}
.star:nth-child(4) {
--star-tail-length: 5.54em;
--top-offset: 3.44vh;
--fall-duration: 11.193s;
--fall-delay: 7.602s;
}
.star:nth-child(5) {
--star-tail-length: 7.37em;
--top-offset: 30.74vh;
--fall-duration: 7.323s;
--fall-delay: 5.879s;
}
.star::before {
transform: rotate(45deg);
}
.star::after {
transform: rotate(-45deg);
}
....
制作不易, 需要完整代码请联系我qq 365392777
js part
setTimeout(init,100);
function init(){
var obox = document.getElementById('box'),
aDiv = obox.getElementsByTagName('div');
for (var i = 0; i < aDiv.length; i++) {
aDiv[i].style.background = "url(img/"+(i+1)+".jpg) center/cover";
aDiv[i].style.transform = "rotateY("+(i*58)+"deg) translate3d(0,0,600px)";
aDiv[i].style.transition = "transform 1s "+(aDiv.length-i)*0.88+"s";
}
var sX,
sY,
nX,
nY,
desX = 0,
desY = 0,
tX = 0,
tY = 10,
index = 0;//滚轮初始值
document.onmousedown = function(e){
clearInterval(timer);
e = e || window.event;
var sX = e.clientX,
sY = e.clientY;
this.onmousemove = function(e){
e = e || window.event;
var nX = e.clientX,
nY = e.clientY;
// 当前点的坐标和前一点的坐标差值
desX = nX - sX;
desY = nY - sY;
tX += desX*0.1;
}
//滚轮放大缩小
mousewheel(document,function(e){
e = e || window.event;
var d = e.wheelDelta/120 || -e.detail/3;
if (d>0) {
index-=20;
}else{
index+=30;
}
})
function mousewheel(obj,fn){
document.onmousewheel===null?obj.onmousewheel=fn:addEvent(obj,"...",fn)
}
function addEvent(obj,fn){
obj.attachEvent?obj.attachEvent("on"+,fn):obj.addEventListener(eName,fn);
}
....
制作不易, 需要完整代码请联系我qq 365392777
}
Your eyes are so beautiful. There are sun and moon, winter and summer, sunny and rainy, mountains, flowers and plants, birds and beasts, but my eyes look better, because there is you in them. After you
learn it, let’s make one for your girlfriend!
It is not easy to make, friends who need source code, please add qq 365392777
Front-end entry to advanced teaching-materials (including video tutorials)
