search

Home  >  Article  >  Web Front-end  >  How to draw a beating heart using pure CSS? (code example)

How to draw a beating heart using pure CSS? (code example)

青灯夜游
青灯夜游Original
2018-09-13 16:42:512579browse

This chapter shows you how to draw a beating heart using pure CSS? (Code example) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Let me show you the renderings first:

How to draw a beating heart using pure CSS? (code example)

Principle of implementation:

1. This heart can be divided into two parts, two Rectangle;

How to draw a beating heart using pure CSS? (code example)

Set border-radius respectively;

How to draw a beating heart using pure CSS? (code example)

After the two graphics overlap, set transform: rotate respectively (), the set rotate() value should be opposite, one positive value and one negative value;

How to draw a beating heart using pure CSS? (code example)

When setting the left value of one of them, it becomes

How to draw a beating heart using pure CSS? (code example)

In order to look three-dimensional, you can set the box-shadow shadow on the left;

Then cooperate with @keyframes and transform attributes to achieve a jumping effect.

Code example: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>纯css画一下心</title>
		<style>
			body{
                height: 100%;
                margin: 0;
            }
            .demo{
                width: 1px;
                height: 1px;
                margin: 300px auto;
                position: relative;
                animation: tiaodong .8s linear infinite;
            }
            .demo::before,.demo::after{
                content: &#39;&#39;;
                position: absolute;
                width: 80px;
                height: 120px;
                background-color: red;
                border-radius: 50px 50px 0 0;
            }
           .demo::after{
                left: 28px;
                transform: rotate(45deg);
            }
             .demo::before{
                transform: rotate(-45deg);
                box-shadow: -5px -5px 10px grey;
            }
            @keyframes tiaodong{
                0%{
                    transform: scale(1);
                }
                50%{
                    transform: scale(1.05);
                }
                100%{
                    transform: scale(1);
                }
            }
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

is implemented using after and before pseudo-elements, without considering compatibility, and will not be displayed before IE 10.

Can be solved by replacing after and before with span elements.

Need to add: -ms-transform.

If you use span elements to draw, you need to set the z-index attribute on the right block.

The above is the detailed content of How to draw a beating heart using pure CSS? (code example). For more information, please follow other related articles on the PHP Chinese website!

css border 伪元素 transform
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use word-break:break-all to force a new line?Next article：How to use word-break:break-all to force a new line?

Related articles

See more