想用纯css做一张照片墙，照片像是被钉子钉在墙上，斜挂起，当鼠标移上去或点击时有照片掉落的效果，就

html-css055

想用纯css做一张照片墙，照片像是被钉子钉在墙上，斜挂起，当鼠标移上去或点击时有照片掉落的效果，就,第1张

纯CSS实现这样的动画必须得用CSS3，我写了个DEMO：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.wrap {position: relative width: 800px padding: 10px 0 0 10px margin: 0 auto}

.wrap img {position: absolute max-width: 300px margin: 0 10px 10px 0 cursor: pointer transition: ease-in-out .2s}

.wrap img:hover {margin-top: 15px}

</style>

</head>

<body>

<div class="wrap">

<img src="../img/cpu.png" alt="" style="top:10px left:10px">

<img src="../img/cartoon.jpg" alt="" style="top:50px right:10px">

</div>

</body>

</html>

主要用到CSS3中的transition这个声明来实现简单动画，如果需要实现更复杂的动画，就需要使用CSS3中的@keyframe了

1. 可以使用css的border-image属性设置边框的背景图片。2. 可以使用background设置多个背景图片，并分别设置每个背景的位置。3. 把所有图片先合成一个圆形图片，然后整个图片作为背景图片。

可以使用最新的css3进行裁切或遮罩。

使用div配合css3再结合svg可以实现各种形状的裁切，css3加背景可以实现遮罩效果。

如果需要兼容的话，可以使用第三方插件。