CSS实现图片碎片翻页

最新推荐文章于 2022-01-24 22:38:55 发布

认真学习陈序员

最新推荐文章于 2022-01-24 22:38:55 发布

阅读量617

点赞数 1

分类专栏： CSS3动画文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_43217704/article/details/106102444

版权

思路在box中生产父元素，父元素中循环生成100个子元素，每个子元素获取同一张图片的不同位置，拼在一起形成一整张图片。展示结束时，让子元素3d旋转位移，然后透明度设置为0，实现效果最后添加remove删除父元素释放空间代码HTML<!DOCTYPE html><html lang="ch"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conte

摘要由CSDN通过智能技术生成

思路

在box中生产父元素，父元素中循环生成100个子元素，每个子元素获取同一张图片的不同位置，拼在一起形成一整张图片。
展示结束时，让子元素3d旋转位移，然后透明度设置为0，实现效果
最后添加remove删除父元素释放空间

代码

HTML

<!DOCTYPE html>
<html lang="ch">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>js图片炸裂效果</title>
		<style type="text/css">
			body{
				overflow: hidden;
				background-color: #000000;
			}
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				position: absolute;
				/* 在这里调整大小 */
				width: 960px;
				height: 600px;
				left: 50%;
				top: 50%;
				/* 调整大小之后记得修改这里 */
				margin-left: -480px;
				margin-top: -300px;
			}
			#box>div{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
			}

最低0.47元/天解锁文章

认真学习陈序员

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS实现图片碎片翻页

思路在box中生产父元素，父元素中循环生成100个子元素，每个子元素获取同一张图片的不同位置，拼在一起形成一整张图片。展示结束时，让子元素3d旋转位移，然后透明度设置为0，实现效果最后添加remove删除父元素释放空间代码HTML<!DOCTYPE html><html lang="ch"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conte
复制链接

扫一扫