Question

我试图从框的角落填写div / box的背景颜色，并找到一种方法来指定开始填充的角落。＆＃34;

我有一个在悬停时填充的盒子，但它只能从顶部，底部，左侧或右侧填充。

＆＃13;

#txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
}

#box {
  position: fixed;
  top: 25%;
  left: 25%;
  height: 20vw;
  width: 20vw;
  border: 2px solid deepskyblue;
  background-color: black;
  color: ghostwhite;
}

#box:hover {
  color: deepskyblue;
  transition: color 0.25s ease;
}

#box:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  background: ghostwhite;
  z-index: -1;
  transition: transform 0.25s ease;
}

#box:hover::after {
  transform: scaleY(1);
  color: deepskyblue;
}

＆＃13;

<div id="box">
  <span id="txt">
        TEXT
      </span>
</div>

＆＃13;

Answer 1

使用transform来正确定位元素，旋转和平移。然后设置元素高度的动画以填充正方形。

:: after的大小为142％是斜边的向上舍入值。因为它更大，它会从容器中长出来所以我们设置溢出：隐藏在容器上。

要更改发生这一切的角落，您需要更改顶部，左侧，变换原点和旋转度。

＆＃13;

 @Override
    public void onBindViewHolder(final VideoInfoHolder holder,final int position) {

        holder.youTubeThumbnailView.initialize(DEVELOPER_KEY, new YouTubeThumbnailView.OnInitializedListener() {
            @Override
            public void onInitializationSuccess(YouTubeThumbnailView youTubeThumbnailView, final YouTubeThumbnailLoader youTubeThumbnailLoader) {

                youTubeThumbnailLoader.setVideo(videos.get(position));
          //here is the magic to solve the logcat error 
                youTubeThumbnailLoader.setOnThumbnailLoadedListener(new YouTubeThumbnailLoader.OnThumbnailLoadedListener() {
                    @Override
                    public void onThumbnailLoaded(YouTubeThumbnailView youTubeThumbnailView, String s) {
                        youTubeThumbnailView.setVisibility(View.VISIBLE);
                        holder.relativeLayoutOverYouTubeThumbnailView.setVisibility(View.VISIBLE);
                        youTubeThumbnailLoader.release();
                    }

                    @Override
                    public void onThumbnailError(YouTubeThumbnailView youTubeThumbnailView, YouTubeThumbnailLoader.ErrorReason errorReason) {

                    }
                });
            }

            @Override
            public void onInitializationFailure(YouTubeThumbnailView youTubeThumbnailView, YouTubeInitializationResult youTubeInitializationResult) {
                //write something for failure
            }
        });
    }

＆＃13;

#txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
}

#box {
  position: fixed;
  top: 25%;
  left: 25%;
  height: 20vw;
  width: 20vw;
  border: 2px solid deepskyblue;
  background-color: black;
  color: ghostwhite;
  overflow: hidden;
}

#box:hover {
  color: deepskyblue;
  transition: color 0.25s ease;
}

#box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 142%;
  height: 0%;
  transform: rotate(-45deg) translateX(-50%);
  transform-origin: top left;
  background: ghostwhite;
  z-index: -1;
  transition: height 0.25s ease;
}

#box:hover::after {
  height: 142%;
  transform: rotate(-45deg) translateX(-50%);
  color: deepskyblue;
}

＆＃13;

Answer 2

#box:after {
    transform: scale(0, 0);
    transform-origin: top left; /* animation will start from top left corner */
}

#box:hover::after {
    transform: scale(1, 1);
}

各个角落的起源：

transform-origin: top right;
transform-origin: top left;
transform-origin: bottom left;
transform-origin: bottom right;

Answer 3

只需更改你的css转换。例如，设置

translate(-50%,0%) scale(0,0);

然后

translate(0%,0%) scale(1,1);

将从左下角动画... 当然，这对转换依赖两个在源角和上的盒子所需的初始条件

Answer 4

使用left，right，top和bottom将框放在角落，然后在悬停时将值重置为0。不要忘记将overflow: hidden;添加到您的框中。以下是右上角的工作示例：

#txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
}

#box {
  position: fixed;
  top: 25%;
  left: 25%;
  height: 20vw;
  width: 20vw;
  border: 2px solid deepskyblue;
  background-color: black;
  color: ghostwhite;
  	  overflow: hidden;
}

#box:hover {
  color: deepskyblue;
  transition: color 0.25s ease;
}

#box:after {
  	  content: "";
  	  position: absolute;
  	  bottom: 101%;
  	  left: 101%;
  	  width: 100%;
  	  height: 100%;
  	  transform-origin: bottom;
  	  background: ghostwhite;
  	  z-index: -1;
  	  transition: all 0.25s ease;
}

#box:hover::after {
  	  color: deepskyblue;
  	  bottom: 0;
  	  left: 0;
}

<div id="box">
  <span id="txt">
        TEXT
      </span>
</div>

在悬停时，从框的角落填写div / box的背景颜色

4 个答案: