一天一个小页面（1）

最新推荐文章于 2022-11-11 09:29:16 发布

Jerry cat

最新推荐文章于 2022-11-11 09:29:16 发布

阅读量136

点赞数 1

分类专栏：前端 CSS 文章标签： CSS实现跳动的红心

本文链接：https://blog.csdn.net/qq_41914120/article/details/96186601

版权

前端同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

CSS

11 篇文章 1 订阅

订阅专栏

跳动的红心

- 今天写跳动的红心

今天写跳动的红心

1、思路

首先要用css实现一个爱心的话，我是用一个正方形＋两个半圆画出来的。然后用CSS3动画的animation实现跳动效果。用CSS写的话效率高。

2、界面

3、代码

CSS的：

 		 body{
              background-color: pink;
          }
          .wrap{
              position: relative;
              width: 400px;
              height: 400px;
              margin: 50px auto;
              background-color: ;
          }
          .left,.right{
              position: absolute;
              width: 200px;
              height: 200px;
              background: red;
              border-radius: 50%;
          }
          .left{
              left: 35px;
          }
          .right{
              right: 35px;
              z-index: -1;
          }
          .bottom{
              position: absolute;
              bottom: 135px;
              left: 100px;
              width: 200px;
              height: 200px;
              background: red;
              transform: rotate(45deg);
              z-index: -1;
          }
          .left,.right,.bottom{
              box-shadow: 0 0 40px red;
              animation: heart .8s ease infinite;
          }
          @keyframes heart {
              0%{
                  transform: rotate(225deg) scale(1);
                  box-shadow: 0 0 40px red;
              }
              50%{
                  transform: rotate(225deg) scale(1.2);
                  box-shadow: 0 0 70px red;
              }
              100%{
                  transform: rotate(225deg) scale(1);
                  box-shadow: 0 0 40px red;
              }
          }

HTML的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>会跳动的爱心</title>
       <link href="css.css">
    </head>
    <body>
        <div class="wrap">
            <div class="left"></div>
            <div class="right"></div>
            <div class="bottom"></div>
        </div>
    </body>
    </html>

Jerry cat

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一天一个小页面（1）

跳动的红心今天写跳动的红心1、思路首先要用css实现一个爱心的话，我是用一个正方形＋两个半圆画出来的。然后用CSS3动画的animation实现跳动效果。用CSS写的话效率高。2、界面今天写跳动的红心1、思路首先要用css实现一个爱心的话，我是用一个正方形＋两个半圆画出来的。然后用CSS3动画的animation实现跳动效果。用CSS写的话效率高。2、界面：...
复制链接

扫一扫