Question

我无法预览其中一个codepens，无法在网页上正常显示。基本上，我正在支持markdown的文本编辑器中写一篇文章。我要发布一个codepen所需要做的就是粘贴链接。但是，当我这样做时，预览看起来不对。这里有两张图片说明了问题（第一个是错误的，而第二个是正确的）：

正如您所看到的，预览版本似乎没有正确应用我的transform和边距样式。这是我的代码：

＆＃13;

/* General/reset styles */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  color: #333;
}

.new-section {
  padding-top: 50px;
  text-align: center;
  font-size: 4em;
  font-weight: 100;
}

/* Header styles */

header {
  position: relative;
  text-align: center;
  height: 100vh;
  background: linear-gradient(to right, #69bcf4, #30cc8b);
  color: #fff;
}

header h1 {
  padding-top: calc(50vh - 113px);
  font-size: 7em;
  font-weight: 100;
}

header h2 {
  font-size: 2em;
}

header span.animated {
  position: absolute;
  margin: auto;
  right: 0;
  left: 0;
  bottom: 50px;
  height: 4px;
  width: 4px;
  border-radius: 2px;
  background: #fff;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

header span::before,
header span::after {
  position: absolute;
  top: -23px;
  content: "";
  height: 30px;
  width: 4px;
  border-radius: 2px;
  background: #fff;
}

header span::before {
  left: -10px;
  transform: rotate(-45deg);
}

header span::after {
  right: -10px;
  transform: rotate(45deg);
}

/* Media queries */

@media (max-width: 759px) {
  header h1 {
    font-size: 5em;
  }
  
  .new-section {
    font-size: 3em;
  }
  
  .scroll-animations {
    display: block;
  }
  
  .scroll-animations div {
    padding: 20px 80px;
  }
  
  .click-animations input,
  .click-animations textarea,
  .click-animations button {
    width: 80%;
  }
}

@media (max-width: 475px) {
  .new-section {
    font-size: 2.5em;
  } 
  
  header h1 {
    font-size: 3.2em;
  }
  
  header h2,
  .funky-animations h3 {
    font-size: 1.5em;
  }
  
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<header>
  <h1 class="animated bounceInDown">Animate.css</h1>
  <h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>
  <span class="animated bounce"></span>
</header>

＆＃13;

如果有帮助，您可以查看实际笔here。我遗失的任何想法或事物？谢谢！

Answer 1

我使用您使用的设置重新创建了嵌入的codepen：https://codepen.io/ksmessy/pen/EmrBdV

在嵌入笔按钮上，使用＆＃34;使用点击加载＆＃34;默认状态复选框（见下文）

...它只是生成笔的屏幕截图并将其托管在Codepen的Amazon Web Services帐户上（例如：http://s3-us-west-2.amazonaws.com/i.cdpn.io/603854.xqeQva.ff9bf8bc-b13e-4285-9dd9-218ff376997c.png），并将该图像作为背景占位符放置，直到＆＃34 ;奔跑＆＃34;单击按钮。

所以看起来无论服务截图是什么，都不支持transform: rotate(45deg); - 它需要加上前缀。

我在这里制作了一支新笔，其中添加了前缀：

https://codepen.io/ksmessy/pen/oWmKwp（我只是简单的方法 - 笔设置，CSS，供应商前缀，检查＆＃34; Autoprefixer＆＃34;复选框）

我把它嵌入这里，箭头看起来很正常：

https://codepen.io/ksmessy/pen/bWzXry

总结：为transform：rotate添加前缀。

-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);

在您更新之后，我不确定笔的屏幕截图更新的频率，但是一旦它更新并且缓存清除，那么箭头看起来应该是正确的。

Codepen预览不应用所有CSS

1 个答案: