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

This article mainly introduces how to use html and CSS to make love special effects, the article is very detailed, has a certain reference value, interested friends must read it!

HTML section:

Three div are used to represent the left circle, the right circle and the square.

CSS section:

Set it to a circle with border-radius:50%, rotate the square 45 degrees with transform:rotate (45deg), and combine it with the circle to form a heart.

.box {

Width:180px

Height:160px

Margin:100pxauto

Animation:size1sinfinite

Animation-direction:alternate

Transition:1sall

Border:1pxsolidblack

}

.round1 {

Width:100px

Height:100px

Border-radius:50%

Background-color:hotpink

Left:0

Top:0

Position:absolute

}

.round2 {

Width:100px

Height:100px

Border-radius:50%

Background-color:hotpink

Position:absolute

Right:0

Top:0

}

.bottom {

Width:100px

Height:100px

Background-color:hotpink

Position:absolute

Top:40px

Left:40px

Transform:rotate (45deg)

}

@ keyframessize {

0% {

Transform:scale (0.6)

}

100% {

Transform:scale (1)

}

}

The above is all the contents of the article "how to make Love Special effects with html and CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.