利用CSS3动画效果制作照片墙

【效果】

纯CSS3制作动态照片墙

【原理】

HTML页面中写一个盒子，盒子里面放10张图片。让这10张图片，随意摆放(给图片设置旋转角度和在盒子中的所处位置)，再利用CSS3动画的技术，对这10张图片，设置鼠标悬停在某一张图片上时，该图片会放大、会由原来的角度旋转到正常的角度，同时这张被鼠标选中的图片会自动浮于所有图片的上方，以便图片能够被完全展示出来，为了增加图片的立体感给被选中的图片设置了阴影效果。

【源码】

【HTML代码】

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3照片墙</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body><h1>纯CSS3照片墙制作</h1><div class="container"><img class="pic1" src="images/tu1.jpg"/><img class="pic2" src="images/tu2.jpg"/><img class="pic3" src="images/tu3.jpg"/><img class="pic4" src="images/tu4.jpg"/><img class="pic5" src="images/tu5.jpg"/><img class="pic6" src="images/tu6.jpg"/><img class="pic7" src="images/tu7.jpg"/><img class="pic8" src="images/tu8.jpg"/><img class="pic9" src="images/tu9.jpg"/><img class="pic10" src="images/tu10.jpg"/></div>
</body>
</html>

【CSS代码】

/* CSS Document */
body{ background:#eee }
h1{ text-align:center}
.container{width:960px; height:450px; margin:60px auto;position:relative}
img{padding:10px 10px 15px;background:#fff;
border:1px solid #ddd;position:absolute;transition:1s;z-index:1}
img:hover{transform:rotate(0deg);transform:scale(1.2);box-shadow:10px 10px 15px #ccc;z-index:2}
.pic1{left:400px;top:0px;transform:rotate(-5deg)}
.pic2{left:600px;top:0px;transform:rotate(-20deg)}
.pic3{bottom:0px;right:0px;transform:rotate(5deg)}
.pic4{bottom:0px;left:300px;transform:rotate(-10deg)}
.pic5{bottom:0px;left:0px;transform:rotate(-10deg)}
.pic6{top: 0; left:0;  transform: rotate(10deg);
}
.pic7{top: 0; left: 850px; transform: rotate(20deg);
}
.pic8{bottom: -20px; right: 630px; transform: rotate(5deg);
}
.pic9{top: 190px; left: 550px; transform: rotate(15deg);
}
.pic10{left:180px; top:20px; transform: rotate(-10deg);
}

【源码与图片素材】

https://download.csdn.net/download/muyuxifeng/87618635?spm=1001.2014.3001.5503

利用CSS3动画效果制作照片墙相关推荐

【Web】CSS3动画效果制作
最近想做做动画,发现CSS3做动画真的很强大,所以做了几个demo,现总结记录如下. 一.基本语法 figure:html5语义化标签用于规定独立的流内容(图像等) figcaption:html5 ...
css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...
利用CSS3动画制作摩天轮
本篇文章向大家介绍利用CSS3动画制作摩天轮旋转特效,代码很简单,还不赶紧学起来,发给你的小朋友看看吧! 运行效果: 代码: <!DOCTYPE html> <html>< ...
CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码...
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
5分钟教你利用css3动画实现奔跑的北极熊效果
实现原理:利用css3动画中的animation-timing-function的steps(),让一张有连续动作图片一段一段的在页面上显示出来,从而实现动画效果. 1.需要素材: 2.准备一个div ...
css 右上角翻开动画_27个精致的CSS3动画效果源代码下载
CSS主要用于控制网页的外观,CSS代码可以随意变化网页的布局和网页的内容样式.当CSS3出现以后,更是可以让网页增添了不少动画元素,随着IE6,7的淘汰,手机端的崛起更是让它成熟了许多.CSS3动画 ...
用css3动画效果做的跑动效果
用css3动画效果做的跑动效果用到的图片创建两个盒子 css样式思路大概是给boxmax设置宽高,能容下一个小人即可,overflow: hidden;使溢出盒子的图片隐藏,再分成七个动画阶段, ...
android 原生砸金蛋动画,C4D-砸金蛋动画效果制作
本篇教程讲C4D-砸金蛋动画效果制作,喜欢的一起来学习吧! 那就开始今天的课程吧. 1.搭建画面中的场景.打开C4D,创建一个圆柱,[半径]为900,[高度]为200,[高度分段]为2,[旋转分段]为 ...
Html+css3动画效果
Html+css3动画效果开发工具与关键技术:DW 作者:彭春怡撰写时间:2019/1/16 1.下面是通过html+css3完成的一个动画效果,"跳跳球".实现的代码如图所示 ...