一丶相册效果

未展开前
展开后相册会自动旋转，底部还有倒影哦（展开时有个很nice的动画效果~）。
可以滚动鼠标轮盘放大缩小
使用鼠标还可以拖动相册观看图片喔！！（ps:底部可以放上你想说的文字）

二丶代码

html + css + js

html

<!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"><link rel="stylesheet" href="./style.css"><title>相册</title>
</head>
<body><div id="darg-container" class="darg"><div id="spin-container"><img src="https://wx1.sinaimg.cn/mw690/005O0Eg8ly1gotxuie9j6j30u0140nbw.jpg" alt=""><img src="https://wx3.sinaimg.cn/mw690/005O0Eg8ly1gotxtmlxmoj30u00u0am1.jpg" alt=""><img src="https://wx1.sinaimg.cn/mw690/005O0Eg8ly1gotxtd5gabj30u0140wr0.jpg" alt=""><img src="https://wx3.sinaimg.cn/mw690/005O0Eg8ly1gotxtay26bj30u0140h1u.jpg" alt=""><img src="https://wx3.sinaimg.cn/mw690/005O0Eg8ly1gotxtfmubwj30u0140tlf.jpg" alt=""><img src="https://wx1.sinaimg.cn/mw690/005O0Eg8ly1gotxthie2gj31400u0wor.jpg" alt=""><img src="https://wx1.sinaimg.cn/mw690/005O0Eg8ly1gotxthie2gj31400u0wor.jpg" alt=""><a target="_blank" href=""><img src="https://wx3.sinaimg.cn/mw690/005O0Eg8gy1gpdup8vs01j30u00u0n50.jpg" alt=""></a><!-- <video controls autoplay="autoplay" loop><source src="https://wx3.sinaimg.cn/mw690/005O0Eg8gy1gpdup8vs01j30u00u0n50.jpg" type="video/mp4"></video>  --><p>3D Tiktok Carousel</p></div><div id="ground"></div></div><script src="./index.js"></script>
</body>
</html>

* {margin: 0;padding: 0;
}html, body{height: 100%;
}body{overflow: hidden;display: flex;background: #111;perspective: 1000px;transform-style: preserve-3d;
}#darg-container, #spin-container{position: relative;display: -webkit-box;display: flex;margin:  auto;transform-style: preserve-3d;transform: rotateX(-10deg);
}#darg-container img, #darg-container video{transform-style: preserve-3d;position: absolute;left: 0;top: 0;width: 100%;height: 100%;line-height: 200px;font-size: 50px;text-align: center;box-shadow: 0 0 8px #fff;-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005)
}#darg-container p {font-family: serif;position: absolute;top: 100%;left: 50%;color: #fff;transform: translate(-50%, -50%) rotateX(90deg);
}#ground {width: 900px;height: 900px;position: absolute;top: 100%;left: 50%;transform: translate(-50%, -50%) rotateX(90deg);background: -webkit-radial-gradient(center center, farthest-side, #9993, transparent);
}@keyframes spin{from{transform:rotateY(0deg);}to{transform: rotateY(360deg);}
}/* #spin-container{animation: spin 10s infinite linear;
} */@keyframes spinRevert{from{transform:rotateY(360deg);}to{transform: rotateY(0deg);}
}

var radius = 240
var imgWidth = 120
var imgHeight = 170
var autoRotate = true
var rotateSpeed = -60
//通过doucument获取到html的盒子，图片
var oDarg = document.getElementById('darg-container')
var oSpin = document.getElementById('spin-container')
var ground = document.getElementById('ground')
var aImg = oSpin.getElementsByTagName('img')
var aVid = oSpin.getElementsByTagName('video')
var aEle = [...aImg, ...aVid]//js6的一种连接数组的方式oSpin.style.width = imgWidth + 'px'
oSpin.style.height = imgHeight + 'px'ground.style.width = radius * 3 + 'px'
ground.style.height = radius * 3 + 'px'function init(delayTime) {// 给所有的图片加入场动画for (var i = 0; i < aEle.length; i++) {aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)"aEle[i].style.transition = "transform 1s"aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + 's'}
}
//(init初始化)创建一个定时器1s后执行动画
setTimeout(init, 1000)// 让所有的图片转起来
if (autoRotate) {var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert')oSpin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`
}// 滚轮滚动实现相册放大缩小
document.onmousewheel = function(e) {e = e || window.event  //防止出错var d = e.wheelDelta / 20 || -e.detailradius += dinit(1)
}var sX, sY, nX, nY, desX = 0, desY = 0, tX = 0, tY = 0;// 鼠标拖动页面
document.onpointerdown = function(e) {e = e || window.event//获取鼠标移动前的坐标var sX = e.clientX,sY = e.clientYthis.onpointermove = function(e) {e = e || window.event//获取鼠标移动后的坐标计算出鼠标垂直和水平方向上移动的距离var nX = e.clientX,nY = e.clientY;desX = nX - sX;desY = nY - sY;tX += desX * 0.1//让页面更具鼠标坐标变化进行动起来tY += desY * 0.1// 让页面跟着鼠标动起来applyTransform(oDarg)}//鼠标松开后界面不再随着鼠标拖动而移动this.onpointerup = function(e) {oDarg.timer = setTimeout(function() {playSpin(true)}, 17)this.onpointermove = this.onpointerup = null}return false
}//做一个图形移动的上限和下限
function applyTransform(obj) {if (tY > 180) tY = 180if (tY < 0) tY = 0obj.style.transform = `rotateX(${-tY}deg) rotateY(${tX}deg)`
}
//控制页面的旋转和暂停
function playSpin(yes) {oSpin.style.animationPlayState = (yes ? 'running' : 'paused')
}

