纯css3实现饼图动画_html/css_WEB-ITnose
注: 本案例来自 CSS Screct
先看效果:
你可能需要掌握下列知识
- CSS3 Animation
- Pseudo Element
- 使用 linear-gradient 制作不渐变
- currentColor (非必须)
- 使用 border-radius ‘除’语法(非必须)
以上非必须标记,意味着如果你不追求代码质量,或使用预处理工具的话不了解也能实现。
HTML
实现起来并不复杂,这里只使用单个元素 + pseudo-element 就够了。
<div class="pie"></div>
css
.pie { width: 100px; height: 100px; border-radius: 50%; background: #e85b92; background-image: linear-gradient(to right, transparent 50%, currentColor 0); color: #f2f3f4;}.pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 3s linear infinite, bg 6s step-end infinite;}@keyframes spin { to { transform: rotate(.5turn); }}@keyframes bg { 50% { background: currentColor; }}
关键代码
渐变
background-image: linear-gradient(to right, transparent 50%, currentColor 0);
linear-gradient 是css3中制作渐变色的属性;to right,表示渐变从左到右;后面的参数是渐变色列表。
渐变色列表从左到右逐个显示,颜色值后面的百分比或像素值表示渐变起始的阈值。
我的理解是这样的:如果前一个颜色阈值小于后一个颜色阈值,则这段阈值区域间产生渐变,而相反,如果前一个阈值大于后一个阈值,那么不会产生渐变,并且不相交区域显示临近颜色值的纯色。
所以本来中,pie 元素部分生成的效果是这样的:
个人认为, 使用 linear-gradient 略显繁琐并且IE9以下不支持(可能跟少用有关),我更倾向于使用伪元素来实现。
.pie { width: 100px; height: 100px; border-radius: 50%; background: #e85b92; color: #f2f3f4; position: relative;}.pie::after { z-index: 1; content: ''; display: block; background: currentColor; position: absolute; left: 50%; top: 0; height: 100%; border-radius: 0 100% 100% 0 / 50%; width: 50%; transform-origin: left;}.pie::before { content: ''; display: block; z-index: 10; position: absolute; top: 0; width: 50%; left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit;; transform-origin: left; animation: spin 3s linear infinite, bg 6s step-end infinite;}
border-radius ‘除’语法
如果去掉 border-radius 以及修改颜色值,产生的效果是这样的:
动画
然后再加上两个动画,一个负责旋转 3s,一个负责更改背景色 6s,连起来变成这样:
CodePen
See the Pen YqEJVo by Helkyle ( @HelKyle ) on CodePen .
总结
刚开始学css 动画的时候,尝试过使用 css3 实现类似效果,但以失败告终,因为思维被限制死在如何实现’饼图’。所以有时候跳出固定思维模式,或许会有其他收获。
近期在看 CSS Screct 英文版,被书中很多技巧深深吸引住,没想到 CSS 还能这么灵活地使用。怪不得有大牛说:看完这本书,再也不敢说自己精通CSS。
对了,CSS魔法哥翻译了 这本书 ,准备上架,非常期待~(免费打广告…)

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
