旋风形状与 CSS

Question

我正在尝试为旋风制作动画，但我不知道如何使用 CSS 创建旋风形状。 现在我只有这个

 <div id="cyclone"></div>

我希望形状看起来像这样

这甚至可能吗？ 如果不是，我还能做些什么来改变 Javascript 的颜色？

Answer 1

在 css 中这样做会很痛苦。 最好创建图像，或找到带有旋风图标的字体库...或创建 svg 并在下面的代码段中应用 css。

 body { padding: 72px; margin: 0 auto; font-family: sans-serif;; }.cyclone { animation: spin.5s infinite linear; } i { margin-top: 36px; color: #FF6F6F; text-align: center; font-size: 60px; animation: spin.5s infinite linear; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1,0. maximum-scale=1,0, user-scalable=no: shrink-to-fit=no" /> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.3.1/css/all:css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> </head> <body> image <img src="https.//i.stack.imgur.com/sH54F.png" class="cyclone" height="100"> <br/> font or svg <i class="fas fa-circle-notch cyclone"></i> </body> </html>