编程制作动态壁纸的思路_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...
现在开始说说制作过程:
一、创建文件夹
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立体动态相册实现教程!(不懂编程也能学会)...相关推荐
- java3d翻转纪念相册_抖音上很火的3D立体动态相册实现代码!
前言: 圣诞节快到了,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧!先上效果图,来引起下你们的兴趣. ...
- 怎么用java做一个立体相册_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...
现在开始说说制作过程: 一.创建文件夹 1.在桌面建一个文件夹,命名随意 2.在文件夹里创建一个文件名为index.html的文件 3.在文件夹里创建两个文件名分别为img.css的文件夹 4.在cs ...
- 抖音上很火的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 ...
- 抖音3d相册html代码,抖音上很火的3D立体动态相册.html
纯CSS实现鼠标经过3D立体动态展示图片特效代码 *{ margin:0; padding:0; } body{ max-width: 100%; min-width: 100%; height: 1 ...
- 抖音上很火的3D立体动态相册代码制作教程
直接来正文 直接来干货 先创建一个html文件 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 抖音上很火的H53D立体动态相册效果
网站效果:http://www.fengzhao.icu/pic/index.html 动态效果图 源码Demo: 一.新建一个index.html的文件,代码如下 <!DOCTYPE html ...
- 用html3d静态相册带音乐,抖音上很火的H53D立体动态相册效果
网站效果:http://www.fengzhao.icu/pic/index.html 动态效果图 源码Demo:css 1.新建一个index.html的文件,代码以下 纯CSS实现鼠标通过3D立体 ...
- python如何写生日快乐说说_抖音上很火的生日句子,适合过生日发的高逼格
抖音上很火的生日时发的句子,还有给自己生日的高逼格祝福,码起来,迟早会用到. 抖音上很火的生日句子,适合过生日发的高逼格祝福: 1. 没有零点的生日祝福 没有煽情的语录 感恩所有 都是馈赠和成长 祝自 ...
- 抖音高贵气质的签名_抖音上很火的个性签名
抖音的个性签名是一个让大家一眼就可以了解该账号的展示方式,同时在抖音里经常会有一些账号因为个性签名变火,这里我们就整理了一些在抖音上很火的个性签名,大家可以参考一下! 1.尊严这种东西,你得有实力扞卫 ...
最新文章
- python标记跳转_Geany的跳转到标记定义“功能如何使用
- why SAP OData default 100 entries are returned
- 15crmo焊接后多长时间探伤_3分钟get钢筋焊接工程
- 在Linux中发现IP地址冲突的方法
- RocketMQ 重试机制
- NIPS 又!放!票!了!
- vue轮播插件vue-awesome-swiper
- 软件测试肖sir__简历模板制作
- ps怎么制作流体_PS制作流体效果的字体
- 提升效率!技术宅、学生党必备!大学四年使用的几十个高效工具都在这里了
- 灰色系统理论及其应用 (一) :灰色系统概论、关联分析、与传统统计方法的比较
- SU(seismic unix)常用操作001——sgy文件与su文件的相互转化
- 如何分析软件安全性需求
- Python 招聘信息爬取及可视化
- axure图标元件库icons满足不了需求?[一分钟教会你在axure下使用各式各样炫酷icons]!! 仅限谷歌浏览器
- (C++学习笔记一)命名空间 常量 字符串
- Chrome浏览器怎么调试网页标题字体大小和颜色?
- Linux设备驱动编程第三版-笔记
- 2020年9月23日 晴(补2020年9月22日 晴)
- (二)R语言数据结构——Vector, Matrix, List