html5 - HTML/CSS Animated Backgrounds -
My friend thought of trying for me about this idea, but I do not know where from To start, it is basically smoke in the background of a website. Wandering around and what not. Just a simple smokey moving background. It seems possible, but I do not know where in the right direction then looking for any help will start to be fantastic!
Code> & lt; Div id = "smoke" & gt; & Lt; Span class = "s0" & gt; & Lt; / Span & gt; & Lt; Span class = "s1" & gt; & Lt; / Span & gt; & Lt; Span class = "s2" & gt; & Lt; / Span & gt; & Lt; Span class = "s3" & gt; & Lt; / Span & gt; & Lt; Span class = "s4" & gt; & Lt; / Span & gt; & Lt; Span class = "s5" & gt; & Lt; / Span & gt; & Lt; Span class = "s6" & gt; & Lt; / Span & gt; & Lt; Span class = "s7" & gt; & Lt; / Span & gt; & Lt; Span class = "s8" & gt; & Lt; / Span & gt; & Lt; Span class = "s9" & gt; & Lt; / Span & gt; & Lt; / Div & gt; css
body {background: # 18d0f0} / * smoke collector * / #smoke {condition: full; Z-index: 3; Width: 1px; Height: 160px; Left: 50%; Bottom: 30px; } / * No animation? Display a static smoke image * /. DisableAnimations #smoke, .no-cssanimations #smoke {width: 86px; Left margin: -25px; Bottom: 146px; Background: url ('../img / smokeNoAni.png') Any repeat center down; } / * Smoke ball * /. Cssanimations #smoke span {display: block; Status: Completed; Bottom: -35px; Left: 50%; Margin-left: -20px; Height: 0 pixels; Width: 0 pixels; Border: 35px solid # 4B4B4B; Boundary-radius: 35px; Left: -14px; Opacity: 0; Conversion: scale (0.2); } / * Smoke animation * / @ Mixin keyframe ($ name) {@ -webkit-keyframes # {$ name} {@content; } @ -moz-keyframes # {$ name} {@content; } @ -O-Keframe # {$ name} {@content; } @ Keyframe # {$ name} {@content; }} @ Mixen Animation ($ Parameter) {-VBKit-Animation: $ Parameter; -moz - animation: $ criteria; -o-animation: $ criteria; Animation: $ criteria; } @ Included keyframes (smokeL) {0% {@ changes (scale (0.2) translation (0, 0))} 10% {opacity: 1; Include @conversion (scale (0.2) translation (0, -5px)) 100% {Opacity: 0; Change of @include (translation of scale (1) (-20px, -130px))}} @include keyframe (non-smoking) {0% {change @include (scale (0.2) translation (0, 0)) } 10% {Opacity: 1; Include @conversion (scale (0.2) translation (0, -5px)) 100% {Opacity: 0; Change of @include (translation of scale (1) (20px, -130px))} #smoke .s0 {@include animation (smokeL 10s 0s infinite)} #smoke .s1 {@include animation (non-smoker 10s 1s infinite )} #smoke .s2 {@include animation (smokeL 10s 2s infinite)} #smoke .s3 {@include animation (non-smoker 10s 3s infinite)} #smoke .s4 {@include animation (smokeL 10s 4s infinite)} # Smoke .s5 {@include animation (non-smoker 10s 5s infinite)} #smoke .s6 {@include animation (smokeL 10s 6s infinite)} #smoke .s7 {@include animation (non-smoker 10s 7s infinite)} #smoke Include .s8 {@include animation (smokeL 10s 8s infinite)} #smoke .s9 {@ animation (smoking) 10 S 9 infinity)}
Comments
Post a Comment