博客

css 实现心跳

  • Post author:
  • Post category:其他



源代码

效果预览

心跳

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

“` //预设一个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;
    }
}

“`

完结撒花

@#