Maison > Article > interface Web > Exemple d'utilisation de code CSS pour obtenir un effet avion en papier
Exemple d'utilisation de code CSS pour obtenir un effet avion en papier
- 高洛峰original
- 2017-02-25 14:49:542084parcourir
Le rendu de l'implémentation est le suivant :
L'exemple de code est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纸飞机</title>
<style>
.wrap {
position: relative;
display: inline-block;
width: 300px;
height: 120px;
-webkit-animation: fly 6s;
-moz-animation: fly 6s;
-o-animation: fly 6s;
animation: fly 6s;:
}
.triangle1 { /*黄色三角形*/
position: absolute;
top: 50px;
left: 8px;
height: 0;
width: 0;
border-left: 100px solid rgba(255, 255, 255, 0);
border-right: 180px solid rgba(255, 255, 255, 0);
border-bottom: 24px solid #f09c18;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.triangle1:after { /*红色边线*/
position: absolute;
left: -100px;
content: '';
display: block;
width: 280px;
height: 24px;
border-bottom: 1px solid red;
}
.triangle2 { /*绿色三角形*/
position: absolute;
top: 39px;
left: 66px;
height:0;
width: 0;
border-left: 40px solid rgba(255, 255, 255, 0);
border-right: 180px solid rgba(255, 255, 255, 0);
border-top: 24px solid #07d362;
-webkit-transform: rotate(5.2deg);
-moz-transform: rotate(5.2deg);
-ms-transform: rotate(5.2deg);
-o-transform: rotate(5.2deg);
transform: rotate(5.2deg);
}
.triangle2:after { /*黄色边线*/
position: absolute;
top: -24px;
left: -40px;
content: '';
display: block;
width: 220px;
height: 24px;
border-top: 1px solid yellow;
}
.triangle3 { /*黑色三角形*/
position: absolute;
top: 68px;
left: 100px;
height: 0;
width: 0;
border-left: 6px solid rgba(255, 255, 255, 0);
border-right: 100px solid rgba(255, 255, 255, 0);
border-bottom: 12px solid #2e302c;
-webkit-transform: rotate(-16.8deg);
-moz-transform: rotate(-16.8deg);
-ms-transform: rotate(-16.8deg);
-o-transform: rotate(-16.8deg);
transform: rotate(-16.8deg);
}
@keyframes fly { /*定义动画*/
0% {
top: 0;
left: 0;
}
5% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
50% {
top: 200px;
left: 800px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
55% {
-webkit-transform: rotate(170deg) rotateX(180deg);
-moz-transform: rotate(170deg) rotateX(180deg);
-ms-transform: rotate(170deg) rotateX(180deg);
-o-transform: rotate(170deg) rotateX(180deg);
transform: rotate(170deg) rotateX(180deg);
}
100% {
top: 400px;
left: 0;
-webkit-transform: rotate(170deg) rotateX(180deg);
-moz-transform: rotate(170deg) rotateX(180deg);
-ms-transform: rotate(170deg) rotateX(180deg);
-o-transform: rotate(170deg) rotateX(180deg);
transform: rotate(170deg) rotateX(180deg);
}
}
</style>
</head>
<body>
<p class="wrap">
<p class="triangle1"></p>
<p class="triangle2"></p>
<p class="triangle3"></p>
</p>
</body>
</html>Résumé
Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter. quelques avantages pour les études ou le travail de chacun. Pour obtenir de l'aide, si vous avez des questions, vous pouvez laisser un message pour communiquer.
Pour plus d'articles liés à des exemples d'utilisation de code CSS pour obtenir un effet avion en papier, veuillez faire attention au site Web PHP chinois !
Déclaration：
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
Article précédent：Plusieurs méthodes de centrage horizontal et vertical en CSSArticle suivant：Plusieurs méthodes de centrage horizontal et vertical en CSS