- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个代码字体图标动画 我的问题是当我在本地服务器动画中运行时它不起作用 它只在 http://codepen.io/TimPietrusky/pen/ELuiG 中起作用
甚至尝试过
@import url(http://weloveiconfonts.com/api/?family=maki);
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background: #333;
}
[class*="maki-"]:before{
font-family: 'maki', sans-serif;
}
*:after {
position: absolute;
top: 0;
right: 0;
content: '';
z-index: -1;
width: 0;
height: 0;
}
[class*="maki-"] {
position: absolute;
margin: 0;
color: #fff;
font-size: 2em;
}
.wrapper {
height: 140%;
width: 120%;
transform: rotate(-3deg) translate(-10%, -15%);
}
.night {
position: absolute;
z-index: 5;
width: 100%;
height: 100%;
animation: night 45s infinite forwards;
}
@keyframes night {
0%, 30%, 100% {background:rgba(0, 0, 0, 0);}
55% {background: rgba(0, 0, 0, .6);}
}
.sky {
position: relative;
z-index: 0;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png);
height: 50%;
width: 100%;
animation: rollin-bg 25s linear infinite forwards;
}
.ground {
position: absolute;
z-index: 1;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
height: 50%;
width: 100%;
animation: rollin-bg 7s linear infinite forwards;
}
@keyframes rollin-bg {
0% {background-position: 100%;}
100% {background-position: 0;}
}
.sun {
position: absolute;
z-index: 1;
left: 50%;
top: 10%;
width: 2em;
height: 2em;
font-size: 4em;
line-height: 1;
animation: circle 45s linear infinite;
transform-origin: 50% 3.85em;
}
.sun [class*="maki-"] {
color: rgba(240, 180, 0, .2);
text-shadow: 0 0 .35em rgba(240, 240, 0, .7);
}
.sun > div {
animation: inner-circle 45s linear infinite;
}
@keyframes circle {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes inner-circle {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
.maki-bicycle {
left: 50%;
z-index: 4;
margin: -.85em 0 0 -.5em;
color: rgba(30, 30, 140, .95);
}
.maki-tree-1[data-child="1"] {
margin: -1em 0 0 5%;
z-index: 6;
animation: rollin 5s linear infinite;
font-size: 2.4em;
color: rgba(0, 110, 0, 1);
}
.maki-tree-1[data-child="2"] {
margin: -1em 0 0 85%;
z-index: 2;
animation: rollin 12s linear infinite;
font-size: 1.6em;
color: rgba(0, 110, 0, .5);
}
.maki-tree-1[data-child="3"] {
margin: -1em 0 0 25%;
z-index: 2;
animation: rollin 17s linear infinite;
font-size: 1.2em;
color: rgba(0, 110, 0, .3);
}
.maki-giraffe {
margin: .25em 0 0 5%;
z-index: 6;
animation: rollin 12s linear infinite reverse;
font-size: 10em;
color: rgba(255, 255, 10, .9);
}
.maki-giraffe:after {
right: -3em;
content: '\e82a \e82a \e82a \e82a \e82a';
font: .2em 'Maki', sans-serif;
letter-spacing: .2em;
width: 3em;
color: rgba(0, 0, 0, .6);
box-shadow:
0 .45em 0 .75em rgba(255, 255, 255, .4),
1em .35em 0 .75em rgba(255, 255, 255, .4),
2.25em .25em 0 1.05em rgba(255, 255, 255, .4)
;
border-radius: 50%;
transform: translate(2.3em, .55em) rotateY(-180deg);
}
.maki-grocery-store {
margin: -.35em 0 0 5%;
z-index: 5;
animation: rollin 22s linear infinite;
font-size: 4em;
color: rgba(220, 0, 10, .7);
}
.maki-commerical-building[data-child="1"] {
margin: -1em 0 0 5%;
z-index: 3;
animation: rollin 6s linear infinite;
font-size: 7em;
color: rgba(120, 0, 120, .8);
}
.maki-commerical-building[data-child="2"] {
margin: -1em 0 0 5%;
z-index: 2;
animation: rollin 14s linear infinite;
font-size: 4em;
color: rgba(0, 120, 120, .4);
}
.maki-heliport {
margin: -3.5em 0 0 2em;
z-index: 1;
color: rgba(30, 30, 30, .45);
font-size: 1.25em;
animation: rollin 26s linear infinite reverse 2s;
}
@keyframes rollin {
0% {margin-left:105%}
100% {margin-left:-15%;}
}
<div class="night"></div>
<div class="wrapper">
<div class="sun">
<div class="maki-fast-food"></div>
</div>
<div class="sky"></div>
<span class="maki-bicycle"></span>
<span class="maki-tree-1" data-child="1"></span>
<span class="maki-tree-1" data-child="2"></span>
<span class="maki-tree-1" data-child="3"></span>
<span class="maki-giraffe"></span>
<span class="maki-grocery-store"></span>
<span class="maki-commerical-building" data-child="1"></span>
<span class="maki-commerical-building" data-child="2"></span>
<span class="maki-heliport"></span>
<div class="ground"></div>
</div>
最佳答案
动画在您的版本中根本不起作用的原因是因为动画属性在某些浏览器中需要前缀,例如 -webkit-
。
在 CodePen 中,-prefix-free被使用,这就是它起作用的原因。它是一个自动添加 CSS 属性前缀版本的库。CodePen也可以用Autoprefixer (另一个这样的图书馆)或两者都不是。选择“两者都不”后,您会看到 CodePen 示例也不再有效,因为 (S)CSS 不包含 CSS 属性所需的前缀版本。
因此,解决方案:要么也使用库,要么为 Chrome(可能还有其他浏览器)添加所需的前缀属性。
有人询问并回答了类似的问题(针对一组不同的属性)here .
关于css - 错误字体图标动画仅适用于 codepen,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28591663/
你知道更好的写法吗 font = font ? font : defaultFont; 我所知道的是: if(!font) { font = defaultFont } 我知道这是一个小工具问
我正在编写代码,但无法编译,即使类(字体)已通过 import javafx.scene.text.*; 导入我知道这个方法font包含在字体中。 这是我的代码: package helloworld
我已经构建了一个按钮,但在格式设置(即平方、内联文本等)方面遇到了问题 我目前的问题是:正文分为2部分- 上线正常-下一行是较大的字体大小 我的动画 react 正确,但文本应该在箭头的顶线和底线内。
好的,所以我想在网页上使用固定系统作为字体。我可以使用 Cufon,但我希望人们能够在鼠标悬停时选择文本并复制它。 有人有什么吗? 最佳答案 我使用 fontsquirrel 的 @font-face
我找到了 iOS 4.2 可用字体列表(链接 here ),但该列表与早期版本的 SDK 略有不同(链接 here )。 我可以很好地更改代码中的字体,但如果我使用 iOS 4.2 列表中可用的字体,
我正在尝试更改 TableView 标题上的字体颜色,其中显示“加利福尼亚/纽约”。我该怎么做? 在黑色背景上,文本需要是白色的,但无法弄清楚这一点。 谢谢 最佳答案 如果您尝试更改标题颜色,可以使用
假设我想使用 java.awt.Graphics.drawString(String str, int x, int y)在某些特定坐标处绘制字符串的方法,例如 (300, 300)。然而drawSt
我想使用Puppeteer从HTML字符串生成图像。现在我有这样的事情: const html = _.template(` Hello {{ test }}!
我正在创建一个游戏。我有一些带有文本的用户界面。最近我们想添加日语版本,但我遇到字体问题。我使用 stb_freetype 来光栅化字体,并且我支持 Unicode,所以这应该不是问题。但大多数字体似
我可以在一个文本区域中使用不同的前景色吗?不同的字体? 我想添加类似“hh:mm:ss 昵称:消息”的内容,时间为灰色,名称 - 蓝色,消息 - 黑色。 最佳答案 我在评论中犯了一个错误:你想要的是
每次我更改字体时,它都会返回到默认大小,即 12,即使我之前使用“ Jade 野”菜单更改它,它每次也只会返回到 12,我的猜测是这样我使用deriveFont()更改大小,但现在没有其他方法可以更改
我的电脑上安装了一种名为“BMW1”的自定义字体。我试图循环遍历此字体中的所有条目并将它们显示在 JTextArea 中。 我有以下代码: JTextArea displayArea = new JT
我尝试通过 Squirrel 理解生成的代码,这里是输出: @font-face { font-family: 'someFont'; src: url('someFont.eot')
我知道有多种方法可以通过 JS/DHTML 动态更改网页的字体属性,或者用 Flash 呈现的字体(使用 sIFR 或 Cufon)替换文本。但是,我找不到任何根据用户选择动态更改网页上使用的字体的好
使用具有非标准样式名称(例如“Inline”或“Outline”)而不是标准样式(例如“Bold”和“Italic”)的字体系列,如何使用 css 选择字体的不同样式? 设置 font-family
我对 html/css 有点陌生,我正在制作我的第一个网站,但我只是想不通一些东西。 首先,我在 dreaweaver 中工作...在 dreaweaver 中,一切看起来都不错,但是当我预览时,我缺
有没有办法在 Allegro5 中只绘制(或显示)图像/字体的一部分? 例如,如果我有一个正方形 A 和一个图像 B,我只想绘制/显示 B 中与 A(在本例中为 C)重叠的部分,我该怎么做? 插图:
所以,我有一个正在生成的报告 html 文件,其中有需要白色文本/字体的黑框。在通用 html 显示中一切都很好,但是当我尝试打印页面时,ctrl + p 或自定义打印功能,文本/字体保持为标准颜色,
我正在尝试制作一个非常适合 LaTeX 文档的 matlab 图形。一个已知的问题是 XTickLabel 和 YTickLabels 不使用 LaTeX 解释器渲染,导致图形不好看。 (注意:我意识
我需要在一个公共(public)位置使用默认颜色和字体,以便在桌面应用程序的多个窗口窗体中使用它。 这方面的最佳做法是什么? 我正在考虑使用应用程序设置在那里定义它们,但我想确保这是推荐的方法或者是否
我是一名优秀的程序员,十分优秀!