css3 实现心跳

举报
搞前端的半夏 发表于 2021/10/24 23:11:58 2021/10/24
【摘要】 原文链接源代码 效果预览 先实现一个正方形,然后旋转实现,实现心的下半部分//预设一个div<div class="heart"> </div>.heart { //这里模拟心跳的动画,后面会写 animation: beat 1s infinite; -webkit-animation: beat 1s infinite; //宽为200...

原文链接

源代码

效果预览

心跳

先实现一个正方形,然后旋转实现,实现心的下半部分

//预设一个div
<div class="heart">
    </div>
.heart {
		//这里模拟心跳的动画,后面会写
        animation: beat 1s infinite;
        -webkit-animation: beat 1s infinite;
        //宽为200px
        width: 200px;
        //高为200px
        height: 200px;
        //背景颜色
        background-color: #f00;
        // 添加阴影
		filter:drop-shadow(0px 0px 20px rgb(255,20,20));
		//选装45度制作心尖
        transform: rotate(45deg);
		// 往下往左各移动200px
        position: relative;
        top: 200px;
        left: 200px;
    }

正方形

在正方形上加圆,实现心

//使用::before和::after
   .heart::before,
    .heart::after {
    
        content: "";
        //与正方行为参照。必须写。具体的位置,分开写,见下。
        position: absolute;
        //宽和高都为200px;保证和正方型重叠的部分大小一致。
        width: 200px;
        height: 200px;
        //设置弧度为100px,实现圆
        border-radius: 100px;
        background-color: #f00;

    }
// 设置位置
    .heart:before {
        left: -100px;
    }
// 设置位置
    .heart::after {
        left: 0px;
        top: -100px;
    }

心

添加动画

@keyframes beat {
        0% {
        //注意这里一定要加上rotate(45deg),不加的话,会默认不旋转
            transform: rotate(45deg) scale(0.8, 0.8);
            // 设置透明度
            opacity: 1;
        }

        25% {
            transform: rotate(45deg) scale(1, 1);
            opacity: 0.8;
        }

        100% {
            transform: rotate(45deg) scale(0.8, 0.8);
            opacity: 1;
        }
    }
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。