Maison > Article > interface Web > Méthode d'implémentation de simulation du rythme cardiaque à l'aide de HTML et CSS3

Méthode d'implémentation de simulation du rythme cardiaque à l'aide de HTML et CSS3

不言original: 2018-06-20 11:01:461793parcourir

Cet article vous présente la méthode d'implémentation de HTML+CSS3 pour simuler les battements du cœur à travers le code. C'est très bien et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Pas plus. C'est absurde, donnez-le-vous directement. Le code est publié. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>模拟心的跳动</title>
</head>
<style type="text/css">
    * {
    margin: 0;
    padding: 0;
}
body {
    background-color: #D4CECE;
}
.big {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    animation: heartAnimation 0.7s linear 0s infinite;
}
.big #heart {
    margin: 5px 0;
    width: 100%;
    height: 100%;
    background-color: #FF0606;
    position: absolute;
}
.left,.right {
    border-radius: 100px 100px 0 0;  /*左上 右上 右下 左下*/
    box-shadow: 0px 0px 20px #FD0707;
}
.bottom {
    box-shadow: 0px 0px 20px #FD0707;
}
.left {
    transform: translate(-50px,150px) rotate(-45deg);  /*translate()位移 rotate() 旋转角度*/
}
.right {
    transform: translate(50px,150px) rotate(45deg);
}
.bottom {
    transform: translate(0,214px) rotate(45deg) scale(.9,.9)  /*scale:定义 2D 缩放转换。*/
}
/*动画效果*/
@keyframes heartAnimation{
    form {
            transform: scale(0.9,0.9);
    }
    to {
            transform: scale(1.1,1.1);
    }
}
</style>
<body>
    <p class="big">
        <p id="heart" class="left"></p>
        <p id="heart" class="right"></p>
        <p id="heart" class="bottom"></p>
    </p>
</body>
</html>

Ce qui précède est l'intégralité du contenu de cet article. .J'espère que cela sera utile à l'étude de tout le monde.Plus connexe Veuillez faire attention au contenu du site Web PHP chinois !

Recommandations associées :

À propos de la méthode de dessin des icônes triangulaires en HTML et CSS

Basé sur HTML5 La salle informatique 3D implémentée par WebGL

est basée sur HTML5 Graphique graphique dynamique 3D implémenté par Canvas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en 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：À propos de la méthode adaptative pour réaliser une largeur fixe à droite et une largeur à gauche en CSSArticle suivant：À propos de la méthode adaptative pour réaliser une largeur fixe à droite et une largeur à gauche en CSS

Articles Liés

Voir plus