使用 CSS3 将三角形变成正方形，悬停动画

Question

我正在尝试使用 HTML5 和 CSS3 开发 CSS 框悬停效果，但我无法让它工作。我想制作如下所示的效果：

当用户没有悬停时

当用户悬停时

即当用户使用 HTML5 和 CSS3 将鼠标悬停在蓝色三角形上时，如何制作蓝色三角形并将其变成蓝色正方形？我只需要使用 HTML5 和 CSS3 而不使用画布。

此元素与画布完美搭配，如下所示

var ctx = document.getElementById("c").getContext("2d"); 
ctx.fillStyle = "#0000ff"; 
function normal() { 
    ctx.clearRect(0,0,256,256);
    ctx.beginPath(); 
    ctx.moveTo(256,256);                  
    ctx.lineTo(256,0);
    ctx.lineTo(0,0);
    ctx.closePath();
    ctx.fill(); bars()
    ctx.fillStyle="#0000ff"; for (i=0;i

但我只需要使用 HTML5 和 CSS3 脚本语言

Answer 1

使用 SVG：（您正在寻找的整个效果）

我知道您要求 HTML(5) + CSS(3)，但您也可以使用 SVG path 元素来产生这种效果，如下面的 sn-p 所示。 （注意：这使用 SVG 动画，与 CSS 动画相比，它的浏览器支持可能不同。）

svg {
  height: 150px;
  width: 150px;
  stroke: black;
}
#blue {
  stroke: blue;
  stroke-width: 10;
}
svg polygon {
  fill: blue;
}
#white {
  stroke: white;
  stroke-width: 10;
}
#icon {
  fill: transparent;
}

<svg viewBox='0 0 100 100'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0,0 1,0 1,1 0,0z'>
        <animate attributeType="XML" attributeName="d" from="M0,0 1,0 1,1 0,0z" to="M0,0 1,0 1,1 0,1z" dur="1s" begin="icon.mouseover" fill="freeze" />
        <animate attributeType="XML" attributeName="d" from="M0,0 1,0 1,1 0,1z" to="M0,0 1,0 1,1 0,0z" dur="1s" begin="icon.mouseout" fill="freeze" />
      </path>
    </clipPath>
    <g id='lines'>
      <line x1='20' y1='30' x2='80' y2='30' />
      <line x1='20' y1='50' x2='80' y2='50' />
      <line x1='20' y1='70' x2='80' y2='70' />
    </g>
  </defs>
  <use xlink:href='#lines' id='blue' />
  <g clip-path='url(#clipper)'>
    <polygon points='0,0 0,100 100,100 100,0' />
    <use xlink:href='#lines' id='white' />
  </g>
  <g>
    <polygon points='0,0 0,100 100,100 100,0' id='icon' />
  </g>
</svg>

---

以下是问题的答案 - 如何用动画将三角形变成正方形。

使用边框：

您可以使用border 来完成此操作，如下面的 sn-p 所示。最初只有右侧和顶部边框具有蓝色，但在悬停时，我们将颜色设置为所有边框边。此方法非常简单，适用于所有浏览器（包括 IE8），但您不能直接向此 div 添加内容（因为这样做会影响三角形），因此您必须将内容放在形状顶部使用定位或使用伪元素设置形状。

.shape{
  height: 0px;
  width: 0px;
  border: 50px solid transparent;
  border-color: blue blue transparent transparent;
  transition: all 1s;
}
.shape:hover{
  border-color: blue;
}

<div class='shape'></div>

---

使用变换：

您可以在伪元素上添加rotate 变换，在父元素上设置overflow: hidden 以生成三角形，然后在悬停时反转/取消变换。

.shape {
  position: relative;
  height: 100px;
  width: 100px;
  overflow: hidden;
}
.shape:after {
  position: absolute;
  content: '';
  height: calc(100% * 1.414); /* using Pythogras theorem */
  width: calc(100% * 1.414); /* using Pythogras theorem */
  transform: rotate(-45deg);
  transform-origin: left top;
  background: blue;
  transition: all 1s;
}
.shape:hover:after {
  transform: rotate(0deg);
}

<div class='shape'></div>

如果您希望避免像之前的 sn-p 那样计算 height 和 width，也可以使用 skewX 变换而不是 rotate 变换。

.shape {
  position: relative;
  height: 100px;
  width: 100px;
  overflow: hidden;
}
.shape:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  transform: skewX(45deg);
  transform-origin: left top;
  background: blue;
  transition: all 1s;
}
.shape:hover:after {
  transform: skewX(0deg);
}

<div class='shape'></div>

---

使用渐变：

您可以使用线性渐变创建一个三角形，然后在悬停时通过将background-size 加倍将其变成一个正方形。

.shape{
  height: 100px;
  width: 100px;
  background: linear-gradient(to bottom left, blue 49.5%, transparent 50.5%);
  background-position: 100% 0%;
  background-size: 100% 100%;
  transition: all 1s;
}
.shape:hover{
  background-size: 200% 200%; /* just double the background size on hover */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='shape'></div>

Answer 2

尽管 Harry 给出了完整的答案，但还是忍不住用 OP 中的图片建议的另一种方法发布答案。

让我们使用混合模式，看看可以实现什么（但支持更有限）

.test {
    width: 200px;
    height: 200px;
    background-color: white;
    display: inline-block;
    background-image: linear-gradient(blue, blue), linear-gradient(blue, blue), linear-gradient(blue, blue);
    background-size: 100px 30px;
    background-repeaT: no-repeat;
    background-position: center 30px, center center, center 140px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
}

.test:after {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, yellow 50%, transparent 50%);
  mix-blend-mode: difference;
  transition: all 1s;
}

.one:after {
  transform-origin: bottom right;
}

.one:hover:after {
  transform: rotate(-45deg);
}

.two:hover:after {
  opacity: 0;
}

.three:after {
  background: none;
  box-shadow: -1000px 1000px 0px 1000px yellow;
  transform-origin: top left;
  transform: rotate3d(1,1,0,87deg);
}

.three:hover:after {
  transform: rotate3d(1,1,0,0deg);
}

<div class="test one"></div>
<div class="test two"></div>
<div class="test three"></div>

第三个有点棘手，而且不是很完美。但你明白了。