CSS关卡中心跳动画代码

CSS关卡中心跳动画代码
0
.back { position: fixed; padding: 0; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: white; animation-name: backdiv; animation-duration: 1s; animation-iteration-count:infinite; } .heart { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px; transform: rotate(-45deg); animation-name: beat; animation-duration: 1s; animation-iteration-count:infinite; } .heart:after { background-color: pink; content: ""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: 0px; left: 25px; } .heart:before { background-color: pink; content: ""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: -25px; left: 0px; } @keyframes backdiv { 50% { background: #ffe6f2; } } **@keyframes beat {** ** 0% {** ** transform: scale(1) rotate(-45deg);** ** }** ** 50% {** ** transform: scale(0.6) rotate(-45deg);** ** }** ** }**

以上代码@keyframes beat加粗部分中(-45deg)不太懂,有没有大神指点一下

这个心跳的动画就做两件事,第一,在开始阶段将心的图形变大, 第二,在中间过程将心跳的图形缩小。转成持续过程后就是一个变大,缩小的过程。
理解这个以后,由于心跳的图形就是通过伪属性after将矩形向左移动25px(矩形的一半),通过将边框变成50%的圆框(25px)形成心跳的一半,通过伪属性before将矩形向上移动25px(矩形的一半),通过将边距变成50%的圆框(25px)形成心跳的另一半。但是这个时候心的方向不对,偏了45度。所以需要将图形旋转-45度,形成一个正向的心。
最后,为什么在动画里面也要做这个偏转呢,那是因为动画的过程是通过修改转换函数来实现的,现在还没有一个语法告诉css我是添加一个转换函数,原来的转换函数还保留。目前只能做完全覆盖,所以动画里面要做缩放图形,还有旋转的动作。

2赞

虽然我在几天前已经懂了,但是你解释的真的很清楚了,基本把我所有疑问都解答了,你要是早出现几天就好了,我当时就不用费那么长时间去琢磨了,不管怎么说,还是万分感谢!

1赞