时间戳

首页 > 解决方案 > 如何在旋转图像上进行叠加

html - 如何在旋转图像上进行叠加

问题描述

我仍在学习样式并寻找解决方案，其中：

  1. 图像上出现从浅灰色到浅蓝绿色渐变的叠加层
  2. 图片放大20%（不爬出原始尺寸）顺时针旋转30度
  3. 动画在 300 毫秒内顺利进行

所以我让图像缩放和旋转，但叠加让我抓狂。 

.zoom-effect-container {
  float: left;
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid black;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
}

.image-card img {
  -webkit-transition: 300ms ease;
  transition: 300ms ease
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2) rotate(30deg);
}
<div class="zoom-effect-container">
  <div class="image-card">
    <img src="https://picsum.photos/300/200" />
  </div>
</div>

标签： htmlcss

解决方案

使用伪元素：

.image-card:before { ... }

将 CSS 渐变应用到该元素。我使用了一个生成器站点来创建这个示例。真的很容易选择你想要的任何设置：https ://colorzilla.com/gradient-editor/#e0e0e0+0,00faff+100&0+0,0.65+100

z-index此时需要保持“层”以正确的顺序堆叠。

.zoom-effect-container {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid black;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.zoom-effect-container:hover .image-card:before {
  /* this is the overlay */
  position: absolute;
  z-index: 9;
  content: '';
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(top, rgba(224, 224, 224, 0) 0%, rgba(0, 250, 255, 0.65) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(224, 224, 224, 0) 0%, rgba(0, 250, 255, 0.65) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(224, 224, 224, 0) 0%, rgba(0, 250, 255, 0.65) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e0e0e0', endColorstr='#a600faff', GradientType=0);
  /* IE6-9 */
}

.image-card img {
  position: relative;
  z-index: 1;
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(2);
  transform: scale(2) rotate(30deg);
}
<div class="zoom-effect-container">
  <div class="image-card">
    <img src="https://picsum.photos/300/200" />
  </div>
</div>

推荐阅读