催眠soap

An advanced version of a CSS animation I improvised for the students in yesterday’s class, with three notable features:

我为昨天班级的学生准备的CSS动画的高级版本，具有以下三个显着特征：

• Nested animation: the second hand of the watch rotates in a circle, but also moves with the overall sway of the watch.

  嵌套动画 ：手表的秒针旋转一圈，但也随着手表的整体摆动而移动。

• vw units: the logo and animation are completely responsive thanks to the use of vw units for position and font size.

  大众单位 ：由于使用了大众单位的位置和字体大小，徽标和动画完全响应。

• Animated alpha masked PNGs: both the second hand and the watch itself are alpha-masked PNGs, reduced to a minimal file size through an old Adobe Fireworks trick.

  带有动画的Alpha蒙版PNG ：秒针和手表本身都是具有Alpha蒙版的PNG，通过旧的Adobe Fireworks技巧将其减小到最小文件大小。

The HTML:

HTML ：

<div id="watch"><img src=" pocketwatch.png" alt="Pocketwatch on chain" class="watch"><img src="second-hand.png" alt="Pocketwatch second hand" class="seconds">
</div>
<h1>DR. DEMENTO</h1>
<hr>
<h2>HYPNOTHERAPY SERVICES</h2>

The CSS (shown sans vendor prefixes for clarity):

CSS (为清楚起见，显示了无 厂商前缀 )：

@keyframes sway {to { transform: rotate(30deg); }
}
@keyframes fade {to { opacity: 1; }
}
@keyframes widen {to { width: 40%; }
}
@keyframes secondcount {to { transform: rotate(355deg); }
}
body {margin: 0;background: #111;color: #fff;text-align: center;
}
body > * { position: relative; }
#watch {width: 12vw;height: auto;margin: 0 auto;transform-origin: center top;transform: rotate(-30deg);top: -10px;animation: sway 2.2s infinite alternate ease-in-out;
}
#watch img.watch {width: 100%; height: auto;
}
img.seconds {position: absolute;width: 8%; height:auto;bottom: 11.75%; left: 45%;transform-origin: center 72.4%;animation: secondcount 60s infinite linear;
}
h1 {font-size: 10vw;top: -35vw;text-shadow: 0 0 3px 4px rgba(0,0,0,0.3);opacity: 0;animation: fade 4s 2s forwards;
}
h2 {font-weight: 100;font-size: 3vw;top: -20vw;letter-spacing: .2vw;opacity: 0;animation: fade 2s 7s forwards;
}
hr {border: none;width: 0%; color: #777;height: 1px;background-color: #777;top: -20vw;animation: widen 2s 5s forwards;
}

Finally if you are dealing with older versions of Webkit, you'll need some JavaScript to compensate for the fact that the engine did not always recognize viewport changes with respect to fonts sized in vw units:

最后，如果您要处理的是较旧版本的Webkit，则需要一些JavaScript来补偿以下事实：引擎并不总是能够识别相对于以vw单位的字体的视口更改：

window.addEventListener('resize', function() {var demento = document.querySelector('h1');var services = document.querySelector('h2');demento.style.fontSize="10vw";services.style.fontSize="3vw";
})

翻译自: https://thenewcode.com/822/Hypnotic-Logo-Animation

催眠soap