HTML旋转相册(520表白神器)

马上520了，看到一篇博客，适合520做表白礼物，无商用，纯分享，有需要的可以自行复制使用，换下图片就可以了，图片重命名为 1.jpg 2.jpg 3.jpg 以此规律命名。

<!DOCTYPE html>
<html lang="en" ondragstart="return false"><head><meta charset="UTF-8" /><meta name="Keywords" content="" /><meta name="Description" content="" /><title>图册</title><!-- 如果我有天醒来 --><!-- 层叠样式表 --><style type="text/css">/* 去掉默认效果 */* {margin: 0;padding: 0;}body {background: #222;overflow: hidden;/* 取消选中 */user-select: none;}@keyframes rotate {100% {transform: rotateY(360deg);}}.perspective {/*子元素透视 场景深度*/perspective: 600px;}.wrap {/* 3d */width: 135px;height: 240px;margin: 100px auto;position: relative;/* border: 1px solid red; */transform: rotateX(-20deg) rotateY(0deg);transform-style: preserve-3d;}.wrap img {display: block;/* 绝对定位 */position: absolute;width: 100%;height: 100%;transform: rotateY(0deg) translateZ(0px);background: transparent;box-shadow: 0 0 4px #fff;border-radius: 5px;/* webkit */}/* 照片底座 */.wrap p {width: 1200px;height: 1200px;background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, 0.5), rgba(0, 0, 0, 0));position: absolute;border-radius: 50%;left: 50%;top: 100%;margin-left: -600px;margin-top: -600px;/* 沿着x轴按倒 */transform: rotateX(90deg);}</style></head><body><!-- 盒子容器 --><div class="perspective"><div class="wrap" id="imgwrap"><!-- 引入图片值页面 --><img class="f1" src="img/12.jpeg" /><img class="f1" src="img/13.jpeg" /><img class="f1" src="img/14.jpeg" /><img class="f1" src="img/15.jpeg" /><img class="f1" src="img/16.jpeg" /><img class="f1" src="img/1.jpeg" /><img class="f1" src="img/2.jpeg" /><img class="f1" src="img/3.jpeg" /><img class="f1" src="img/4.jpeg" /><img class="f1" src="img/5.jpeg" /><img class="f1" src="img/6.jpeg" /><img class="f1" src="img/7.jpeg" /><img class="f1" src="img/5.jpeg" /><img class="f1" src="img/6.jpeg" /><img class="f1" src="img/7.jpeg" /><img class="f1" src="img/8.jpeg" /><img class="f1" src="img/9.jpeg" /><img class="f1" src="img/10.jpeg" /><img class="f1" src="img/11.jpeg" /><img class="f1" src="img/17.jpeg" /><img class="f1" src="img/18.jpeg" /><img class="f1" src="img/19.jpeg" /><img class="f1" src="img/20.jpeg" /><img class="f1" src="img/21.jpeg" /><img class="f1" src="img/22.jpeg" /><img class="f1" src="img/23.jpeg" /><img class="f1" src="img/24.jpeg" /><img class="f1" src="img/25.jpeg" /><img class="f1" src="img/26.jpeg" /><img class="f1" src="img/27.jpeg" /><img class="f1" src="img/28.jpeg" /><img class="f1" src="img/29.jpeg" /><img class="f1" src="img/30.jpeg" /><!-- 引入图片值页面 --><img class="f2" src="img/1.jpeg" /><img class="f2" src="img/2.jpeg" /><img class="f2" src="img/3.jpeg" /><img class="f2" src="img/4.jpeg" /><img class="f2" src="img/5.jpeg" /><img class="f2" src="img/9.jpeg" /><img class="f2" src="img/10.jpeg" /><img class="f2" src="img/11.jpeg" /><img class="f2" src="img/12.jpeg" /><img class="f2" src="img/25.jpeg" /><img class="f2" src="img/26.jpeg" /><img class="f2" src="img/27.jpeg" /><img class="f2" src="img/28.jpeg" /><img class="f2" src="img/29.jpeg" /><img class="f2" src="img/30.jpeg" /><img class="f2" src="img/13.jpeg" /><img class="f2" src="img/14.jpeg" /><img class="f2" src="img/15.jpeg" /><img class="f2" src="img/16.jpeg" /><img class="f2" src="img/17.jpeg" /><img class="f2" src="img/18.jpeg" /><img class="f2" src="img/19.jpeg" /><img class="f2" src="img/20.jpeg" /><img class="f2" src="img/21.jpeg" /><img class="f2" src="img/22.jpeg" /><img class="f2" src="img/23.jpeg" /><img class="f2" src="img/24.jpeg" /><img class="f2" src="img/6.jpeg" /><img class="f2" src="img/7.jpeg" /><img class="f2" src="img/5.jpeg" /><img class="f2" src="img/6.jpeg" /><img class="f2" src="img/7.jpeg" /><img class="f2" src="img/8.jpeg" /><!-- 引入图片值页面 --><img class="f3" src="img/1.jpeg" /><img class="f3" src="img/2.jpeg" /><img class="f3" src="img/11.jpeg" /><img class="f3" src="img/12.jpeg" /><img class="f3" src="img/25.jpeg" /><img class="f3" src="img/26.jpeg" /><img class="f3" src="img/27.jpeg" /><img class="f3" src="img/3.jpeg" /><img class="f3" src="img/4.jpeg" /><img class="f3" src="img/5.jpeg" /><img class="f3" src="img/16.jpeg" /><img class="f3" src="img/17.jpeg" /><img class="f3" src="img/18.jpeg" /><img class="f3" src="img/10.jpeg" /><img class="f3" src="img/28.jpeg" /><img class="f3" src="img/29.jpeg" /><img class="f3" src="img/30.jpeg" /><img class="f3" src="img/13.jpeg" /><img class="f3" src="img/19.jpeg" /><img class="f3" src="img/20.jpeg" /><img class="f3" src="img/21.jpeg" /><img class="f3" src="img/22.jpeg" /><img class="f3" src="img/23.jpeg" /><img class="f3" src="img/24.jpeg" /><img class="f3" src="img/9.jpeg" /><img class="f3" src="img/14.jpeg" /><img class="f3" src="img/15.jpeg" /><img class="f3" src="img/6.jpeg" /><img class="f3" src="img/7.jpeg" /><img class="f3" src="img/5.jpeg" /><img class="f3" src="img/6.jpeg" /><img class="f3" src="img/7.jpeg" /><img class="f3" src="img/8.jpeg" /><p></p></div></div><!--  src="JS/photo.js" --><script type="text/javascript">var oImg = document.getElementsByClassName("f1");var oImg2 = document.getElementsByClassName("f2");var oImg3 = document.getElementsByClassName("f3");var len = oImg.length;console.log(len);var deg = 360 / len;var oWrap = document.getElementById("imgwrap");// var oWrap=document.querySelector('.wrap');//页面加载完毕在执行的代码window.onload = function () {Array.prototype.forEach.call(oImg, function (ele, index, self) {// 旋转并沿Z轴平移ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});Array.prototype.forEach.call(oImg2, function (ele, index, self) {// 旋转并沿Z轴平移ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});Array.prototype.forEach.call(oImg3, function (ele, index, self) {// 旋转并沿Z轴平移ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});// Array.prototype.forEach.call(oImg, function (ele, index, self) {//       // 旋转并沿Z轴平移//       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";//       //过渡时间1s//       ele.style.transition = "1s " + (len - index) * 0.1 + "s";// });};//翻动3D相册var newX,newY,lastX,lastY,minusX,minusY,rotX = -20,rotY = 0;document.onmousedown = function (e) {// 点击设置初值lastX = e.clientX;lastY = e.clientY;this.onmousemove = function (e) {newX = e.clientX;newY = e.clientY;minusX = newX - lastX;minusY = newY - lastY;rotX -= minusY * 0.2;rotY += minusX * 0.1;oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";lastX = newX;lastY = newY;};this.onmouseup = function (e) {//鼠标松开this.onmousemove = null; //清除鼠标移动};};</script></body>
</html>

HTML旋转相册(520表白神器)相关推荐

html表白代码照片墙代码,前端特效之520表白神器-旋转照片墙
520马上到了,教大家一手表白神器,单身的程序员们感觉学起来,很简单. 制作步骤: 1. 新建代码目录,新建文件index.html,将以下代码拷贝到文件中 2. 新建文件夹image,找12张图片放 ...
python写520_用Python做一个520表白神器，值得收藏
本文最后给出了打包好的软件,无需安装Python环境和各种依赖,直接下载软件,解压后,双击exe文件即可使用. 先来看一下具体的效果. 运行程序. 用Python做一个520表白神器,值得收藏点击「 ...
python制作表白神器_用Python做一个520表白神器，值得收藏
本文最后给出了打包好的软件,无需安装Python环境和各种依赖,直接下载软件,解压后,双击exe文件即可使用. 先来看一下具体的效果. 运行程序. 点击「选择图片」选择JPG/JPGE/PNG三种中 ...
python 情书_用Python做一个520表白神器，值得收藏(示例代码)
本文最后给出了打包好的软件,无需安装Python环境和各种依赖,直接下载软件,解压后,双击exe文件即可使用. 先来看一下具体的效果. 运行程序. 点击「选择图片」选择JPG/JPGE/PNG三种中 ...
Python|520表白神器
1前言众所周知,5月20日为"520"情人节,这一天也是即将到来,大家都希望与自己的男神女神过一个浪漫的情人节.但是还有很多像小编这样的单身狗,不知道如何向自己的男神女神表达心意 ...
520表白神器-教你用微信每天给TA说晚安
又是一年虐狗日,有男票或女票的,礼物准备好没? 今天大家准备了一份520专属告白文案,可以用在恋情继续的告白上.也可以用在脱单告白上哦! 拿去吧,不用谢,谁让你是我的小可爱呢! 此程序结合数据抓取 + ...
用python做一个表白神器_30秒教会你用Python制作520表白神器
import turtleimport time# writing txtturtle.hideturtle()turtle.penup()turtle.goto(80, 50)# turtle.pe ...
Java-Swing实现520表白神器
我们首先看一下实现的效果: 这是打包后的exe文件执行的效果,但是在编辑器中运行的效果和exe文件运行的效果还是有点出入的. 比如打包以后窗口生成的位置有所变化,字体有些许模糊了,视觉上来看按钮变大了 ...
好用的python表白神器_Python|520表白神器
import pygame from pygame import * pygame.init() fps = 60 fpsClock = pygame.time.Clock() icon = pyga ...

HTML旋转相册(520表白神器)

HTML旋转相册(520表白神器)相关推荐

最新文章

热门文章