-------------------------------------
Today is Tanabata festival, as a single dog
of bloggers, today to bring you a
Love effect, I hope everyone early
Take off a single (manual funny)
-------------------------------------
As shown in the effect, paste the following
Code:
-------------------------------------
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Demo</title>6 <styletype= "Text/css">7 *{8 margin:0;9 padding:0;Ten } One . Love{ A position:relative; - Top:100px; - Left:300px; the } - . Love:before,.love:after{ - content: ""; - width:70px; + Height:115px; - position:Absolute; + background:Red; A Left:70px; at Top:0; - Border-radius:50px 50px 0 0; - -webkit-transform:Rotate ( -45deg); - -webkit-transform-origin:0 100%; - } - . Love:after{ in Left:0; - -webkit-transform:Rotate (45deg); to -webkit-transform-origin:100% 100%; + } - </style> the </Head> * <Body> $ <Divclass= "Love"></Div>Panax Notoginseng </Body> - </HTML>
-------------------------------------
Let us analyze the following to achieve
The principle of:
1. First draw two overlapping
2. Clockwise and counterclockwise respectively
Rotation 45 degree angle:
-------------------------------------
In this way, we have finished the love
Drawn, thank you for reading
Read
CSS to achieve love effect