苏州网站建设推广,建筑工程承包合同,电商关键词一般用哪些工具,上海公司牌照成交价格表2021世界上总有一半人不理解另一半人的快乐。 ——《爱玛》 目录
一、前言
二、本期作品介绍 3D旋转相册
三、效果展示
四、详细介绍
五、编码实现
index.html
style.css
img 六、获取源码
公众号获取源码
获取源码#xff1f;私信#xff1f;关注#xff1f;点赞私信关注点赞收藏 一、前言 新的一年我们是是否需要一个新的相册呢答案是的。 2023年已经过去了一个半月的时间我们已经在2023年经历了大大小小很多的事情不知道那些事情值得你记忆呢你是否还记得呢 今天为大家推荐的是一款好看的3D旋转相册用来记录2023年的美好时刻一个不算新颖但很有创意的作品记录美好生活设计相册效果等。都是很值得使用的。 最近迎来新的一个学期的开始不知道你是否已经准备好迎接新的学期身边的朋友都陆陆续续的开学了我们也快了新的学期新的一年你有什么目标呢准备好实现了吗在此也祝大家在新的一学期迎来新的超越达到新的目标实现新的理想不断超越自己。 二、本期作品介绍 3D旋转相册 本文是一篇简单的前端代码主要内容仅包含 HTMLCSS 等内容 主要为 CSS 1、HTML代码 2、CSS样式 3、插件等 4、旋转特效 5、图片 6、鼠标放置效果 7、可添加背景音乐背景图等 8、添加文字介绍 三、效果展示 让我们一起欣赏吧 A.正常打开效果 B.鼠标放置 C.添加图片 注意哦 可以在此基础上添加背景音乐点击特效背景图等 特别提醒一下大家注意图片像素尺寸否则会显示不出来的/(ㄒoㄒ)/~~ 四、详细介绍 第一点 3D旋转相册顾名思义 第二点 可以自由添加背景音乐背景图等 第三点 可以用在多种情景普通相册展示介绍等 五、编码实现 显示完整代码
注意路径(⊙o⊙)
o(*▽*)ブ
(ง •_•)ง index.html !DOCTYPE html
html langen
head
meta charsetUTF-8
titleEnovo3D相册/titlelink typetext/css hrefcss/style.css relstylesheet //head
bodydiv classboxul classminboxli/lili/lili/lili/lili/lili/li/ulol classmaxboxli/lili/lili/lili/lili/lili/li/ol
/div
/body
/html style.css charset utf-8;
*{margin:0;padding:0;
}
body{/*background: url(../img/preview.png) ;*/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);}
}img 一定注意image文件的路径噢 六、获取源码
老规矩先给朋友们看一下完整文件夹
正确的文件如下图 复制源码的朋友们请注意了 公众号获取源码 第一步通过微信公众号下载源码压缩包解压并打开文件夹即为上图样式复制源码请注意路径及文件名 第二步点击 html 文件 打开即可查看 2023年第十八期希望得到大家的喜欢
希望大家有好的意见或者建议欢迎私信一起讨论(⊙o⊙)做出更改。
是否精彩呢如果有好的建议或者想法可以联系我一起交流 以上就是本篇文章的全部内容了 ~ 关注我点赞博文~ 每天带你涨知识!
1.看到这里了就 [点赞好评收藏] 三连 支持下吧你的「点赞好评收藏」是我创作的动力。
2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、C、数据结构、Python程序设计、Java程序设计、爬虫等 「在这里有好多 开发者一起探讨 前端 开发 知识互相学习」
3.以上内容技术相关问题可以相互学习可 关 注 ↓公 Z 号 获取更多源码 !
获取源码私信关注点赞收藏 ✏️⭐️ 有需要源码的小伙伴可以 关注下方微信公众号 Enovo开发工厂 回复 关键词 1-3D相册
