0

我无法预览我的一个代码笔以在网页上正确显示。本质上，我是在支持 Markdown 的文本编辑器中写一篇文章。发布代码笔所需要做的就是粘贴链接。但是，当我这样做时，预览看起来不对。这是说明问题的两张图片（第一张是错误的，而第二张是正确的）： 在此处输入图像描述

在此处输入图像描述

如您所见，预览版似乎没有transform正确应用 my 和 margin 样式。这是我的代码：

/* 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;
  }
  
}
<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>

如果有帮助，您可以在此处查看实际的笔。有什么想法或我想念的东西吗？谢谢！

4

1 回答 1

4

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

在嵌入笔按钮上，使用“使用单击加载”默认状态复选框时（见下文）

点击加载

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

所以看起来任何服务正在截屏，不支持transform: rotate(45deg);- 它需要前缀。

我在这里做了一支新笔，添加了前缀：

https://codepen.io/ksmessy/pen/oWmKwp（我只是用简单的方法做到了——笔设置、CSS、供应商前缀，选中“Autoprefixer”复选框）

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

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

综上所述：为变换添加前缀：旋转。

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

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

于 2017-05-24T17:20:31.023 回答