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

html-css021

想用纯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了

估计是你的nav 的 width没算准 或者是因为nav里面的元素写的padding值，那就加上box-sizing：border-box；让padding包含在自有的width里面 试试