JS代码中有详细的注释，赶快给别人的女朋友做一个吧~ 开个玩笑嘻嘻嘻… 有女朋友的不建议轻易尝试喔，铁汁抓紧给女友安排上吧！有需要的也可以收藏一波嘛

总结

给大家做个总结
1.html搭建框架，css使用3d展示。
2. js完成动画的制作，以及使用实现缩放及移动相册。
新人一枚，望各位大佬多多支持指教，发一个相册试试水，效果好的话，给大家上一个另外样式的相册~~

教你做一个送别人女友的网页相册（一）（HTML+CSS+JS实现）相关推荐

三步教你用Node做一个微信哄女友(基友)神器，小白可上手
前言不知道大家最近有没有被python版的<微信每日说>刷屏呢,他可是霸占了github的python热门快两周了.我们前端的小伙伴是不是也看着有点眼馋呢,因为毕竟是不那么熟悉的pyth ...
python手机版做小游戏代码大全-Python大牛手把手教你做一个小游戏，萌新福利！...
原标题:Python大牛手把手教你做一个小游戏,萌新福利! 引言最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规 ...
教你做一个优秀的项目经理
教你做一个优秀的项目经理如何做个好的项目经理?项目经理应该做什么?不应该做什么?这个问题涉及的范围很广,我只能就以前的一些项目经验谈谈个人的体会.难免有以偏盖全的地方,还请大家多提意见. 1.项目经 ...
手把手教你做一个自己的chrome扩展程序
手把手教你做一个自己的chrome扩展程序 [目录] first.效果 1.收藏夹修改 (1).鼠标移动到收藏夹上的动作效果 (2).收藏夹框 (3)百度搜索框功能 2.右上文字修改 3.背景图片修改 ...
手把手教你做一个Java贪吃蛇小游戏
大家好,我是孙不坚1208,这篇博客给大家分享一下:如何做一个贪吃蛇小游戏(Java版)的exe应用程序,希望能给需要帮助的朋友带来方便. 手把手教你做一个Java贪吃蛇小游戏的exe应用程序一.J ...
我的世界java版生存三叉戟_我的世界：三叉戟太难获得？教你做一个溺尸塔，三叉戟随便爆！...
那么在1.13海洋版本更新中,推出了一种全新的武器--三叉戟.极高的伤害,远近战兼备,加上花里胡哨的附魔,让很多玩家对三叉戟垂诞不已.但是,三叉戟获取的难度是较高的,目前生存中获得三叉戟的唯一方法就是 ...
如何做一个吸引人的自我介绍？
自我介绍是面试.社交场合以及工作环境中常见的一项任务.它是展示你自己的机会,同时也是给他人留下深刻印象的重要时刻.一个吸引人的自我介绍可以帮助你与他人建立良好的连接,并在职业和社交交往中取得成功.那么 ...
Blender图解教程：手把手教你做一个马里奥金币之图片转法线贴图法（附模型下载）
<Blender图解教程:手把手教你做一个马里奥金币之比较传统的方法>介绍了一种用Blender制作法线贴图的流程,本文介绍一种更加省事的方法. 步骤效果图概要步骤 1. 建模 ...
手把手教你做一个物联网视频监控项目（三）流媒体方案实现
往期文章手把手教你做一个物联网视频监控项目(一) 介绍手把手教你做一个物联网视频监控项目(二)MJPG-streamer方案实现文章目录前言一.软硬件准备二.流媒体方案的实现之FFmpeg ...

教你做一个送别人女友的网页相册（一）（HTML+CSS+JS实现）

女友的网页相册（一）

一丶相册效果

二丶代码

总结

教你做一个送别人女友的网页相册（一）（HTML+CSS+JS实现）相关推荐

最新文章

热门文章