Table des matières
你可能需要掌握下列知识
HTML
css
关键代码
渐变
border-radius ‘除’语法
动画
CodePen
总结
Maison interface Web tutoriel HTML 纯css3实现饼图动画_html/css_WEB-ITnose

纯css3实现饼图动画_html/css_WEB-ITnose

Jun 21, 2016 am 08:52 AM

注: 本案例来自 CSS Screct

先看效果:

你可能需要掌握下列知识

  • CSS3 Animation
  • Pseudo Element
  • 使用 linear-gradient 制作不渐变
  • currentColor (非必须)
  • 使用 border-radius ‘除’语法(非必须)

以上非必须标记,意味着如果你不追求代码质量,或使用预处理工具的话不了解也能实现。

HTML

实现起来并不复杂,这里只使用单个元素 + pseudo-element 就够了。

<div class="pie"></div>
Copier après la connexion

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; }}
Copier après la connexion

关键代码

渐变

background-image: linear-gradient(to right, transparent 50%, currentColor 0);
Copier après la connexion

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;}
Copier après la connexion

border-radius ‘除’语法

如果去掉 border-radius 以及修改颜色值,产生的效果是这样的:

动画

然后再加上两个动画,一个负责旋转 3s,一个负责更改背景色 6s,连起来变成这样:

CodePen

See the Pen YqEJVo by Helkyle ( @HelKyle ) on CodePen .

总结

刚开始学css 动画的时候,尝试过使用 css3 实现类似效果,但以失败告终,因为思维被限制死在如何实现’饼图’。所以有时候跳出固定思维模式,或许会有其他收获。

近期在看 CSS Screct 英文版,被书中很多技巧深深吸引住,没想到 CSS 还能这么灵活地使用。怪不得有大牛说:看完这本书,再也不敢说自己精通CSS。

对了,CSS魔法哥翻译了 这本书 ,准备上架,非常期待~(免费打广告…)

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Apr 04, 2025 pm 11:30 PM

L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

HTML, CSS et JavaScript: outils essentiels pour les développeurs Web HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Apr 05, 2025 am 06:15 AM

Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

See all articles