css 如何将七张照片布置成一个圈？

html-css020

css 如何将七张照片布置成一个圈？,第1张

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

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