Use Less CSS to define commonly used CSS3 performance Functions

Use Less CSS to define commonly used CSS3 performance Functions
Define the rounded corner and call/* define the rounded corner @ radius rounded corner size */. round (@ radius: 5px) {border-radius: @ radius;-webkit-border-radius: @ radius;-moz-border-radius: @ radius ;}. round7 {. round (7px );} define the box shadow and call/* box shadow @ right_left the right shadow is a negative number on the left @ bottom_top the bottom shadow is a negative number on the top @ box shadow size @ box_color shadow color */. boxshadow (@ right_left: 5px, @ bottom_top: 5px, @ box: 5px, @ box_color: # b6ebf7) {box-shadow: @ arguments;-moz-box-shadow: @ arguments;-webkit-box-shadow: @ arguments; }. Boxshadow7 {. boxshadow (7px, 7px, 7px, black);} defines text shadow and call/* Text shadow, you can specify multiple sets of shadows @ right_left1. The shadow on the right side is a negative number on the left. @ bottom_top1: the shadow on the right is a negative number on the top. @ text shadow size @ text_color shadow color */. textshadow (@ right_left1: 5px, @ bottom_top1: 5px, @ text: 5px, @ tetx_color: # b6ebf7) {text-shadow: @ arguments ;}. r_ B _textshadow {. textshadow ();} defines transparency and call/* transparency or gradient 1 is not transparent 0 transparent css3 rgba (110,142,185 ,. 4 )! Important; the first three are color values and the last one is transparent values for compatibility with all browsers */. rgba (@ rgba_a :. 4, @ rgb_ B: 40) {filter: alpha (opacity = @ rgb_ B);-ms-filter: "progid: DXImageTransform. microsoft. alpha (Opacity =@{ rgb_ B}) "; opacity: @ rgb_a ;}. rgba4 {. rgba ();} defines the column layout and call/* column layout @ c1 columns @ c2 column width @ c3 column spacing @ c4 border style */. column (@ c1: 3, @ c2: 310px, @ c3: 10px, @ c4: 1px solid # ccc) {column-count: @ c1; column-width: @ c2; column-gap: @ c3; column-rule: @ c4;-webkit-column-count: @ c1;-webki T-column-width: @ c2;-webkit-column-gap: @ c3;-webkit-column-rule: @ c4;-moz-column-count: @ c1; -moz-column-width: @ c2;-moz-column-gap: @ c3;-moz-column-rule: @ c4 ;}. my_column {. column (3, 50px, 3px, 1px solid # ccc);} defines the background gradient and calls the copy code/* Background gradient @ start gradient start color @ end color */. bg (@ start: #00 ffff, @ end: #9 fffff) {background:-webkit-gradient (linear, 0 0, 0 100%, from (@ start ), to (@ end); background:-moz-linear-gradient (top, @ start, @ End); filter: progid: DXImageTransform. microsoft. gradient (startColorstr = @ start, endColorstr = @ end, grandientType = 0 );}. my_bg {. bg (red, yellow);} the image defines the Internal Frame of the contour and calls/* The outline is the Internal Frame @ outline style @ outline1 spacing negative inside */. outline (@ outline: 1px solid #699, @ outline1:-10px) {outline: @ outline; outline-offset: @ outline1 ;}. my_outline {. outline ();} image definition rotation, diamond rotation, scaling, movement and calling/* Rotation Angle @ ro definition degree IE does not support Filter support 0, 1, 2, 3 */. rotate (@ ro: 30deg) {Transform: rotate (@ ro);-webkit-transform: rotate (@ ro);-moz-transform: rotate (@ ro);-o-transform: rotate (@ ro); filter: progid: DXImageTransform. microsoft. basicImage (rotation = 3 );}. rotate50 {. rotate (50deg);}/* diamond Rotation Angle @ x horizontal scaling ratio @ y vertical scaling ratio */. skew (@ roX: 30deg, @ roY: 30deg) {transform: skew (@ roX, @ roY);-webkit-transform: skew (@ roX, @ roY ); -moz-transform: skew (@ roX, @ roY);-o-transform: skew (@ roX, @ roY);-ms-tr Ansform: skew (@ roX, @ roY );}. skew30 {. skew (50deg);}/* zoom in/out @ x scale out @ y scale down */. scale (@ x: 1.2, @ y: 1.2) {transform: scale (@ x, @ y);-webkit-transform: scale (@ x, @ y ); -moz-transform: scale (@ x, @ y);-o-transform: scale (@ x, @ y);-ms-transform: scale (@ x, @ y );}. my_scale {. scale ();}/* moving distance @ x horizontal moving distance @ y vertical moving distance */. translate (@ x: 80px, @ y: 80px) {transform: translate (@ x, @ y);-webkit-transform: translate (@ x, @ y ); -moz-transfo Rm: translate (@ x, @ y);-o-transform: translate (@ x, @ y);-ms-transform: translate (@ x, @ y );}. translate80 {. translate ();}/* based on the above four changes, the effect is shown in the following excessive animation @ rotate @ scale @ skew @ translate */. transform (@ rotate: 360deg, @ scaleX: 1, @ scaleY: 1, @ skewX: 0deg, @ skewY: 0deg, @ translateX: 100px, @ translateY: 0px) {transform: rotate (@ rotate) scale (@ scaleX, @ scaleY) skew (@ skewX, @ skewY) translate (@ translateX, @ translateY);-webkit-transf Orm: rotate (@ rotate) scale (@ scaleX, @ scaleY) skew (@ skewX, @ skewY) translate (@ translateX, @ translateY);-moz-transform: rotate (@ rotate) scale (@ scaleX, @ scaleY) skew (@ skewX, @ skewY) translate (@ translateX, @ translateY);-o-transform: rotate (@ rotate) scale (@ scaleX, @ scaleY) skew (@ skewX, @ skewY) translate (@ translateX, @ translateY);-ms-transform: rotate (@ rotate) scale (@ scaleX, @ scaleY) skew (@ skewX, @ skewY) transl Ate (@ translateX, @ translateY); filter: progid: DXImageTransform. microsoft. basicImage (rotation = 3 );}. my_transform {. transform ();} defines the excessive animation and call/* the excessive animation id is the css attribute over 2 S. The over time 0 s is the start time when the upload-in enters */. tran (@ t: id 2 s transfer-in 0 s) {transition: @ t;-moz-transition: @ t;-o-transition: @ t; -webkit-transition: @ t ;}. my_tran {&: hover {. transform ();. tran (all 2 s Animation-in 0 s);} defines the Animation of Animation and calls the Animation of the function defined in the/* less file @ animatio N-name specifies the keyframe name to be bound to the selector @ animation-duration specifies the time taken to complete the animation, in seconds or milliseconds. The default value is 0. @ Animation-timing-function specifies the animation speed curve. The default value is "renew ". @ Animation-delay specifies the delay before the animation starts. The default value is 0. @ Animation-iteration-count specifies the number of times the animation should be played. The default value is 1. @ Animation-direction specifies whether to play the animation in turn. The default value is "normal ". */. Animation (@ animation-name, @ animation-duration, @ animation-timing-function, @ animation-delay, @ animation-iteration-count, @ animation-direction) {animation: @ arguments;/* Firefox: */-moz-animation: @ arguments;/* Safari and Chrome: */-webkit-animation: @ arguments;/* Opera: */-o-animation: @ arguments ;}. my_animation {. animation (mykeyframes, 5S, linear, 2 s, infinite, normal);}/*** CSS defines the keyframes as follows: *****/@ keyframes mykeyframes {0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px ;}} @-moz-keyframes mykeyframes/* Firefox */{0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px; }}@-webkit-keyframes mykeyframes/* Safari and Chrome */{0% {background: red; left: 0px; top: 0px ;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px; }}@-o-keyframes mykeyframes/* Opera */{0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px ;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px ;}}