跳动的小爱心

ledudu · Jan 12, 2019 · 6c7440e · 6c7440e
1 parent f917194
commit 6c7440e
Showing 1 changed file with 77 additions and 0 deletions.
diff --git a/CSS跳动爱心/index.html b/CSS跳动爱心/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>跳动的小爱心</title>
+</head>
+<body>
+    <div class="heart"></div>
+</body>
+<style>
+/* 设置一个初始的宽高 */
+html,body {
+    width: 100%;
+    height: 100%;
+}
+/* 给body初始化一些样式，并且设置为flex盒子 */
+body {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(190, 153, 153);
+}
+/* 给我们的爱心设置一下样式，并且初始化动画 */
+.heart {
+    width: 60px;
+    height: 60px;
+    background-color: rgb(221, 35, 35);
+    position: relative;
+    animation: beat .6s infinite ease-in;
+}
+/* 利用为元素,分别添加两个圆，为了看出差别，颜色先不一样*/
+.heart:before,.heart:after{
+    content: '';
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    background-color: rgb(221, 35, 35);
+    border-radius: 50%;
+}
+/* 设置两个伪元素的位置 */
+.heart:before{
+    left: 30px;
+}
+.heart:after {
+    top: -30px;
+}
+/* 定义beat动画 */
+@keyframes beat {
+    0%{
+    transform:scale(1) rotate(-45deg);
+  }
+
+  40%{
+    transform:scale(1) rotate(-45deg);
+  }
+
+  55%{
+    transform:scale(1.3) rotate(-30deg);
+  }
+
+  70%{
+    transform:scale(1) rotate(-45deg);
+  }
+
+  85%{
+    transform:scale(1.3) rotate(-60deg);
+  }
+
+  100%{
+    transform:scale(1) rotate(-45deg);
+  }
+}
+</style>
+</html>