html+css实现多种动态相册

2024-07-08 05:00| 来源: 网络整理| 查看: 265

html+css实现多种动态相册电子相册全屏背景切换照片墙百叶窗3d照片墙立方体相册代码

电子相册

原理：由a标签的锚点进行图片上的切换，左侧大图用verflow: hidden进行隐藏，右侧小图用overflow: scroll进行显示。 HTML：

电子相册

CSS

* { margin: 0; padding: 0; } body { background: #333; } li { list-style: none; } h1 { text-align: center; height: 50px; line-height: 50px; color: #FFFFFF; } .box{ width: 660px; height: 320px; margin: 200px auto; border: 5px solid white; box-shadow: 0px 0px 10px black; } .list1,.list2{ float: left; } .list1{ width: 480px; height: 270px; overflow: hidden; } .list2{ width: 180px; height: 270px; overflow: scroll; } .list1 img{ width: 480px; height: 270px; } .list2 img{ width: 160px; height: 90px; } 全屏背景切换

原理：和电子相册类似用a标签进行图片的切换，设置图片原来的位置以及点击a标签后的:target属性，设置动画效果。 HTML:

FullPhoto

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); } 照片墙

原理：利用悬浮属性，使鼠标悬浮在上面的图片进行相应的变化版本1： HTML:

PhotoWall1

CSS:

* { margin: 0; padding: 0; } body { background-color: #333; } ul { width: 1020px; height: 600px; border: white solid 5px; margin: 60px auto; box-shadow: 0px 0px 10px #ccc; } li { width: 320px; height: 180px; list-style: none; float: left; margin: 10px; /* x y 扩散程度阴影颜色*/ box-shadow: 0px 0px 10px white; } img { width: 100%; height: 100%; } img:hover { width: 150%; height: 150%; position: relative; top: -40px; left: -40px; }

版本2: HTML:

PhotoWall2

CSS:

* { margin: 0; padding: 0; } body { background: url(../img/wbg.png); } .box{ width: 1000px; margin: 0px auto; margin-top: 100px; } .box img { width: 320px; height: 180px; border: 5px solid azure; box-shadow: -10px -10px 10px black; transition: all 0.3s linear; } img:nth-child(odd) { transform: rotate(20deg); } img:nth-child(even) { transform: rotate(-20deg); } img:hover { transform: scale(1.3); position: relative; z-index: 2; } 百叶窗

原理：当鼠标悬浮在ul标签上，所有li标签变小，悬浮的li标签变大，添加css变化动画 HTML:

WindowShades

CSS:

*{ margin: 0; padding: 0; } body{ background: url(../img/wbg.png); } .box{ width: 800px; height: 360px; margin: 200px auto; /*溢出部分隐藏*/ overflow: hidden; } .box img{ width: 640px; height: 360px; } li{ list-style: none; width: 155px; height: 360px; float: left; border-left: 5px solid white; box-shadow: -5px 0px 10px black; transition: all 0.5s linear; } /*鼠标悬浮在ul上，让ul变小*/ .box ul:hover li{ width: 35px; } /*鼠标悬浮到某个li上，让li变大*/ .box ul li:hover{ width: 635px; } 3d照片墙

原理：将图片以绝对定位的方式放在父容器内(目的是使图片重叠在一起)，将每张图片旋转对应的角度(360°均分)，向z轴平移适合的距离。类似于一群人想要排成一个圆圈，则需要每个人平均转向不同的方向，然后向前走出一段距离。向父容器添加旋转动画，使所有照片旋转起来。 HTML:

3dPhoto

CSS:

* { margin: 0; padding: 0; } body { background: url(../img/wbg.png); } .box { width: 320px; height: 200px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transform-style: preserve-3d; animation: im 20s linear infinite; } .box img { width: 100%; height: 100%; position: absolute; } @keyframes im{ 0% { transform: rotateY(0deg) rotateX(10deg); } 25% { transform: rotateY(90deg) rotateX(-10deg); } 50% { transform: rotateY(180deg) rotateX(10deg); } 75% { transform: rotateY(270deg) rotateX(-10deg); } 100% { transform: rotateY(360deg) rotateX(10deg); } } /*10张图片3d变换*/ .box img:nth-child(1) { transform: rotateY(0deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(2) { transform: rotateY(36deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(3) { transform: rotateY(72deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(4) { transform: rotateY(108deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(5) { transform: rotateY(144deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(6) { transform: rotateY(180deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(7) { transform: rotateY(216deg) translateZ(600px); backface-visibility:visible; } .box img:nth-child(8) { transform: rotateY(252deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(9) { transform: rotateY(288deg) translateZ(600px); backface-visibility: visible; } .box img:nth-child(10) { transform: rotateY(324deg) translateZ(600px); backface-visibility: visible; } 立方体相册

原理：将ul下6个li标签进行绝对定位，6个li标签分别转向6个方向，向Z轴的两个方向扩展立方体边长的一半。 HTML:

cube

CSS:

* { margin: 0; padding: 0; } body { background: #333; } ul { width: 300px; height: 300px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; /*3d空间*/ transform-style: preserve-3d; animation: box 20s linear infinite; } @keyframes box { /*3d旋转 x y z deg*/ from { transform: rotate3d(0, 0, 0, 0deg); } to { transform: rotate3d(1, 1, 1, 360deg); } } li { width: 300px; height: 300px; list-style: none; border: 1px solid black; position: absolute; opacity: 0.8; box-shadow: 0px 0px 10px white; } li:nth-child(1) { background: url(../img/danji.jpg); background-position: center; background-size: cover; transform: translateZ(150px); } /*后*/ li:nth-child(2) { background: url(../img/donghuang.jpg); background-position: center; background-size: cover; transform: translateZ(-150px); } /*左*/ li:nth-child(3) { background: url(../img/luban.jpg); background-position: center; background-size: cover; transform: rotateY(90deg) translateZ(-150px); } /*右*/ li:nth-child(4) { background: url(../img/libai.jpg); background-position: center; background-size: cover; transform: rotateY(90deg) translateZ(150px); } /*上*/ li:nth-child(5) { background: url(../img/kai.jpg); background-position: center; background-size: cover; transform: rotateX(90deg) translateZ(150px); } li:nth-child(6) { background: url(../img/sunwukong.jpg); background-position: center; background-size: cover; transform: rotateX(90deg) translateZ(-150px); } ul:hover { animation-play-state: paused; } 代码

GitHub

【本文地址】

公司简介

联系我们