How to draw a beating heart with css
This article mainly introduces how to use css to draw a beating heart, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.
Code example:
Pure css draw your heart
Body {
Height:100%
Margin:0
}
.demo {
Width:1px
Height:1px
Margin:300pxauto
Position:relative
Animation:tiaodong.8slinearinfinite
}
.demo:: before,.demo::after {
Content:''
Position:absolute
Width:80px
Height:120px
Background-color:red
Border-radius:50px50px00
}
.demo:: after {
Left:28px
Transform:rotate (45deg)
}
.demo:: before {
Transform:rotate (- 45deg)
Box-shadow:-5px-5px10pxgrey
}
@ keyframestiaodong {
0% {
Transform:scale (1)
}
50% {
Transform:scale (1.05)
}
100% {
Transform:scale (1)
}
}
It is implemented with after and before pseudo elements, and cannot be displayed before IE10 without considering compatibility.
You can replace after and before with the span element.
Need to add:-ms-transform.
If you are painting with the span element, you need the block on the right to set the z-index attribute.
Thank you for reading this article carefully. I hope the article "how to draw a beating Heart with css" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
