Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.