[分享]css八仙过海图片素材

CSS八仙过海是一份非常优秀的图片素材。这份素材包含了八个不同的圆形头像图片，每个头像都有独特的动画效果，非常适合用于任何网页设计项目中。下面我们来了解一下如何使用这份图片素材。// 第一步：下载并解...

CSS八仙过海是一份非常优秀的图片素材。这份素材包含了八个不同的圆形头像图片，每个头像都有独特的动画效果，非常适合用于任何网页设计项目中。下面我们来了解一下如何使用这份图片素材。

// 第一步：下载并解压缩CSS八仙过海素材包
//

// 第二步：将Unicons.css文件链接到你的HTML文档中
<link rel="stylesheet" href="css/Unicons.css">

// 第三步：在HTML文件中引用头像图片并添加相应的样式
<div class="user-photos">
  <div class="user-photo">
    <img src="images/img1.jpg">
  </div>
  <div class="user-photo">
    <img src="images/img2.jpg">
  </div>
  <div class="user-photo">
    <img src="images/img3.jpg">
  </div>
  <div class="user-photo">
    <img src="images/img4.jpg">
  </div>
  <div class="user-photo">
    <img src="images/img5.jpg">
  </div>
  <div class="user-photo">
    <img src="images/img6.jpg">
  </div>
  <div class="user-photo">
    <img src="images/img7.jpg">
  </div>
  <div class="user-photo">
    <img src="images/img8.jpg">
  </div>
</div>

.user-photos {
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-photo {
  width: 100px;
  height: 100px;
  margin: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: shake 2s infinite;
}

@keyframes shake {
  0% { transform: rotate(0); }
  20% { transform: rotate(10deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-10deg); }
  100% { transform: rotate(0); }
} 

通过以上步骤，我们就可以在网页中使用CSS八仙过海图片素材了。效果非常出众，可以为你的设计项目增色不少。如果需要更丰富的动画效果，可以自行在样式中添加更多关键帧。