超简单：好看的电子相册制作！

文件层级参看我的另一篇文章https://blog.csdn.net/weixin_45512136/article/details/109085556

直接进入正题

1.index.css文件代码

* {margin: 0;padding: 0;
}.box {width: 100%;height: 100%;
}.box img {width: 100%;height: 100%;position: fixed;transition: all 1s linear;
}.list {position: absolute;z-index: 999;width: 1000px;height: auto;bottom: 20px;left: 0;right: 0;margin: auto;
}.list li {list-style: none;width: 130px;height: 130px;border: 5px solid lightskyblue;float: left;margin-left: 60px;overflow: hidden;border-radius: 50%;}.list li img {width: 200%;
}.box img:nth-child(1) {opacity: 0;left: -100%;
}.box img:nth-child(1):target {z-index: 1;opacity: 1;left: 0;
}.box img:nth-child(2) {top: -100%;
}.box img:nth-child(2):target {z-index: 1;transform: rotate(360deg);top: 0;
}.box img:nth-child(3) {opacity: 0;right: -100%;
}.box img:nth-child(3):target {z-index: 1;opacity: 1;right: 0;
}.box img:nth-child(4) {bottom: -100%;
}.box img:nth-child(4):target {z-index: 1;transform: rotate(360deg);bottom: 0;
}.box img:nth-child(5) {opacity: 0;
}.box img:nth-child(5):target {z-index: 1;opacity: 1;transform: rotate(360deg);
}

2.html文件代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/index.css"/></head><body><div class="box"><h1>电子相册</h1><ul class="list1"><li><img src="img/1.jpg" id="img1"></li><li><img src="img/2.jpg" id="img2"></li><li><img src="img/3.jpg" id="img3"></li><li><img src="img/4.jpg" id="img4"></li><li><img src="img/5.jpg" id="img5"></li><li><img src="img/6.jpg" id="img6"></li><li><img src="img/7.jpg" id="img7"></li><li><img src="img/8.jpg" id="img8"></li></ul><ul class="list2"><li><a href="#img1"><img src="img/1.jpg"></a></li><li><a href="#img2"><img src="img/2.jpg"></a></li><li><a href="#img3"><img src="img/3.jpg"></a></li><li><a href="#img4"><img src="img/4.jpg"></a></li><li><a href="#img5"><img src="img/5.jpg"></a></li><li><a href="#img6"><img src="img/6.jpg"></a></li><li><a href="#img7"><img src="img/7.jpg"></a></li><li><a href="#img8"><img src="img/8.jpg"></a></li></ul></div></body>
</html>

注意一下代码中的文件路径，不然的话，做出来不能显示图片。

3.img文件
里面存入8张图片，图片比例为1:1就行了。

结果展示。

超简单：好看的电子相册制作！相关推荐

超简单：3分钟制作惊艳的词云图
本篇先来解释一个名词"词云","词云"就是对网络文本中出现频率较高的"关键词"予以视觉上的突出,形成"关键词云层"或&q ...
超简单随机图片API制作教程
前言在我的前两篇文章我教大家怎么编写nonebot2发送随机图片插件:nonebot2调用图片API发送随机图片_ITSevin的博客-CSDN博客,现在我就教大家怎么在自己的服务器上制作随机图片A ...
[情人节特辑]如何用简单好看html代码制作H5轮播图
文章目录 Valentine 特辑需求分析准备清单 xampp新建项目文件夹文案月色真美的iframe代码主框架代码,利用iSlider的QQ音乐demo修改而成 html部分 css部分 ...
LINUX下的简单方便的电子相册制作工具VideoParama，可替代会声会汇制作简单的电子相册
UBUNTU 直接使用指令安装: sudo apt-get install videoporama 其他版本的LINUX的可以到官网下载源码编译,WINDOWS则可直接下载EXE文件安装: 官网:ht ...
【超简单PR学习】用pr制作一个电子相册
打个招呼各位小伙伴们好久不见~! 我是大家的好盆友朵朵美少女,最近玩了PR,发现一个好看的东东!制作起来超级简单有手就会--电子相册,记录一下自己的制作过程,顺便把步骤分享到这边,有兴趣的小伙伴可以 ...
电子相册制作软件哪个好？快速制作婚礼请柬、旅游相册等，超简单
好多小伙伴都在问电子相册制作软件哪个好,实在是因为现在朋友圈.抖音.各大视频网站上都特别流行这种把照片做成视频的效果,制作婚礼请柬.旅游相册.微信电子书等等主题都是可以的. 那今天就教大家用数码大师制 ...
arduino灯带随音乐_Arduino—超简单音乐制作
本帖最后由 Ricky 于 2015-1-4 23:40 编辑 Arduino-超简单音乐制作一曲葫芦娃带你回归美好童年本文很简单,需要用到的材料:Arduino UNO板一块,七彩跳线若干条,蜂 ...
迷你世界电锯机器人_迷你世界：三分钟制作超简单飞翔石像机器人报道！
更多游戏资讯,请点击上方蓝字查询! 哈喽,大家好,还记得我之前分享的超简单的石像机器人吗?不记得了吗?我再帮助大家回忆回忆,之前研游酱分享的石像机器人总共是分两篇文章,一个是不会动的入下图,一个是会动 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...

超简单：好看的电子相册制作！

超简单：好看的电子相册制作！相关推荐

最新文章

热门文章