Question

我正在尝试使用css创建贴纸拉扯效果。

为此，我找到了以下示例：https://codepen.io/patrickkunka/pen/axEgL

现在我有三个问题。

我正在使用图像，而不仅仅是颜色。
在示例中剥离效果很远
因为我正在使用图像，所以无法移动图像。

现在让我用一些代码展示问题：

Release

.test-sticker {
  /*
  .sticker:hover .sticky{
	transform: rotate(10deg);
  }
  */
}
.test-sticker .anim750 {
  transition: all 750ms ease-in-out;
}
.test-sticker .sticker {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  backface-visibility: hidden;
}
.test-sticker .sticker .sticky {
  transform: rotate(-125deg);
}
.test-sticker .sticker .sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
}
.test-sticker .sticker .reveal .circle {
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  line-height: 140px;
  text-align: center;
  cursor: pointer;
}
.test-sticker .sticker .reveal .circle {
  background: purple;
}
.test-sticker .sticker .circle_wrapper {
  position: absolute;
  width: 180px;
  height: 180px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.test-sticker .sticker .circle {
  position: absolute;
  width: 140px;
  height: 140px;
  margin: 20px;
  border-radius: 999px;
}
.test-sticker .sticker .back {
  height: 10px;
  top: 30px;
}
.test-sticker .sticker .back .circle {
  margin-top: -130px;
  background-color: green;
}
.test-sticker .sticker .front {
  height: 150px;
  bottom: 0;
  top: auto;
  -webkit-box-shadow: 0 -140px 20px -140px rgba(0, 0, 0, 0.3);
}
.test-sticker .sticker .front .circle {
  margin-top: -10px;
  background: url("https://upload.wikimedia.org/wikipedia/commons/9/93/Wordpress_Blue_logo.png");
  background-size: 140px 140px;
  transform: rotate(-235deg);
}
.test-sticker .sticker:hover .back {
  height: 90px;
  top: 110px;
}
.test-sticker .sticker:hover .back .circle {
  margin-top: -50px;
}

我如何才能使贪婪圈子变成大约50％，而不是现在的80％？

是否有一种让紫色圆圈像绿色圆圈一样延伸的奇特方法？因此，当我将鼠标悬停在图片上时，我想看到标签的背面，该标签的背面为白色。

用css贴纸拉扯效果

0 个答案: