Question

当我将鼠标悬停在游戏美术上时，我正在尝试重新创建Twitch的悬停效果。

我尝试使用剪切路径，但无法获得所需的正确形状。我什至不确定是否应该使用clip-path，也不知道我的代码对于重新创建这种效果是否是最好的。

https://codepen.io/thomaschsu/pen/Rwwwgex

.img-full {
  position: absolute;
  width: 18rem;
  margin: 50px;
  transition: transform 0.1s ease;
  max-height: 50vh;
  max-width: 35vh;
}

.box {
  position: relative;
  top: 11vh;
  left: 11vh;
  height: 47vh;
  width: 35vh;
  background-color: #9147ff;
  z-index: -1;
  display: none;
  clip-path: polygon(100% 0, 100% 85%, 92% 100%, 0 100%, 0 20%, 20% 0);
}

.img-full:hover {
   transform: translate(5%, -2%);
}

.img-full:hover + .box {
  display: block;
}

Answer 1

这是一个带有边界和渐变的想法：

<img src="https://i.imgur.com/cFeWhuf.jpg">

img {
 width:150px;
 margin:20px;
 padding:0;  
 background:linear-gradient(-45deg,transparent 6px,red 7px calc(100% - 7px), transparent calc(100% - 6px));
 transition:0.3s all;
}
img:hover {
  padding:0 0 10px 10px;
  margin-top:10px;
}

与背景和填充相同的技巧

<img src="https://i.imgur.com/cFeWhuf.jpg">

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class dialog : MonoBehaviour
{
    public Text text;
    public string[] sentence;
    public int index;
    public float typedelay;
    public GameObject buttonnext;
    public static dialog instance;
    public bool active = true;
    private void Awake()
    {
        makeinstance();
    }
    public void Start()
    {
        StartCoroutine(Type());
    }
    private void Update()
    {
        if (text.text == sentence[index])
        {
            buttonnext.SetActive(true);
        }
    }
    IEnumerator Type()
    {
        if(active)
        {
            foreach (char letter in sentence[index].ToCharArray())
            {
                text.text += letter;
                yield return new WaitForSeconds(typedelay);
            }
        }
    }


    public void nextchat()
    {

        buttonnext.SetActive(false);

        if(index < sentence.Length - 1)
        {
            index++;
            text.text = "";
            StartCoroutine(Type());
        }else
        {
            text.text ="" ;
            buttonnext.SetActive(false);
            index = 0;
            active = false;

        }

    }

    void makeinstance()
    {
        if(instance == null)
        {
            instance = this;
        }
    }
}

Answer 2

我一直在浏览该网站，我认为他们使用了两个不可见的角，当图像悬停时，它们变为可见并翻转。

我已经将您的Codepen分叉，并对此想法做了一些操作，请查看： https://codepen.io/ograu/pen/xxxxLLX

.img-banner {
  background: #9147ff;
  position: relative;
  max-height: 50vh;
  max-width: 35vh;    
  width: 18rem;
  margin: 50px;
}

.img-banner:hover .corner {
  transform: rotate(-45deg) scaleX(1);
  transition-delay: 75ms;
  display: block;
}

.img-full {
  width: 100%;
  height: 100%;
  transition: transform 0.1s ease;
  display: block;
}

.img-full:hover {
  transform: translate(9px, -9px);
}

.corner {
  background: #9147ff;
  height: .8rem;
  transition: transform .1s ease;
  width: .8rem;
  position: absolute;
  display: none;
}

.top-left {
  top: -5px;
  left: 2px;
}

.bottom-right {
  bottom: 4px;
  right: -5px;
}

Answer 3

您还可以使用阴影

.img-banner {
float:left;/* ?? for the demo */
}
.img-full {
  width: 18rem;
  margin: 20px;
  transition:  0.1s ease;
  max-height: 50vh;
  max-width: 35vh;
  display:block;
  
}

.img-full:hover {
   transform: translate(5%, -2%);
 box-shadow:-1px 1px  #9147ff, -2px 2px  #9147ff, -3px 3px  #9147ff, -4px 4px  #9147ff, -5px 5px  #9147ff, -6px 6px  #9147ff, -7px 7px  #9147ff, -8px 8px  #9147ff;
}

<div class="img-banner">
  <img class="img-full" src="https://i.imgur.com/cFeWhuf.jpg">
</div>
<div class="img-banner">
  <img class="img-full" src="https://i.imgur.com/cFeWhuf.jpg">
</div>
<div class="img-banner">
  <img class="img-full" src="https://i.imgur.com/cFeWhuf.jpg">
</div>

Answer 4

1。显而易见的解决方案（性能不佳）

您可以在伪元素之前和之后使用框阴影和三角形进行此操作。这里的坏事是性能。好处是，如果不支持伪元素OR转换，您仍然会得到不错的结果（紫色框阴影）。

