个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在codepen做了某个设计带有背景动画，它在那里工作，但是当我把它放在我的 ASP.Net Core 元素中时它不起作用。我知道我正确地引用了文件，因为背景颜色确实显示了，只是没有动画。我以为这只是 Chrome 的问题，但它在 Firefox 中也不起作用。我唯一没有测试的是看它是否在常规 IIS 而不是 IIS Express 中工作。
代码:
CSS:
body{
margin:0;
padding:0;
background:0 0;
}
.parallaxBackground {
min-height:100%;
min-width:100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.colorcycle {
min-height: 100%;
min-width: 100%;
display: inline-block;
text-align: center;
background: linear-gradient(271deg, #e7ff26, #2ecc00, #ff3b00, #2a9fff);
background-size: 800% 800%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
-o-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
-webkit-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
@-moz-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
@-o-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
@keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
}
HTML:
<body>
<!--Parallax Landing Section-->
<div class="parallaxBackground">
<div class="colorcycle">testing testing testing </div>
</div>
<!--Parallax Landing Section-->
</body>
编辑:因此，我将它与所有内容分开进行了测试。我只是在桌面上创建了一个普通文件夹，然后将我的 HTML 和 CSS 放入各自的文件中，然后就这样尝试了。没有对任何 JS、Bootstrap 或其他任何内容的其他引用。有同样的问题。所以我不认为这是我元素中的某些东西阻止了它，它必须是它被处理的方式。我唯一能想到的是，在 Codepen 上，它们的 CSS 在 .scss 文件中，但我认为这不会有什么不同。我会测试一下，但除此之外，我不知道。我只需要找到一个替代方案。
最佳答案
想通了。在 SASS 中，有嵌套的选择器，但它在普通 CSS 中不起作用。我只需要将它们从类里面移除就可以了。
.colorcycle {
min-height: 100%;
min-width: 100%;
display: inline-block;
text-align: center;
background: linear-gradient(271deg, #e7ff26, #2ecc00, #ff3b00, #2a9fff);
background-size: 800% 800%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
-o-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
}
@-webkit-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
@-moz-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
@-o-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
@keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
关于html - CSS Animations 在 CodePen 中工作，但在将它们放入 ASP.Net 元素后它们不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54123591/
25
4
0
是否可以将 CodePen 中的笔嵌入到没有默认框架/导航栏的网站中？换句话说，是否有可能摆脱笔顶部和底部的横条？谢谢! 最佳答案 您可以像这样在嵌入式代码片段上设置数据属性来实现 - data-sh
当我在 IE 10 或 11 的 codepan 中打开它时，这段代码有效，但当我尝试在 jsfiddle 或 IE 10 或 11 的任何地方执行相同操作时，它不起作用。我已经尝试过复制/粘贴和导出
因此，每当您在 Codepen 上创建笔时，它都会为您的笔分配一个屏幕截图，作为缩略图在您的仪表板中代表该笔。 但我面临的问题是，当我更新笔(或更改其外观)时，与笔关联的缩略图也应该更新，但情况并
我将此复选框设计得看起来像一个开关。我想在其中添加“ON”和“OFF”一词。这就是我遇到的麻烦。 这是代码笔:http://codepen.io/anon/pen/BKMErO CSS: .switc
我正在尝试控制台记录一个应该包含数组的变量。但是，在 Codepen 中，它返回一个空数组。我期待它返回列表项的内容。 这是 Codepen连同一些代码片段: 顺便说一句，这是一个 React 项目，
我有这支笔:https://codepen.io/dteiml/full/PNMwZo使用以下 JavaScript 代码: $('#getWeather').on('click', function
我正常使用 codepen，我正在将 imgur 图片链接到 imgur 或 GoogleDrive，它们都可以工作，但一段时间后它们不再出现，这可能是什么？已配置为公开访问。 最佳答案 来自 im
我在 Codepen 上有这段代码: body { width: 100px; height: 100px; background-color: #eee; background-im
我正在尝试用 html 和 css 做我的第一个元素，但遇到了一些麻烦。我正在练习使用 codepen，我的画廊进展顺利，但我正在尝试添加最后一行图像，它似乎把一切都搞砸了，我不知道为什么。有人介意看
我刚刚偶然发现了一个代码笔 demo .然后代码在 codepen 窗口中工作正常。当我将它复制到本地 HTML 文件时，它停止工作了。这是所有组合在一个 .html 文件中的代码 body
我有一个代码字体图标动画 我的问题是当我在本地服务器动画中运行时它不起作用 它只在 http://codepen.io/TimPietrusky/pen/ELuiG 中起作用 甚至尝试过 http:/
我正在尝试将图像和声音文件链接到我的 Code pen link使用下拉框共享链接。
我尝试将 CodePen(来自 codepen.io)添加到我的网页，但它没有按照我想要的方式显示。它只显示文本:'See the Pen ... on CodePen'。 The picture I
我正在尝试在同一个容器中制作 8 张产品卡片，我正在按照以下示例进行操作: https://codepen.io/virgilpana/pen/RNYQwB 但是当我尝试添加第二张、第三张等卡片时，动
尝试在我的笔中使用样式组件 https://codepen.io/mxshrv/pen/aMXvQd , 但出现错误 Cannot use 'in' operator to search for 'd
我正在阅读ReadmoreJS我很高兴能在 CodePen 上尝试一下。然而，当我阅读网站上的说明并在CodePen上实现一些代码时，它根本不起作用。这是我的CodePen的链接查看代码。在 JS 选
这是一个工作的 CodePen，当我将整个代码导出到本地 JS HTML 和 CSS 文件时，它不起作用...... https://codepen.io/pixy-dixy/pen/mYxLpR 我
很抱歉问了这个愚蠢的问题，但我想知道如何使这个 javascript 成为我网站的背景。对于 JavaScript 来说相对较新，我不太确定如何将其实现为背景。 代码笔链接: '''https://c
我只是想将自定义文本放在倒计时圆圈的中心，但我不知道如何替换当前位于中心的数字和文本。 Codepen 链接: http://codepen.io/anon/pen/zqjdRg 示例代码:
我正在使用 jQuery 并使用 JSON 在 Codepen.io 中制作一个简单的项目。 我想从对象数组中选择一个随机索引，为此我使用 getRandomArbritary 函数。 但是，在 co
我是一名优秀的程序员,十分优秀！