Taiji Figure
Border-radius In addition to the border fillet effect, the use of it in the picture diagram, in fact, can produce a lot of different ideas. I will continue to use it today to teach you painting-taiji figure.
View Original Code HTML
<body> <p class= "Taichi" > <p class= "white-circle" ></p> <p class= "Black-circle" ></p> </p></body>
Because there is a black and white circle in the Taiji figure, so put two more p in the block.
Then please look closely, I would like to first large chunks into a white and a black:
View Source Code CSS
. taichi { position:relative; width:48px; /* 50-2 */height:96px; /* 100-2-2 */background: #fff; border:2px solid #000; border-width:2px 50px 2px 2px; border-radius:50%; }The general box model is a wide high school with the width of the border calculated in the chunk, so we want to make a wide-height 100x100 chunk, but if the border width is 2px, then the inside part should be only 96px. In particular, the author will be the right side of the width of the border directly set to 50px, so the width of the inside of the block only need 48px to be able.
When this is set and the Border-radius fillet effect is added, it becomes
Hehe ~ already has a black and white chunks, and then to fill up a Bai first:
View Source Code CSS
. white-circle { position:absolute; top:0; left:50%; Background: #fff; border-radius:50%; width:48px; height:48px; }This way, a complete white circle is produced directly and placed in the middle of the upper part:
The black circle is placed in the lower half:
View Source Code CSS
. black-circle { position:absolute; top:50%; left:50%; Background: #000; border-radius:50%; width:48px; height:48px; }Looks like there's 90% of them.
In the end, there are two small dots in the opposite color in these two circles, the two small dots we use:: After the quasi-element (pseudo-elements) can be:
View Source Code CSS
. white-circle::after { content: ""; Position:absolute; top:17px; /* (50-16)/2 */left:17px; /* (50-16)/2 */background: #000; border-radius:50%; width:16px; height:16px; } . Black-circle::after { content: ""; Position:absolute; top:17px; /* (50-16)/2 */left:17px; /* (50-16)/2 */background: #fff; border-radius:50%; width:16px; height:16px; }Will ~ is not very magical!?
Love
The above teaches you to use Border-radius to draw the Taiji figure, the following is to teach you the same is the use of round corner effect to love.
We just need a block of p to do it:
<body> <p class= "Heart" ></p></body>
Then specify the width height of the chunk:
View Source Code CSS
. heart { position:relative; width:140px; height:115px; }The same is divided into two blocks of love, the same is used first:: Before elements (pseudo-elements) to produce the left side of the BLOCK:
View Source Code CSS
. heart::before { content: ""; Position:absolute; left:70px; top:0; width:70px; height:115px; background:red; border-radius:50px 50px 0 0; }Because only the rounded corners of the top left and right are set, it becomes a column with a rounded head:
The author then changes its center of rotation to rotate it 45 degrees to the left:
View Source Code CSS
. heart::before { content: ""; Position:absolute; left:70px; top:0; width:70px; height:115px; background:red; border-radius:50px 50px 0 0; -webkit-transform:rotate ( -45deg); -moz-transform:rotate ( -45deg); -o-transform:rotate ( -45deg); Transform:rotate ( -45deg); -webkit-transform-origin:left Bottombottom; -moz-transform-origin:left Bottombottom; -o-transform-origin:left Bottombottom; Transform-origin:left bottombottom; }Transform-origin can change the center point of the element. Like Background-position, it accepts two values, the first one is the set level, and the second one is set to vertical. The preset is centered on center Center, now I change it to the bottom left:
The right part is the same, but only the center of rotation changes to the right, and rotates to the right:
View Source Code CSS
. heart::after { content: ""; Position:absolute; top:0; left:0; width:70px; height:115px; background:red; border-radius:50px 50px 0 0; -webkit-transform:rotate (45deg); -moz-transform:rotate (45deg); -o-transform:rotate (45deg); Transform:rotate (45deg); -webkit-transform-origin:rightright Bottombottom; -moz-transform-origin:rightright Bottombottom; -o-transform-origin:rightright Bottombottom; Transform-origin:rightright bottombottom; }When both sides are finished, a red heart appears:
What ~ and Mr. Zhong said, "How can not move ... It doesn't matter, make up the animation animation effect to it:
View Source Code CSS
. heart {-webkit-animation:jump 1s infinite ease-out; -moz-animation:jump 1s infinite ease-out; -o-animation:jump 1s infinite ease-out; Animation:jump 1s infinite ease-out; } @-webkit-keyframes Jump {0, 60%, 75%, 90%, 100% {-webkit-transform:scale (1); } 15% {-webkit-transform:scale (0.6); } 30% {-webkit-transform:scale (1); } 45% {-webkit-transform:scale (0.7); }} @-moz-keyframes Jump {0, 60%, 75%, 90%, 100% {-moz-transform:scale (1); } 15% {-moz-transform:scale (0.6); } 30% {-moz-transform:scale (1); } 45% {-moz-transform:scale (0.7); }} @-o-keyframes Jump {0, 60%, 75%, 90%, 100% {-o-transform:scale (1); } 15% {-o-transform:scale (0.6); } 30% {-o-transform:scale (1); } 45% {-o-transform:scale (0.7); }} @keyframes Jump {0, 60%, 75%, 90%, 100% {transform:scale (1); } 15% {Transform:scale (0.6); } 30% {Transform:scale (1); } 45% {Transform:scale (0.7); } }
Change the size of the love through the transform scale (x, y) so that the whole animation looks like a pop-up jump:
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