.imgholder {display: inline-block; position: relative; left: 0; bottom: 0; box-shadow: 0px 0px 0px 0px #9147ff;}
.imgholder img {display: block; width: 200px; height: 100px;}
.imgholder:hover {box-shadow: -6px 6px 0px 0px #9147ff; position: relative; left: 6px; bottom: 6px;}
.imgholder::after {content: ""; position: absolute; right: 0; width: 0; height: 0; border: 0px solid transparent; border-top: 0px solid #9147ff;}
.imgholder:hover::after {border: 6px solid transparent; border-top: 6px solid #9147ff;}
.imgholder::before {content: ""; position: absolute; top: 0;left: 0; width: 0; height: 0; border: 0px solid transparent; border-right: 0px solid #9147ff; margin-left: 0px;}
.imgholder:hover::before {border: 6px solid transparent; border-right: 6px solid #9147ff; margin-left: -12px;}
.imgholder, .imgholder::before, .imgholder::after {transition: all 0.1s linear;}

<br /><div class="imgholder"><img src="https://i.imgur.com/ukqAxha.gif" /></div>

2。 Twitch使用的解决方案（性能良好）

这真的很聪明。它使用“比例”和一个小的旋转正方形（45度）。请注意，正方形具有不同的变换原点和不同的旋转（方向）。性能和优雅降级都很好。这似乎是我的最佳解决方案。

*{font-size: 14px;}
.imgholder {
  background: #9147ff; 
  display: inline-block;
  position: relative;
}
.imgholder img {
  transition: all 0.1s ease; 
  display: block; 
  width: 200px; 
  height: 100px; 
  transform: translate3d(0,0,0);
}
.imgholder:hover img {
  transform: translate3d(.6rem,-.6rem,0); 
  transition-delay: 75ms;
}
.corner_bottom_right, .corner_top_left {
  left: 0; 
  top: 0; 
  width: .8rem;
  height: .8rem; 
  transition: all 0.1s ease; 
  transform: rotate(-45deg) scale(0);
  background: #9147ff; 
  position: absolute; z-index: 0;
  transform-origin: 0% 0%;
}
.corner_bottom_right {
  left: auto; 
  top: auto; 
  right: 0; 
  bottom: 0; 
  transform: rotate(45deg) scale(0);
  transform-origin: 100% 100%;
}
.imgholder:hover .corner_bottom_right,
.imgholder:hover .corner_top_left {
  transform: rotate(-45deg) scale(1); 
  transition-delay: 75ms;
}
.imgholder:hover .corner_bottom_right {
  transform: rotate(45deg) scale(1);
}

<br /><div class="imgholder">
  <div class="corner_top_left"></div>
  <div class="corner_bottom_right"></div>
  <img src="https://i.imgur.com/ukqAxha.gif" />
</div>

3。最少的代码量（有小故障）

以前的解决方案需要大量代码。此代码使用最少的代码，并使用box-shadow属性。我喜欢这种简单性，但是请注意，这种解决方案在视网膜显示器上可能看起来并不流畅。此外，在Firefox中徘徊底部的阴影故障和时机似乎有些偏离。

img {width: 200px; height: 100px; transition: all 0.1s ease;}
img:hover {
   transform: translate(8px, -8px);
   box-shadow: -1px 1px  #9147ff, 
               -2px 2px  #9147ff, 
               -3px 3px  #9147ff, 
               -4px 4px  #9147ff, 
               -5px 5px  #9147ff, 
               -6px 6px  #9147ff, 
               -7px 7px  #9147ff, 
               -8px 8px  #9147ff;
}

<br /><img src="https://i.imgur.com/ukqAxha.gif" />

4。使用剪辑路径（出色的性能）

这个问题的确激发了我创建剪切路径解决方案的灵感。我使用固定大小以使其更易于理解。该解决方案需要使用overflow: hidden进行一些智能裁剪。

.imgholder {
  position: relative; 
  display: inline-block;
  width: 200px;
  height: 100px;
  overflow: hidden;
  transition: all 0.1s ease;
  bottom: 0;
}
.imgholder img {
  margin-top: -8px;
  margin-right: -8px;
  position: relative;
  display: block;
  width: 200px;
  height: 100px;
  transition: all 0.1s ease;
  border-right: 8px solid transparent;
  border-top: 8px solid transparent;
}

.clippath {
  margin-top: -8px;
  margin-right: -8px;
  position: absolute;
  top: 0;
  left: 0;
  width: 208px;
  height: 108px;
  background-color: #9147ff;
  clip-path: polygon(0px 108px, 200px 108px, 208px 100px, 208px 0px, 8px 0px, 0px 8px);
  transition: all 0.1s ease;
}

.imgholder:hover img,
.imgholder:hover .clippath {
  margin-top: 0;
}
.imgholder:hover img {
   transform: translate(8px, -8px);
}
.imgholder:hover {
  width: 208px;
  height: 108px;
  bottom: 8px;
  margin-bottom: -8px;
}

<br />
<div class="imgholder">
  <div class="clippath"></div>
  <img src="https://i.imgur.com/ukqAxha.gif">
</div>

<br /><br />
<div class="clippath" style="position: relative;"></div>

使用CSS或剪切路径在悬停时等距45度（长/对角线）阴影

4 个答案: