Question

我试图在我的本地主机上的SVG动画中运行这个小gif，我已经将scss编译成了css，但仍然没有看到任何内容。

以下是代码：

html：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet/css" type="text/css" href="style.css">
</head>
<body>
<!-- Define our SVG clip path -->
<svg width='0' height='0'>
  <defs>
    <clipPath id="cp" clipPathUnits="objectBoundingBox">
      <path d="M0.500, 0.945 L0.994, 0.090 L0.006, 0.090 L0.500, 0.945 L0.500, 0.650 L0.262, 0.238 L0.738, 0.237 L0.500, 0.650z"></path>
    </clipPath>
  </defs>
</svg>

<!-- The actual elements we're using -->
<div class="triangle first"></div>
<div class="triangle second"></div>
</body>
</html>

的CSS：

html {
  min-height: 100%;
  background: #B8BEB4;
  background: radial-gradient(#B8BEB4, #71685F);
  background-size: cover; }

.triangle {
  clip-path: url(#cp);
  width: 50vw;
  height: 50vw;
  max-height: 75vh;
  max-width: 75vh;
  background-size: cover;
  background-blend-mode: screen;
  position: absolute;
  top: 50%;
  left: 50%; }

.first {
  background-color: #C5075C;
  background-image: url("https://media.giphy.com/media/pE6GG0V2JCKUo/giphy.gif");
  transform: translateX(-65%) translateY(-50%); }

.second {
  background-color: #03B897;
  background-image: url("https://media1.giphy.com/media/fLg3MEWdgH5Ti/200.gif");
  transform: translateX(-35%) translateY(-50%);
  opacity: 0.8; }

请参阅Reverse clip path with blend modes上Zach Saucier（@Zeaklous）的笔CodePen。

Answer 1

正如评论所示，如果CSS直接放在HTML中，这可以正常工作。

原来这是一个简单的拼写错误。请改变：

<link rel="stylesheet/css" type="text/css" href="style.css">

致：

<link rel="stylesheet" type="text/css" href="style.css">

无论如何都无法使这个剪辑路径工作

1 个答案: