Question

我的朋友想到了这个让我尝试的想法，但我甚至不知道从哪里开始。它基本上是在网站的背景下冒烟。喜欢四处走动，不喜欢什么。只是一个简单的烟熏移动背景。似乎可能，但我不知道从哪里开始寻找，所以任何正确方向的帮助都会很棒！

Answer 1

这里有一个不太复杂的

<div id="smoke">
  <span class="s0"></span>
  <span class="s1"></span>
  <span class="s2"></span>
  <span class="s3"></span>
  <span class="s4"></span>
  <span class="s5"></span>
  <span class="s6"></span>
  <span class="s7"></span>
  <span class="s8"></span>
  <span class="s9"></span>
</div>

CSS

body {background: #18d0f0}

/* Smoke container */

#smoke {
    position: absolute;
    z-index: 3;
    width: 1px; height: 160px;
    left: 50%; bottom: 30px;
}

/* No animations? Display a static smoke image */

.disableAnimations #smoke,
.no-cssanimations #smoke {
    width: 86px;
    margin-left: -25px;
    bottom: 146px;
    background: url('../img/smokeNoAni.png') no-repeat center bottom;
}

/* smoke balls */

.cssanimations #smoke span { 
    display: block;
    position: absolute;
    bottom: -35px; left: 50%; margin-left:-20px;
    height: 0px; width: 0px;
    border: 35px solid #4b4b4b;
    border-radius: 35px;
    left: -14px; opacity: 0;
    transform: scale(0.2);
}

/* Smoke animation */

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} { @content; }
    @-moz-keyframes #{$name} { @content; }
    @-o-keyframes #{$name} { @content; }
    @keyframes #{$name} { @content; }
}

@mixin animation($parameters) {
    -webkit-animation: $parameters;
    -moz-animation: $parameters;
    -o-animation: $parameters;
    animation: $parameters;
}

@include keyframes(smokeL) {
    0%   { @include transform(scale(0.2) translate(0, 0)) }
    10%  { opacity: 1; @include transform(scale(0.2) translate(0, -5px)) }
    100% { opacity: 0; @include transform(scale(1) translate(-20px, -130px)) }
}


@include keyframes(smokeR) {
    0%   { @include transform(scale(0.2) translate(0, 0)) }
    10%  { opacity: 1; @include transform(scale(0.2) translate(0, -5px)) }
    100% { opacity: 0; @include transform(scale(1) translate(20px, -130px)) }
}

#smoke .s0 { @include animation(smokeL 10s 0s infinite) }
#smoke .s1 { @include animation(smokeR 10s 1s infinite) }
#smoke .s2 { @include animation(smokeL 10s 2s infinite) }
#smoke .s3 { @include animation(smokeR 10s 3s infinite) }
#smoke .s4 { @include animation(smokeL 10s 4s infinite) }
#smoke .s5 { @include animation(smokeR 10s 5s infinite) }
#smoke .s6 { @include animation(smokeL 10s 6s infinite) }
#smoke .s7 { @include animation(smokeR 10s 7s infinite) }
#smoke .s8 { @include animation(smokeL 10s 8s infinite) }
#smoke .s9 { @include animation(smokeR 10s 9s infinite) }

DEMO

Answer 2

使用一个大型动画背景似乎是一个坏主意。图像文件总是很大，需要很长时间才能加载。

你能将大背景分解成几部分，并为这些部分制作动画吗？像这样：

http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

背后的基本思想很简单。每个云都放在它自己的div元素中。通常它包含一个透明背景的png图像。

然后你可以使用css和jQuery的组合。该元素可以设置动画，以显示大的移动背景。

Answer 3

使用CSS3动画，您可以随意移动对象： JSFiddle Demo

#smoke {
    -webkit-animation: myAnimation 20s; /* Chrome, Safari, Opera */
    animation: myAnimation 20s;
    position:fixed;
    z-index:-2;/* ForBackground*/
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myAnimation {
    0% {top:0; left:0}
    25% {top:10%; left:10%}
    50% {top:20%; left:25%}
    100% {top:15%; left:10%}
}

/* Standard syntax */
@keyframes myAnimation {
    0% {top:0; left:0}
    25% {top:10%; left:10%}
    50% {top:20%; left:25%}
    100% {top:15%; left:10%}
}

您可以更改任意号码的0%, 25%, 50%, 100%，然后更改time of animation以及position。这可能会帮助你。

HTML / CSS动画背景

3 个答案: