Css实现心跳

最新推荐文章于 2024-05-10 13:05:51 发布

*杰

最新推荐文章于 2024-05-10 13:05:51 发布

阅读量615

点赞数 2

分类专栏：专题

本文链接：https://blog.csdn.net/qq_42483491/article/details/89000676

版权

专题专栏收录该内容

29 篇文章 0 订阅

订阅专栏

//样式

<style>
        body {
            background: #fff;
        }
        .heart,.test { 
            margin: 100px auto; /* 内容居中 */ 
            width: 200px; /* 定义宽高 */
            height: 200px;
            /* border: 1px solid #0094ff; */
            /* 定位 */
            position: relative;
            /* 调用动画 */
            animation:shake .5s infinite;
        }
        .heart div,.test div {
            width: 100%;
            height: 100%;
            /* 位置操作 */
            position: absolute;
            /* 背景颜色 */
            background: #900;
            /* 调用动画 */
            animation:shadow .5s infinite;
        } 
       /* <!-- 旋转正方形 --> */
        .topLeft {
            transform: translate(-50px, 0) rotate(-45deg);
        }

        .topRight {
            transform: translate(50px, 0) rotate(45deg);
        }
        .bottom {
            transform: translate(0, 64px) rotate(45deg) scale(.9, .9);
        }
        .topLeft, .topRight {
             /*定义心形圆角*/ 
            border-radius: 100px 100px 0px 0px;
        }
        @@keyframes shake {
            0% {
                transform: scale(.9, .9);
            }
           100% {
                transform: scale(1.1, 1.1);
            }
        }
        @@keyframes shadow {
            0% {
                box-shadow: 0px 0px 0px #900;
            }
           100% {
                box-shadow: 0px 0px 50px #900;
            }
        } 
</style>
/*爱心盒子*/
<body><div class="heart">
        <!-- 左侧心形  -->
        <div class='topLeft'></div>
        <!-- 右侧心形 -->
        <div class='topRight'></div>
        <!-- 心底部 -->
        <div class='bottom'></div>
    </div>
</body>

需要注意的是 “@@keyframes” 在DW上是一个 @ 在VS上是两个 @@
以上效果图如下（会跳动的）：
在这里插入图片描述

*杰

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css实现心跳

//样式<style> body { background: #fff; } .heart,.test { margin: 100px auto; /* 内容居中 */ width: 200px; /* 定义宽高 */ height: 2...
复制链接

扫一扫