[分享]css中如何让图片炫酷

发布于 2024-11-11 19:25:36

CSS可以让网页元素变得炫酷，如何利用CSS让图片更炫酷呢？以下是几种实现方法：

/*1. 阴影*/
img{
  box-shadow: 3px 3px 3px #ccc;
  /*横向偏移3px，纵向偏移3px，模糊程度为3px，颜色为#ccc*/
}

/*2. 透明度*/
img{
  opacity: 0.6;
  /*透明度为60%*/
}

/*3. 变形*/
img{
  transform: rotate(45deg);
  /*将图片旋转45度*/
}

/*4. 过渡*/
img{
  transition: all 0.5s ease;
  /*过渡时间为0.5秒，动画速度为ease*/
}
img:hover{
  transform: scale(1.2);
  /*当鼠标悬浮在图片上时，对图片进行放大*/
}

以上几种方法可以单独使用，也可以组合使用，让图片更加炫酷。

css 教程