Question

我使用this font，我尝试将太阳和云结合起来，所以即使我调整窗口大小，它们也会一直移动：

.sun:before{content:'\f113'; font-size:7em;color: #fbac13; font-family: iconvault;font-style:normal;-webkit-animation: rotation 5s linear infinite}

.cloud:after{content:'\f106'; font-size:7em; ; font-family: iconvault;font-style: normal;color: rgb(146, 157, 173);-webkit-animation: move 2s linear alternate infinite;text-shadow: 6px 5px 10px white,-5px -5px 10px white,-5px -5px 20px white,-5px -5px  20px white;}

@-webkit-keyframes rotation {from {transform: rotate(0deg);}to {transform: rotate(90deg);}}
@-webkit-keyframes move {from {transform: translate(-20px) ;}to {transform: translate(0px) }}

我知道背后的想法：absolute，relative，fixed，static，在网站上，他使用absolute。

我很抱歉这个初学者的问题。

注意：我将before与after一起使用，因为我将有时间使用超过2个图标（太阳，云，雪，雷）

Answer 1

this 是什么意思？

我不确定这是否是实现这一目标的最佳方法，但它确实有效：

HTML：

<div class="icon-group">
    <div class="icon sun"></div>
    <div class="icon cloud"></div>
</div>

的CSS：

.icon {
    display: inline-block;
}

.icon-group {
    display: inline-block;
    white-space: nowrap;
}

修改

您可以尝试这样的方式来叠加图标： Stacked example

HTML：

<div class="icon-stack">
    <div class="sun"></div>
    <div class="cloud"></div>
</div>

的CSS：

.cloud {
    position: absolute;
    left: 0;
    top: 20px;
}

.icon-stack {
    position: relative;
    display: inline-block;
    border: 1px solid #ddd;
}

将多个图标组合在一起？

1 个答案:

修改