Html 代码笔预览未应用所有CSS

我无法在网页上正确显示其中一个代码笔的预览。本质上，我正在一个支持降价的文本编辑器中写一篇文章。我所要做的就是粘贴链接。然而，当我这样做时，预览看起来是错误的。以下两张图片说明了问题（第一张是错误的，第二张是正确的）：

正如您所看到的，预览版本似乎没有正确应用my

transform

和边距样式。这是我的密码：

/*常规/重置样式*/
* {
框大小：边框框；
保证金：0；
填充：0；
}
身体{
字体系列：“Roboto”，无衬线；
溢出x：隐藏；
颜色：#333；
}
.新部门{
填充顶部：50px；
文本对齐：居中；
字号：4em；
字号：100；
}
/*标题样式*/
标题{
位置：相对位置；
文本对齐：居中；
高度：100vh；
背景：线性梯度（向右，#69bcf4，#30cc8b）；
颜色：#fff；
}
收割台h1{
填料顶部：calc（50vh-113px）；
字号：7em；
字号：100；
}
收割台h2{
字号：2em；
}
标题span.1{
位置：绝对位置；
保证金：自动；
右：0；
左：0；
底部：50px；
高度：4px；
宽度：4px；
边界半径：2px；
背景：#fff；
动画持续时间：2.5s；
动画迭代次数：无限；
}
标题跨度：：之前，
标题span:：after{
位置：绝对位置；
顶部：-23px；
内容：“；
高度：30px；
宽度：4px；
边界半径：2px；
背景：#fff；
}
标题span:：before{
左：-10px；
变换：旋转（-45度）；
}
标题span:：after{
右：-10px；
变换：旋转（45度）；
}
/*媒体查询*/
@介质（最大宽度：759px）{
收割台h1{
字号：5em；
}
.新部门{
字号：3em；
}
.滚动动画{
显示：块；
}
.滚动动画分区{
填充：20px 80px；
}
。单击动画输入，
.单击动画文本区域，
。单击“动画”按钮{
宽度：80%；
}
}
@介质（最大宽度：475px）{
.新部门{
字号：2.5em；
} 
收割台h1{
字体大小：3.2米；
}
标题h2，
.funky动画h3{
字号：1.5em；
}
}

动画
使用Animate.css升级您的网站

我使用您使用的设置在此处重新创建了代码笔嵌入：

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

…它只是生成一个画笔的屏幕截图，并将其托管在Codepen的Amazon Web服务帐户（示例：）上，然后将该图像作为背景占位符，直到单击“运行画笔”按钮

所以它看起来像是截图的任何服务，都不支持

transform:rotate（45度）-需要加前缀

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

（我只是用简单的方法完成了——笔设置、CSS、供应商前缀、选中“Autoprefixer”复选框）

我把它埋在这里，箭头看起来很正常：


总之：为“变换：旋转”添加前缀

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

在你更新了你的之后，我不确定一支笔的屏幕截图多久更新一次，但是一旦更新了并且缓存清除了，那么箭头看起来应该是正确的
 我使用您使用的设置在此处重新创建了代码笔嵌入：

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


…它只是生成一个画笔的屏幕截图，并将其托管在Codepen的Amazon Web服务帐户（示例：）上，然后将该图像作为背景占位符，直到单击“运行画笔”按钮

所以它看起来像是截图的任何服务，都不支持
transform:rotate（45度）-需要加前缀

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

（我只是用简单的方法完成了——笔设置、CSS、供应商前缀、选中“Autoprefixer”复选框）

我把它埋在这里，箭头看起来很正常：


总之：为“变换：旋转”添加前缀

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

在你更新了你的之后，我不确定一支笔的屏幕截图多久更新一次，但是一旦更新了并且缓存清除了，那么箭头看起来应该是正确的
 你试过开发工具或调试器吗？到底缺少什么？对我来说似乎很好：嗯。。。就个人而言，我只想在
之后添加

，但这可能不正确……链接到代码笔？或者您正在使用的任何特定浏览器？示例代码片段在Chrome中运行良好，我也可以。但是，正如第一张照片所显示的那样，预览是一团糟的。。。你知道箭头是怎么错的吗？你试过开发工具或调试器吗？到底缺少什么？对我来说似乎很好：嗯。。。就个人而言，我只想在
之后添加

，但这可能不正确……链接到代码笔？或者您正在使用的任何特定浏览器？示例代码片段在Chrome中运行良好，我也可以。但是，正如第一张照片所显示的那样，预览是一团糟的。。。你看到箭头怎么错了吗？这看起来很棒！谢谢我会在我的更新后将其标记为正确。如果它仍然没有更新屏幕截图，则将所有代码复制到新的笔上，并嵌入该笔，以确保新的屏幕截图更快出现。这看起来很棒！谢谢一旦我的更新，我会将其标记为正确。如果它仍然没有更新屏幕截图，则将所有代码复制到新的笔上，并嵌入该笔，以确保新的屏幕截图更快出现。