CSS3 视差滚动相册

一个基于 CSS3 的视差滚动相册，采用网格布局（主要）与弹性布局。

视差滚动相册

源代码如下：

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旋转视差相册</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    .content {
      width: 300px;
      height: 300px;
      margin: 0 auto;
      margin-top: 100px;
      display: grid;
      /* 列 * 3，每列占 1/3，repeat的添加与否效果一致 */
      /* grid-template-columns: repeat(3, 1fr);
      grid-template-rows: (3, 1fr); */
 
      /* grid-template 会覆盖前面的 grid-template-columns & grid-template-rows */
      grid-template:
        "A A B"
        "C D B"
        "C E E";
      grid-gap: 10px;
      padding: 10px;
      border: 5px solid transparent;
      border-image: linear-gradient(45deg, #df270ae0, #dc8d30, #deeb44, #01eb3e, #138fe9, #7127ee) 1;
      animation: rotation 15s infinite linear;
    }
 
    .item {
      overflow: hidden;
      border: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
 
    .item img {
      animation: rotation1 15s infinite linear;
      width: 300%;
      height: 300%;
      object-fit: cover;
    }
 
    .item:nth-child(1) {
      grid-area: A;
    }
 
    .item:nth-child(2) {
      grid-area: B;
    }
 
    .item:nth-child(3) {
      grid-area: C;
    }
 
    .item:nth-child(4) {
      grid-area: D;
    }
 
    .item:nth-child(5) {
      grid-area: E;
    }
 
 
 
    @keyframes rotation {
      to {
        transform: rotate(360deg);
      }
    }
 
    @keyframes rotation1 {
      to {
        transform: rotate(-360deg);
      }
    }
  </style>
</head>
 
<body>
  <div class="content">
    <div class="item">
      <img src="./static/pic1.jpg">
    </div>
    <div class="item">
      <img src="./static/pic2.jpg">
    </div>
    <div class="item">
      <img src="./static/pic3.jpg">
    </div>
    <div class="item">
      <img src="./static/pic4.jpg">
    </div>
    <div class="item">
      <img src="./static/pic5.jpg">
    </div>
  </div>
</body>
 
</html>复制

标签

CSS3 视差滚动相册

前端提高篇（102）：jQuery高级方法callbacks、deferred

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

html 无序标签有序标签及表单

CSS字体、行高等其他样式

CSS3新增属性(15个案例代码效果图素材)

基于CSS3媒体查询的响应式旅游网站设计与实现-计算机毕设附源码 12755

如何让CSS只在当前组件中起作用

CSS--解决图片变形的方法

CSS Grid 布局在 IE 中不兼容的原因与解决方案

前端哥

用html写一个漂亮的登录页

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>旋转视差相册</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	.content {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	margin-top: 100px;
	display: grid;
	/* 列 * 3，每列占 1/3，repeat的添加与否效果一致 */
	/* grid-template-columns: repeat(3, 1fr);
	grid-template-rows: (3, 1fr); */

	/* grid-template 会覆盖前面的 grid-template-columns & grid-template-rows */
	grid-template:
	"A A B"
	"C D B"
	"C E E";
	grid-gap: 10px;
	padding: 10px;
	border: 5px solid transparent;
	border-image: linear-gradient(45deg, #df270ae0, #dc8d30, #deeb44, #01eb3e, #138fe9, #7127ee) 1;
	animation: rotation 15s infinite linear;
	}

	.item {
	overflow: hidden;
	border: 1px solid #000;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.item img {
	animation: rotation1 15s infinite linear;
	width: 300%;
	height: 300%;
	object-fit: cover;
	}

	.item:nth-child(1) {
	grid-area: A;
	}

	.item:nth-child(2) {
	grid-area: B;
	}

	.item:nth-child(3) {
	grid-area: C;
	}

	.item:nth-child(4) {
	grid-area: D;
	}

	.item:nth-child(5) {
	grid-area: E;
	}



	@keyframes rotation {
	to {
	transform: rotate(360deg);
	}
	}

	@keyframes rotation1 {
	to {
	transform: rotate(-360deg);
	}
	}
	</style>
	</head>

	<body>
	<div class="content">
	<div class="item">
	<img src="./static/pic1.jpg">
	</div>
	<div class="item">
	<img src="./static/pic2.jpg">
	</div>
	<div class="item">
	<img src="./static/pic3.jpg">
	</div>
	<div class="item">
	<img src="./static/pic4.jpg">
	</div>
	<div class="item">
	<img src="./static/pic5.jpg">
	</div>
	</div>
	</body>

	</html>

CSS3 视差滚动相册

微信扫一扫：分享