How to use html and CSS to make love special effects
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!
