zoukankan      html  css  js  c++  java
  • 心跳(纯代码制作心形,animation动画)

    思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下:

    <body>
        <div></div>
    </body>
           div{
                margin: 200px;
                width: 200px;/* 盒子1宽高是2:3 */
                height: 300px;
                background:  rgb(218, 9, 9);
                position: relative;
                border-radius: 100px 100px 0 0;/* 左上,右上变圆角 */
                transform: rotate(-45deg);/* 逆时针旋转45deg放正 */
                animation: heartbeat 1s ease 0s infinite normal;/* 调用heart动画 */
            }
            div::after{
                content: "";
                display: block;
                width: 300px;
                height: 200px;
                background: rgb(218, 9, 9);
                position: absolute;
                bottom: 0;
                left: 0;/* 添加一个盒子,宽高是3:2,然后定位在下面,颜色一样, */
                border-radius: 0 100px 100px 0 ;/* 右上,右下变圆角 */
            }
            @keyframes heartbeat {
                /* 声明一个名称为heart的动画 */
                0%{
                    transform: scale(1)  rotate(-45deg);/* 注意,前面使用了旋转,这里必须写上,不然会重叠效果 */
                }
                50%{
                    transform: scale(1.2)  rotate(-45deg);
                }
                100%{
                    transform: scale(1)  rotate(-45deg);
                }
            }

    当然也有其他的方法制作心形,比如:两个圆 + 正方形,可以看另外一篇园友的文章:心跳 CSS 

  • 相关阅读:
    zuul prefix
    zuul忽略表达式
    zuul 自定义路由映射规则
    ribbon重试机制
    feign容断忽略某些异常
    cloud turbine
    hystrix 给方法加断路器
    go语言常用函数:cap
    windows 安装 go语言
    mysql win源码比较大 不需要的文件删除 记录下来
  • 原文地址:https://www.cnblogs.com/EricZLin/p/8873646.html
Copyright © 2011-2022 走看看