Méthode d'implémentation de simulation du rythme cardiaque à l'aide de HTML et CSS3-tutoriel CSS-php.cn

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

不言

Libérer： 2018-06-20 11:01:46

original

1799 Les gens l'ont consulté

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>

Copier après la connexion

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!