抖音程序员HTML相册,快手抖音程序员表白女朋友3D立体相册源码html网页相册代码...
前几天分享了一套源码,今天又为大家带来一套类似的源码,希望大家喜欢!
快手抖音很火的程序员女朋友3D立体相册源码html网页相册代码,经测试在IE8浏览器下无法预览,建议使用支持HTML5与css3效果较好的360浏览器预览本源码。
代码如下:
index.html文件代码
3D立体动态相册-by xiaoyaogzs.com
*{
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(img/01.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
background: url(img/02.png) no-repeat 0 0;
-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
background: url(img/03.png) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
background: url(img/04.png) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
background: url(img/05.png) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
background: url(img/06.png) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
background: url(img/1.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
background: url(img/2.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
background: url(img/3.png) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
background: url(img/4.png) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
background: url(img/5.png) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
background: url(img/6.png) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
width: 800px;
height: 400px;
position: absolute;
left: 0;
top: -20px;
-webkit-transform-style: preserve-3d;
}
.maxbox li{
width: 200px;
height: 200px;
background: #fff;
border:1px solid #ccc;
position: absolute;
left: 0;
top: 0;
opacity: 0.2;
-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
-webkit-transform:translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(2){
-webkit-transform:rotateX(180deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(3){
-webkit-transform:rotateX(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(4){
-webkit-transform:rotateX(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(5){
-webkit-transform:rotateY(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(6){
-webkit-transform:rotateY(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
@keyframes move{
0%{
-webkit-transform: rotateX(13deg) rotateY(0deg);
}
100%{
-webkit-transform:rotateX(13deg) rotateY(360deg);
}
}
注意,图片的话
效果想展示最佳就按推荐的尺寸来,图片格式是png格式
01-06编号命名的图片尺寸是 100x100px的大小的,1-6编号是400x400px
源码下载:
由于图片文件较大,所以放在百度网盘了!
百度网盘
蓝奏云
抖音程序员HTML相册,快手抖音程序员表白女朋友3D立体相册源码html网页相册代码...相关推荐
- 超火的炫酷告白源码(HTML+CSS),前端表白源码,520表白,七夕情人节专属源码--文字开场白+相册旋转+浪漫3D樱花樱花雨
表白的套路很多,少不了送花送礼物,真情重要,钱就物质啦~ 我能给各位做的可能就只有分享一些表白源码了,很简单,一看就会.无论是在追女神的路上,还是女朋友,老婆,都可用哦.赶紧收藏起来啦,这样的节日很多 ...
- Java聊天室程序源码 Java即时通讯代码 Java局域网聊天系统 Java即时通讯 Java聊天系统
Java聊天室程序源码 Java即时通讯代码 Java局域网聊天系统 Java即时通讯 Java聊天系统 public Swingtest002() {// 设置标题setTitle("请 ...
- 程序员的硬核浪漫 — 女友专属语聊房(内附源码)
人人都说找个程序猿做男朋友就是好,钱多话少 over 早. 额...估计小编把文章发布出去后就要被公司的程序猿同胞们疯狂逮捕挨打了. 虽然日常生活中大家对程序猿的标签大多是呆板.木讷.不懂浪漫,格子衫 ...
- 程序员也可以浪漫----倾情奉献一份你值得拥有的浪漫网站源码(情人节快来了~)...
先说个好消息吧,我2015年2月12号就要订婚啦~~总算脱离程序员光棍生涯~~不得不说这个网站给了我很大的帮助!所以,我就想把这份源码也园子里的广大朋友们,希望在你们的爱情之路上,能发挥一点点的能量, ...
- 大厂程序员接私活被坑, 还被放鸽子,那源码就开源-基于SSM仿知乎小程序
最近很郁闷,一个女粉丝找我要开发一个系统.说是很着急. 但是费用不高,说自己没钱. 我平时事也很多,又不是很想接. 说了一大堆苦情的话,然后说自己的要求不高,没有ui要求, 我就接了. ...
- 外卖返利小程序饿了么美团吃喝玩乐电影票对接公众号返利系统分销系统源码
外卖返利cps分销系统每日领卷美团优惠券红包流量小程序搭建源码 外卖红包小程序 美团外卖小程序 饿了么外卖小程序 美团饿了吗红包,先领红包再下单.外卖红包,cps分成,别人领红包下单,你拿佣金. 美团 ...
- 中国象棋程序的设计与实现(六)--N皇后问题的算法设计与实现(源码+注释+截图)...
八皇后问题,是一个古老而著名的问题,是回溯算法的典型例题. 该问题是十九世纪著名的数学家高斯1850年提出:在8X8格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行.同一列 ...
- asp毕业设计——基于asp+access的网页设计辅导系统设计与实现(毕业论文+程序源码)——网页设计辅导系统
基于asp+access的网页设计辅导系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于asp+access的网页设计辅导系统设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦. ...
- 微信小程序UI自动化实践:python+minium+PO模式(超详细教程附源码供下载)
文章目录 前言 一.minium介绍 二.安装环境 1. 安装minium doc 2. 安装minium 3. 启动小程序 三.准备知识 1. 启动 2. 配置 3. 命令行运行 4. 元素定位 5 ...
最新文章
- MAC软件下载比较好的三个第三方网站
- 这是一个不完整的详细Java多线程,但对于初学者足够了,相信我,你会爱上她的
- python爬取学校题库_如何使用 Python 爬虫爬取牛客网 Java 题库?
- CentOS安装Mysql8各种坑。。。
- 8051系列单片机汇编语言指令速查表(汇编语言的111条指
- switch和if的比较
- 在linux操作系统中启动oracle数据库程序,Linux系统下Oracle数据库的安装和启动关闭操作教程...
- postman使用过程中body中的form-data,x-www-form-urlencoded,raw,binary的简单记录
- 牛客网——奥运排序问题
- 计算机网络基础代码,计算机网络基础知识(示例代码)
- python系列文章(基础,应用,后端,运维,自动化测试,爬虫,数据分析,可视化,机器学习,深度学习系列内容)
- jetty client 与apache http client的实现、分析
- win7原版镜像_封装二:Win7 预装软件 Setup 包集成方法
- ubuntu 16.04 64位 搭建GenieACS
- android 蓝牙打印乱码,蓝牙打印机打印中文乱码
- 计算机标点符号怎么切换,标点符号转换键是什么?
- 阿里云---云开发平台的创建与部署
- 完整的境外、港澳台、电信、移动、联通、教育网、国内其他ISP的IPv4列表(数据整理日期2022年4月)-IP列表太长只能份2篇发布(1/2)
- 山东移动携手华云数据打造DICT战略合作伙伴生态圈 推动区域数字经济高质量发展
- python之WeChat撩妹神奇
热门文章
- 用Kbuilder制作卡拉OK教程
- 10本营销好书!游戏营销、增长黑客、算法、数据分析、内容营销,总有一款你喜欢
- 《惢客创业日记》2019.03.30(周六)遗留工作进入收尾阶段
- linux系统中如何关闭后台运行的进程
- 浩方连接不上服务器无响应,sv独立客户端无法登陆服务器(sv独立客户端连接失败)...
- python处在哪个阶段_如何在学Python的过程中更好地成长技术
- 双碳丨碳库、碳平衡、温室气体、碳循环等多领域监测与模拟
- 30天敏捷结果(8):清空大脑,释放压力
- 电子商务专业(技术方向)学习经验(忠告)
- python画樱桃小丸子_学python画图最快的方式——turtle小海龟画图