现在开始说说制作过程:

一、创建文件夹

1.在桌面建一个文件夹，命名随意

2.在文件夹里创建一个文件名为index.html的文件

3.在文件夹里创建两个文件名分别为img、css的文件夹

4.在css文件夹里创建一个名为style.css的文件

二、导入文件

1.将index.html的文件以记事本的格式打开,并复制粘贴以下代码:

html>

酷炫3d

保存并退出

2.将style.css的文件以记事本的格式打开,并复制粘贴以下代码:

@charset "utf-8";

*{

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(1) img{

width: 100%;

height: 100%;

}

.minbox li:nth-child(2) img{

width: 100%;

height: 100%;

}

.minbox li:nth-child(3) img{

width: 100%;

height: 100%;

}

.minbox li:nth-child(4) img{

width: 100%;

height: 100%;

}

.minbox li:nth-child(5) img{

width: 100%;

height: 100%;

}

.minbox li:nth-child(6) img{

width: 100%;

height: 100%;

}

.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(1) img{

width: 100%;

height: 100%;

}

.maxbox li:nth-child(2) img{

width: 100%;

height: 100%;

}

.maxbox li:nth-child(3) img{

width: 100%;

height: 100%;

}

.maxbox li:nth-child(4) img{

width: 100%;

height: 100%;

}

.maxbox li:nth-child(5) img{

width: 100%;

height: 100%;

}

.maxbox li:nth-child(6) img{

width: 100%;

height: 100%;

}

.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);

}

}

保存并退出

三、处理图片

1.在网上找12张图片,最好是正方形的

2.用美图秀秀的批处理功能,把格式改成png格式,同时把首序号改成01,得到12张编号01-12png格式的照片

3.编号7-12的改成编号为1-6,再把2,02图片倒过来(其中01-06是内层,1-6是外层)

4.把所有照片放到img文件夹下

四、双击index.html

编程制作动态壁纸的思路_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...相关推荐

  1. java3d翻转纪念相册_抖音上很火的3D立体动态相册实现代码!

    前言: 圣诞节快到了,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧!先上效果图,来引起下你们的兴趣. ...

  2. 怎么用java做一个立体相册_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...

    现在开始说说制作过程: 一.创建文件夹 1.在桌面建一个文件夹,命名随意 2.在文件夹里创建一个文件名为index.html的文件 3.在文件夹里创建两个文件名分别为img.css的文件夹 4.在cs ...

  3. 抖音上很火的3D立体动态相册

    带背景音乐网站效果: http://www.fengzhao.icu/photos/html/%E6%8A%96%E9%9F%B3%E4%B8%8A%E5%BE%88%E7%81%AB%E7%9A%8 ...

  4. 抖音3d相册html代码,抖音上很火的3D立体动态相册.html

    纯CSS实现鼠标经过3D立体动态展示图片特效代码 *{ margin:0; padding:0; } body{ max-width: 100%; min-width: 100%; height: 1 ...

  5. 抖音上很火的3D立体动态相册代码制作教程

    直接来正文 直接来干货 先创建一个html文件 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. 抖音上很火的H53D立体动态相册效果

    网站效果:http://www.fengzhao.icu/pic/index.html 动态效果图 源码Demo: 一.新建一个index.html的文件,代码如下 <!DOCTYPE html ...

  7. 用html3d静态相册带音乐,抖音上很火的H53D立体动态相册效果

    网站效果:http://www.fengzhao.icu/pic/index.html 动态效果图 源码Demo:css 1.新建一个index.html的文件,代码以下 纯CSS实现鼠标通过3D立体 ...

  8. python如何写生日快乐说说_抖音上很火的生日句子，适合过生日发的高逼格

    抖音上很火的生日时发的句子,还有给自己生日的高逼格祝福,码起来,迟早会用到. 抖音上很火的生日句子,适合过生日发的高逼格祝福: 1. 没有零点的生日祝福 没有煽情的语录 感恩所有 都是馈赠和成长 祝自 ...

  9. 抖音高贵气质的签名_抖音上很火的个性签名

    抖音的个性签名是一个让大家一眼就可以了解该账号的展示方式,同时在抖音里经常会有一些账号因为个性签名变火,这里我们就整理了一些在抖音上很火的个性签名,大家可以参考一下! 1.尊严这种东西,你得有实力扞卫 ...

最新文章

  1. JVM内存泄漏检测与处理
  2. 如何造出逼真图像？南洋理工Zheng博士论文《基于深度生成学习的逼真图像合成》197页pdf阐述视觉合成工作...
  3. gcc s.lds 使用方法
  4. html5怎么要文字飘起来,html分享之一个超级炫酷的-404飞起来了
  5. 【Java每日一题】20161219
  6. 课时3.浏览器访问网页原理（理解）
  7. html5基础--audio标签元素
  8. 尴尬！三星Galaxy S10系列面部识别疑似翻车：连兄妹都分不清
  9. Python matplotlib生成图片背景透明
  10. linux中断处理体系结构
  11. 微软终于屈服和妥协：宣布加入 OpenJDK，贡献构建Java生态
  12. Leetcode题目：Binary Tree Paths
  13. 点击劫持（clickjacking）
  14. 萤火虫小巷2（看完了）
  15. scada系统远程服务器,scada服务器是什么，scada系统的作用
  16. IndexedDB踩坑必须注意点！！！
  17. 微信推文中图片无法保存的解决方案
  18. _parameter；@param，refid是什么意思？
  19. ubuntu18.04下拨号上网pppoe存在多个pppd进程导致频繁断网
  20. android音乐播放器开发 SweetMusicPlayer 载入歌曲列表

热门文章

  1. IT外企那点儿事(转)
  2. hdu3001(状态压缩dp）
  3. 关于无线充电技术--转大神的文章
  4. UI设计在中国的现状
  5. Android启动应用时闪一下黑屏
  6. 《系统虚拟化与云计算》(三)云计算中的存储技术
  7. linux基础管道命令参数用法
  8. 佛前的虔诚，千年回眸
  9. SpringCloud及单点登录
  10. linux下 文件排序,把 Linux 上的文件列表和排序玩出花来