interface Web
tutoriel CSS
Exemple de code d'effet de flamme d'animation plus léger de dessin CSS3 pur
Exemple de code d'effet de flamme d'animation plus léger de dessin CSS3 pur
L'exemple de cet article partage le code spécifique pour dessiner l'effet de flamme d'une animation plus légère avec du CSS3 pur pour votre référence. Le contenu spécifique est le suivant
Il implique principalement les attributs suivants :
<span style="font-family:Comic Sans MS;">animation(webkit-animation), @keyframes name (@-webkit-keyframes name), transform, transform-origin, transition, box-shadow（spread属性）, text-shadow z-index linear-gradient。 radial-gradient background-image </span>
Tout d'abord, le code html est le suivant :
<span style="font-family:Comic Sans MS;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS绘制打火机动画火焰特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body class="keBody">
<h1 class="keTitle">纯CSS3绘制打火机动画火焰特效</h1>
<p class="kePublic">
<p class="playground">
<p class="flame"></p>
<p class="lighterBody">
<p class="hover">hover me</p>
</p>
<p class="lid"></p>
</p>
<p class="clear"></p>
</p>
</body>
</html></span>Le fichier style.css est le suivant :
<span style="font-family:Comic Sans MS;">@charset "utf-8";
body{
margin:0;
padding:0;
color:#333;
text-align:center;
font:12px "微软雅黑";
}
:before,:after{
position:absolute;
content:"";
}
.keBody{
background:url(../images/bodyBg.jpg) repeat #333;
}
.keTitle{
height:100px;
line-height:100px;
font-size:30px;
font-family:'微软雅黑';
color:#fff;
text-align:center;
background:url(../images/bodyBg3.jpg) repeat-x bottombottom left;
font-weight:normal;
margin-bottom:0;
}
.kePublic{
background:#cccccc;
padding:50px;
}
.playground{
position:relative;
width:140px;
height:400px;
left:50%;
margin-left:-70px;
}
.flame{
opacity: 0;
position: absolute;
bottombottom: 60%;
left: 42%;
width: 14px;
height: 70px;
background-color: white;
border-radius: 100% 100% 0 0;
box-shadow: 0 0 20px #FFFEF0, 0 0 20px #FFFEE6, 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
.playground:hover .flame {
opacity:1;
transition:opacity 3s linear;
-webkit-animation:flame 1s infinite linear;
}
.playground:hover .lid{
-webkit-animation:lidoff 1s linear;
/*把物体动画地从一个地方移动到另一个地方，并让它停留在那里：*/
-webkit-animation-fill-mode:forwards;
}
.lighterBody{
position:absolute;
width:140px;
height:130px;
top:200px;
left:0;
background-image:linear-gradient(to rightright,#959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,
#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
border-radius:2% 2% 8% 8%;
box-shadow:inset 0 0 5px 5px #333;
}
.lighterBody:before{
width:47px;
height:47px;
top:-50px;
left: 42px;
content:"...";
color:#e6e6e6;
border-radius:6% 6% 0 0;
background-image:linear-gradient(to rightright,#f5f5f5 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
font-size:30px;
font-weight:bold;
letter-spacing:7px;
line-height:16px;
text-shadow:0 0 5px black;
padding-top:3px;
padding-left:4px;
}
.lighterBody:after{
width:33px;
height:33px;
background-image:radial-gradient(ellipse at center,#7d737d 0%,#0e0e0e 100%);
border-radius:100%;
top:-33px;
left:10px;
box-shadow:inset 0 0 1px 2px gray;
}
.lid{
z-index:2;
position:absolute;
width:140px;
height:75px;
top:125px;
left:0;
background:linear-gradient(to rightright,#959595 0%,#0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
border-radius:8% 8% 2% 2%;
box-shadow:inset 0 0 5px 5px #333;
/*border-bottom:3px solid #f2f2f2;*/
}
.lid:before{
width:10px;
height:10px;
top:70px;
left:133px;
background-image:radial-gradient(ellipse at center, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
border-radius:100%;
}
.hover{
z-index:1;
text-align:center;
margin-top:30%;
color:rgba(255,255,255,0.9);
text-shadow:0 1px 1px rgba(0,0,0,0.8);
font: 20px "微软雅黑";
}
.hover:before{
content:"";
z-index:1;
width:0;
height:0;
top:-50px;
left:20px;
border-bottom:35px solid #f2f2f2;
/*border-left:10px solid transparent;*/
}
@-webkit-keyframes flame{
0%{
height:70px;
transform:skewY(0deg);
border-radius:100% 100% 0 0;
}
25%{
height:60px;
transform:skewY(40deg);
border-radius:10% 100% 0 0;
}
60%{
height:65px;
transform:skewY(-20deg);
border-radius:90% 10% 0 0;
}
70%{
height:50px;
transform:skewY(10deg);
border-radius:10% 100% 0 0;
}
100%{
height:70px;
tranform:skewY(0deg);
}
}
@-webkit-keyframes lidoff{
from{
transform:rotate(0deg);
transform-origin:100% 100%;
}
to{
transform:rotate(130deg);
transform-origin:100% 100%;
}
}</span>Photo initiale :
Photo dynamique
Il existe deux effets d'animation principaux, l'un est la situation où la souris survole "survolez-moi" et le couvercle du briquet est ouvert. Il est réalisé par le code d'animation suivant :
<span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{ 注意这里要加上-webkit-
from{
transform:rotate(0deg);
transform-origin:100% 100%;
}
to{
transform:rotate(130deg);
transform-origin:100% 100%;
}
}
</span> La deuxième animation est la mise en œuvre de l'effet d'éclairage de la bougie : La variable de la bougie est réalisée par transition : opacité 3s linéaire
L'effet de balancement du vent de la lumière de la bougie ; est réalisé par le code suivant :
<span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{
from{
transform:rotate(0deg);
transform-origin:100% 100%;
}
to{
transform:rotate(130deg);
transform-origin:100% 100%;
}
</span> L'effet de séparation du couvercle du briquet du torse est obtenu par : box-shadow:inset 0 0 5px 5px #333; encart ici (attention à ne pas l'écrire sous forme d'insert).
La boule ronde et le petit carré blanc qui apparaissent lorsque le briquet est allumé sont les effets obtenus par :after :before combiné avec z-index.
Ce qui suit présentera certains attributs que j'ai appris grâce à cet exemple et auxquels il faut prêter attention.
transform-origin : La position initiale par défaut est le centre de l'image, 100% 100% équivaut à en bas à droite 0% 0% équivaut à. en haut à gauche.
avant et :après : Le contenu injecté est un sous-élément de l'élément cible associé, mais il sera placé "avant" tout contenu de cet élément ou "après". Le contenu inséré est invisible dans le code source de la page et n'est visible que dans le CSS. Les éléments insérés en même temps sont des éléments en ligne par défaut. Par conséquent, afin de donner à un élément inséré la hauteur, le remplissage, les marges, etc., un élément au niveau du bloc (display:block) doit généralement être explicitement défini.
De plus, bien qu'aucun contenu ne puisse être inséré, le contenu doit être écrit. Si aucun contenu n'est inséré, alors le contenu est écrit comme contenu :"";
IE6. et IE7 n'est pas compatible avec ces deux éléments :
pseudo-élément (double deux-points), la pseudo-classe en CSS3 est (simple deux-points)
animation -fill-mode: none|forwards|backwards|both|initial|inherit;
Spécifie à appliquer lorsque l'animation n'est pas en cours de lecture (lorsque l'animation se termine ou lorsque l'animation a un retard mais ne commence pas à jouer) Le style de l'élément.
background-image : résout le problème selon lequel p ne peut définir qu'un seul arrière-plan, de sorte qu'un p peut définir plusieurs images d'arrière-plan.
box-shadow : Un paramètre souvent oublié - spread (rayon d'ombre étendu), cet écart une fois oublié modifie la taille de l'ombre --- sa valeur peut être positive ou négative, si la valeur est positive , l'ombre entière s'agrandira et s'agrandira, sinon elle rétrécira si c'est une valeur négative. Avec ce paramètre, vous pouvez utiliser box-shadow pour créer un effet d'ombre sur un seul côté, comme le travail d'ombre dans Photoshop. Une chose à noter ici est que cette valeur d'ombre étendue doit être utilisée en conjonction avec le rayon de flou d'ombre. La situation générale est que "le rayon d'ombre étendu est généralement défini pour être égal au rayon de flou et ses valeurs négatives". sont supprimés."
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde, et j'espère également que tout le monde soutiendra le site Web PHP chinois.
Pour des articles plus purs sur les exemples de code d'effet de flamme d'animation de briquet de dessin CSS3, veuillez faire attention au site Web PHP chinois !
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)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Comparaison des navigateurs pour une conception réactive
Apr 02, 2025 pm 06:25 PM
Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire
Cartes empilées avec un positionnement collant et une pincée de sass
Apr 03, 2025 am 10:30 AM
L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.
