CSS 3 The two-dimensional three-dimensional and gradual process of simple summary and effect (dynamic map is not good to Send)

<span id="Label3"></p>I. Not moving, changes in the region (nature produces a picture)<p><p>/* Gradient</p></p>1 Rectangle Gradient First defines the width and height of the rectangle (good to see the best border)/* direction color position */use<span style="color: #5a53ff;"><span style="color: #5a53ff;">background-image:-webkit-linear-gradient (right top,red 50%, Blue 50%)</span></span>;<span style="color: #f9f9f5; font-family: Consolas; font-size: large;"><span style="color: #f9f9f5; font-family: Consolas; font-size: large;">      </span></span><span style="color: #361f35; font-family: Consolas;"><span style="color: #361f35; font-family: Consolas;">2 Big Circle small round discoloration first make a</span> big circle</span><span style="color: #361f35; font-family: Consolas;"><span style="color: #361f35; font-family: Consolas;"> </span></span><span style="color: #361f35; font-family: Consolas;">/ <span style="color: #361f35; font-family: Consolas;">* Change Center from inside to outside fill color *</span> /</span><span style="color: #9c6298;"><span style="color: #9c6298;">background-image:-webkit-radial-gradient (50% 50%,yellow 20%, red 50% <span style="font-family: Consolas;"> </span></span></span>,<span style="color: #9c5a5b;"><span style="color: #9c5a5b;">Pink 55%, Blue 100%</span></span>); /* You can also have a circle gradient in the rectangle */<span style="color: #9c6298; font-family: Consolas;"><span style="color: #9c6298; font-family: Consolas;">3 Reflections</span></span><p><p><span style="color: #2c9715;"><span class="Apple-tab-span">. testb{</span></span></p></p><p><p><span style="color: #2c9715;"><span class="Apple-tab-span">Background-image:url (img/5.jpg);</span></span></p></p><p><p><span style="color: #2c9715;"><span class="Apple-tab-span">height:200px;</span></span></p></p><p><p><span style="color: #2c9715;"><span class="Apple-tab-span">/* Direction spacing Gradient */</span></span></p></p><p><p><span style="color: #2c9715;"><span class="Apple-tab-span">/* Upper above down below*/</span></span></p></p><p><p><span style="color: #2c9715;"><span class="Apple-tab-span">/*1 reflection does not occupy the spatial hierarchy of document flow higher than the document flow</span></span></p></p><p><p><span style="color: #2c9715;"><span class="Apple-tab-span">2 The reflection is for the label (wide Height) */</span></span></p></p><p><p><span style="color: #2c9715;">-webkit-box-reflect:above 20px-webkit-linear-gradient (top,rgba (0,0,0,0) 0%, rgba (0,0,0,0.5) 100%);</span></p></p><p><p><span style="color: #2c9715;"><span class="Apple-tab-span">}</span></span></p></p><p><p><span style="color: #2c9715;">4 The border is wide and 4 border color is not the same, in the corner of the encounter will form a different color triangle, (content is 0</span> to make a circle can be made to eat peas,)</p></p><p><p></p></p><p><p>5 <span style="color: #c73026;">border-radius:50px 0 50px 50px; for fillet</span> fillet</p></p><p><p><span style="color: #c73026;">The Making of Ellipse</span></p></p><p><p><span style="color: #48c144;">. textg{</span></p></p><p><p><span style="color: #48c144;"><span class="Apple-tab-span">width:200px;</span></span></p></p><p><p><span style="color: #48c144;"><span class="Apple-tab-span">height:100px;</span></span></p></p><p><p><span style="color: #48c144;"><span class="Apple-tab-span">border-radius:100px 100px 100px 100px/50px 50px 50px 50px;</span></span></p></p><p><p></p></p><p><p></p></p><p><p><span style="color: #48c144;"><span class="Apple-tab-span">}</span></span></p></p><p><p><span style="color: #48c144;">Two. movement within a two-dimensional plane</span></p></p><p><p><span style="color: #48c144;">. test{ </span> <span style="color: #041604;">transform:rotate (0deg) translate (0px,0px) scale (1);(rotate pan zoom)</span></p></p><p><p><span style="color: #041604;">transition:all 3s</span> <span style="color: #ba393f;">ease. 5s; (change process)</span> <span style="color: #ba393f;"> </span>}</p></p><p><p><span style="color: #4748b8;">. test:hover{transform:rotate (720deg) Translate (500px,300px) scale (2);}</span></p></p><p><p><span style="color: #4748b8;"></span></p></p><p><p><span style="color: #4748b8;">Three effects can also be used separately, and different sequencing effects are different</span></p></p><p><p><span style="color: #4748b8;"></span></p></p><p><p><span style="color: #4748b8;">Three. animation effect in three-dimensional space</span></p></p><p><p><span style="color: #4748b8;">body{perspective:1000px;} /* add a perspective to Body */</span></p></p><p><p><span style="color: #4748b8;"> </span> <span style="color: #ba3a30;">. Parent tag {transform-style:preserve-3d;} /* Open 3D effect in its parent tab *</span> /</p></p><p><p><span style="color: #ba3a30;"></span></p></p><p><p><span style="color: #ba3a30;"> </span> <span style="color: #48c144;">. test{ </span> <span style="color: #041604;">transform:rotate (0deg) translate (0px,0px) scale (1);(rotation pan zoom) (before the Initial value, can not add, with default Value)</span></p></p><p><p><span style="color: #041604;">transition:all 3s</span> <span style="color: #ba393f;">ease. 5s; (change process must have)</span> <span style="color: #ba393f;"> </span>}</p></p><p><p><span style="color: #4748b8;">. test:hover{transform:rotate (720deg) Translate (500px,300px) scale (2);} (post-change Position)</span></p></p><p><p><span style="color: #4748b8;">/* you can set the Z-axis effect under the 3D effect */</span></p></p><p><p><span style="color: #4748b8;"></span></p></p><p><p><span style="color: #4748b8;">Four. Frame Animation</span></p></p><p><p><span style="color: #4748b8;">@keyframes Animation name (pickup) {</span></p></p><p><p><span style="color: #4748b8;"><span style="font-family: Consolas;">0% (from) {transform: ...}</span></span></p></p><p><p><span style="color: #4748b8;"><span style="font-family: Consolas;">                ?%      </span></span> {transform: ...}</p></p><p><p><span style="color: #4748b8;"><span style="font-family: Consolas;">                ?%      </span></span> {transform: ...}</p></p><p><p>100% (to) {transform: ...}</p></p><p><p><span style="color: #4748b8;"></span></p></p><p><p><span style="color: #4748b8;"></span></p></p><p><p><span style="color: #4748b8;">}</span></p></p><p><p><span style="color: #4748b8;"></span> <span style="color: #ba3c36;"> <span class="Apple-tab-span">. test:hover{</span></span></p></p><p><p></p></p><p><p><span style="color: #ba3c36;"><span class="Apple-tab-span">/* animation effects are assigned the same way as transition */</span></span></p></p><p><p>Animation:movet 1s ease;</p></p><p><p><span style="color: #ba3c36;"><span class="Apple-tab-span">/* the number of words that the animation executes is infinite loop infinite */</span></span></p></p><p><p><span style="color: #ba3c36;"><span class="Apple-tab-span">animation-iteration-count:infinite;</span></span></p></p><p><p><span class="Apple-tab-span">}</span></p></p><p><p></p></p><p><p></p></p><p><p>CSS 3 The two-dimensional three-dimensional and gradual process of simple summary and effect (dynamic map is not good to Send)</p></p></span>