animate旋转动画练习，css3形变练习
<!DOCTYPE html> <!-- saved from url=(0048)http://yinjiazeng.github.io/test/dial/index.html --> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="renderer" content="webkit"> <meta name="keywords" content=""> <meta name="description" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--<base href="" target="_self">--><base href="." target="_self"> <title></title> <style type="text/css"> /* layer */ .ui-layer { overflow:visible !important; position:absolute; display:none; padding:5px; background-color:#BFBFBF;} .ui-layer-box { position:relative; background-color:#fff; _zoom:1;} .ui-layer-body { *zoom:1;} .ui-layer-title { padding-left:10px; height:32px; line-height:32px; font-size:14px; color:#fff; font-weight:bold; background-color:#E81F18;} .ui-layer-button { display:inline-block; overflow:hidden; border-width:1px; border-style:solid; cursor:pointer;} .ui-layer-close { position:absolute; top:6px; right:10px; width:20px; height:20px; line-height:20px; border-color:#D60F08; border-radius:100%; text-align:center; font-size:20px; color:#E81F18; background-color:#E3A9A7;} .ui-layer-main:before, .ui-layer-main:after { content:''; display:table;} .ui-layer-main:after { clear:both;} .ui-layer-main { *zoom:1;} .ui-layer-tips { padding:0; border:1px solid #E82018;} .ui-layer-tips, .ui-layer-tips .ui-layer-body { background-color:#FFEBEB;} .ui-layer-tips .ui-layer-body, .ui-layer-tips .ui-layer-main { _display:inline;} .ui-layer-tips .ui-layer-box, .ui-layer-tips .ui-layer-main { _zoom:0;} .ui-layer-tips .ui-layer-main { color:#E82018;} .ui-layer-arrow, .ui-layer-arrow b, .ui-layer-arrow i { position:absolute;} .ui-layer-arrow b, .ui-layer-arrow i { overflow:hidden; line-height:0; font-size:0; border:6px dashed transparent;} .ui-layer-arrow-top { top:-12px; left:10px;} .ui-layer-arrow-top b, .ui-layer-arrow-top i { border-bottom-style:solid;} .ui-layer-arrow-top b { border-bottom-color:#E82018; top:0; left:0;} .ui-layer-arrow-top i { border-bottom-color:#FFEBEB; top:1px; left:0;} .ui-layer-arrow-right { right:-12px; top:10px;} .ui-layer-arrow-right b, .ui-layer-arrow-right i { border-left-style:solid;} .ui-layer-arrow-right b { border-left-color:#E82018; right:0; top:0;} .ui-layer-arrow-right i { border-left-color:#FFEBEB; right:1px; top:0;} .ui-layer-arrow-bottom { bottom:-12px; left:10px;} .ui-layer-arrow-bottom b, .ui-layer-arrow-bottom i { border-top-style:solid;} .ui-layer-arrow-bottom b { border-top-color:#E82018; bottom:0; left:0;} .ui-layer-arrow-bottom i { border-top-color:#FFEBEB; bottom:1px; left:0;} .ui-layer-arrow-left { left:-12px; top:10px;} .ui-layer-arrow-left b, .ui-layer-arrow-left i { border-right-style:solid;} .ui-layer-arrow-left b { border-right-color:#E82018; left:0; top:0;} .ui-layer-arrow-left i { border-right-color:#FFEBEB; left:1px; top:0;} .ui-layer-foot { padding:10px; text-align:right;} .ui-layer-foot .ui-layer-button { margin-left:10px; padding:0 10px; height:25px; text-align:center; line-height:25px;} .ui-layer-confirm { border-color:#D60F08; color:#fff; background-color:#E81F18;} .ui-layer-cancel { border-color:#CBCBCB; color:#333; background-color:#EAEBEF;} .ui-layer-mask { display:none; position:fixed; top:0; left:0; z-index:10000; width:100%; height:100%;} .ui-layer-mask div { position:relative; width:100%; height:100%; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000); background:rgba(0,0,0,.3); background:transparent\;} .ui-layer-movemask { position:absolute; cursor:move; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); background:rgba(0,0,0,0.5); background:transparent\;} .t-layer-white { padding:0 10px; border:1px solid #A1C4EE; box-shadow:0 0 4px #DADBDD; background-color:#fff;} .t-layer-white .ui-layer-title { padding:0; height:40px; line-height:40px; border-bottom:1px solid #D8E6F3; color:#333; font-weight:normal; background-color:#fff;} .t-layer-white .ui-layer-close { top:4px; right:0; width:30px; height:30px; line-height:30px; border:0; font-size:25px; font-weight:normal; color:#A1C4EE; background:none;} .t-layer-white .ui-layer-confirm { background-color:#D8E6F3; border-color:#A1C4EE; color:#333;} .t-movemask-white { border:1px dashed #A1C4EE; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff,endColorstr=#7fffffff); background:rgba(255,255,255,0.5); background:transparent\;} .t-mask-white div { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff); background:rgba(255,255,255,.3); background:transparent\;} .ui-lottery li { position:absolute;z-index:0;} .ui-lottery-btn { z-index:1; position:absolute; cursor:pointer;} .ui-lottery-btn.s-dis { cursor:default;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, keygen, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, textarea, select, button { margin:0; padding:0; border:none; outline:0; font-size:100%; font:inherit; vertical-align:baseline;} html, body { -webkit-touch-callout:none; -webkit-text-size-adjust:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-select:none; background-color:#fff;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;} header, section, footer { position:relative;} ol, ul { list-style:none;} blockquote, q { quotes:none;} blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;} textarea, input, button, select { border:0; border-radius:0; margin:0; padding:0; font-size:1em; -webkit-appearance:none; background-color:rgba(0,0,0,0);} input[type=radio] { -webkit-appearance:radio; border-radius:100%;} input[type=checkbox] { -webkit-appearance:checkbox; border-radius:3px;} textarea { overflow:auto; resize:none;} a, span { display:inline-block;} del { text-decoration:line-through;} ins, u, s, a, a:visited { text-decoration:none;} a, a:visited { color:#666; -webkit-tap-highlight-color:rgba(0,0,0,0);} a:active, a:hover { outline:0;} em, i, cite, var, address, dfn { font-style:normal;} h1, h2, h3, h4, h5, h6, strong, b { font-weight:normal;} table { border-collapse:collapse; border-spacing:0;} caption, th { text-align:left; font-weight:normal;} td, th { padding:0;} body, keygen, legend { font:14px/1.0 \5fae\8f6f\96c5\9ed1,helvetica,sans-serif; color:#666;} /* func */ .f-dn { display:none;} .f-db { display:block;} .f-di { display:inline;} .f-fl { float:left;} .f-fr { float:right;} .f-fn { float:none;} .f-pr { position:relative;} .f-pa { position:absolute;} .f-ps { position:static;} .f-pf { position:fixed;} .f-oh { overflow:hidden;} .f-fs12 { font-size:12px;} .f-fs14 { font-size:14px;} .f-fwb { font-weight:bold;} .f-tal { text-align:left;} .f-tac { text-align:center;} .f-tar { text-align:right;} .f-vam { vertical-align:middle;} .f-vat { vertical-align:top;} .f-wsn { word-wrap:normal; white-space:nowrap;} .f-ti { overflow:hidden; text-indent:-999em;} .f-ti2 { text-indent:2em;} .f-toe { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .f-clear { overflow:hidden; display:block; clear:both; height:0;} .f-clearfix:before, .f-clearfix:after { content:''; display:table;} .f-clearfix:after { clear:both;} .f-yahei { font-family:\5fae\8f6f\96c5\9ed1;} .f-song { font-family:\5b8b\4f53;} .f-at:active { -webkit-tap-highlight-color:rgba(240,240,240,.3);} .f-df { display:-webkit-box; display:box; display:-webkit-flex; display:flex;} .f-f1 { -webkit-box-flex:1; box-flex:1; -webkit-flex:1; flex:1;} .f-f2 { -webkit-box-flex:2; box-flex:2; -webkit-flex:2; flex:2;} .f-f3 { -webkit-box-flex:3; box-flex:3; -webkit-flex:3; flex:3;} .f-fdr { -webkit-box-orient:horizontal; box-orient:horizontal; -webkit-box-direction:normal; box-direction:normal; -webkit-flex-direction:row; flex-direction:row;} .f-fdc { -webkit-box-orient:vertical; box-orient:vertical; -webkit-box-direction:normal; box-direction:normal; -webkit-flex-direction:column; flex-direction:column;} .f-fwn { -webkit-box-lines:single; box-lines:single; -webkit-flex-wrap:nowrap; flex-wrap:nowrap;} .f-fww { -webkit-box-lines:multiple; box-lines:multiple; -webkit-flex-wrap:wrap; flex-wrap:wrap;} .f-jcs { -webkit-box-pack:start; box-pack:start; -webkit-justify-content:flex-start; justify-content:flex-start;} .f-jce { -webkit-box-pack:end; box-pack:end; -webkit-justify-content:flex-end; justify-content:flex-end;} .f-jcc { -webkit-box-pack:center; box-pack:center; -webkit-justify-content:center; justify-content:center;} .f-jcsb { -webkit-box-pack:justify; box-pack:justify; -webkit-justify-content:space-between; justify-content:space-between;} .f-ais { -webkit-box-align:start; box-align:start; -webkit-box-pack:start; box-pack:start;} .f-aie { -webkit-box-align:end; box-align:end; -webkit-align-items:flex-end; align-items:flex-end;} .f-aic { -webkit-box-align:center; box-align:center; -webkit-align-items:center; align-items:center;} .f-aib { -webkit-box-align:baseline; box-align:baseline; -webkit-align-items:baseline; align-items:baseline;} .f-ais { -webkit-box-align:stretch; box-align:stretch; -webkit-align-items:stretch; align-items:stretch;} .f-acfs { -webkit-align-content:flex-start; align-content:flex-start;} .f-acfe { -webkit-align-content:flex-end; align-content:flex-end;} .f-acc { -webkit-align-content:center; align-content:center;} .f-acsb { -webkit-align-content:space-between; align-content:space-between;} .f-acsa { -webkit-align-content:space-around; align-content:space-around;} .f-acs { -webkit-align-content:stretch; align-content:stretch;} /* edge */ .e-mt0 { margin-top:0px;} .e-mt5 { margin-top:5px;} .e-mt10 { margin-top:10px;} .e-mt15 { margin-top:15px;} .e-mt20 { margin-top:20px;} .e-mr0 { margin-right:0px;} .e-mr-3 { margin-right:-3px;} .e-mr5 { margin-right:5px;} .e-mr10 { margin-right:10px;} .e-mr15 { margin-right:15px;} .e-mr20 { margin-right:20px;} .e-mb0 { margin-bottom:0px;} .e-mb5 { margin-bottom:5px;} .e-mb10 { margin-bottom:10px;} .e-mb15 { margin-bottom:15px;} .e-mb20 { margin-bottom:20px;} .e-ml0 { margin-left:0px;} .e-ml-3 { margin-left:-3px;} .e-ml5 { margin-left:5px;} .e-ml10 { margin-left:10px;} .e-ml15 { margin-left:15px;} .e-ml20 { margin-left:20px;} .e-ml30 { margin-left:30px;} .e-pt0 { padding-top:0px;} .e-pt10 { padding-top:10px;} .e-pt15 { padding-top:15px;} .e-pt20 { padding-top:20px;} .e-pr0 { padding-right:0px;} .e-pr10 { padding-right:10px;} .e-pr15 { padding-right:15px;} .e-pr20 { padding-right:20px;} .e-pb0 { padding-bottom:0px;} .e-pb10 { padding-bottom:10px;} .e-pb15 { padding-bottom:15px;} .e-pb20 { padding-bottom:20px;} .e-pl0 { padding-left:0px;} .e-pl10 { padding-left:10px;} .e-pl15 { padding-left:15px;} .e-pl20 { padding-left:20px;} /* ui */ .ui-tine { display:inline-block; line-height:0; font-size:0; border:6px dashed transparent;} .ui-animate { -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both;} .ui-trans { -webkit-transition:all .3s ease-in; transition:all .3s ease-in;} .ui-icon { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; text-stroke-width: 0.2px;} .m-dialbox { margin:60px auto 0; width:268px; height:268px; padding:13px; border-radius:100%; background-color:#F7D101; border:3px solid #A7771E; overflow:hidden;} .m-dial { height:258px; border:5px solid #C96E02; border-radius:100%; background-color:#C96E02; overflow:hidden; -webkit-transform:rotate(0deg); transform:rotate(0deg);} .ui-lottery {width:258px;height:258px;position:relative;border-radius:50%;overflow:hidden;-webkit-transform:translateZ(0deg);-webkit-mask-image:-webkit-radial-gradient(circle, black, black);} .ui-lottery li { top:-12px; left:-12px; width:142px; height:142px; -webkit-transform-origin:100% 100%; transform-origin:100% 100%;} .ui-lottery li:nth-child(1) { background-color:#11AACC; -webkit-transform:rotate(45deg) skew(45deg); transform:rotate(45deg) skew(45deg);} .ui-lottery li:nth-child(2) { background-color:#64B044; -webkit-transform:rotate(90deg) skew(45deg); transform:rotate(90deg) skew(45deg);} .ui-lottery li:nth-child(3) { background-color:#F7971E; -webkit-transform:rotate(135deg) skew(45deg); transform:rotate(135deg) skew(45deg);} .ui-lottery li:nth-child(4) { background-color:#DC4437; -webkit-transform:rotate(180deg) skew(45deg); transform:rotate(180deg) skew(45deg);} .ui-lottery li:nth-child(5) { background-color:#11AACC; -webkit-transform:rotate(225deg) skew(45deg); transform:rotate(225deg) skew(45deg);} .ui-lottery li:nth-child(6) { background-color:#64B044; -webkit-transform:rotate(270deg) skew(45deg); transform:rotate(270deg) skew(45deg);} .ui-lottery li:nth-child(7) { background-color:#F7971E; -webkit-transform:rotate(315deg) skew(45deg); transform:rotate(315deg) skew(45deg);} .ui-lottery li:nth-child(8) { background-color:#DC4437; -webkit-transform:rotate(360deg) skew(45deg); transform:rotate(360deg) skew(45deg);} .ui-lottery li i { position:absolute; top:0; left:0; display:none; width:100%; height:100%; background-color:rgba(255,255,255,.7);} .ui-lottery li.s-crt i { display:inline;} .m-dial img { position:absolute;} .m-dial .u-img1 { left:70px; top:18px;} .m-dial .u-img2 { left:136px; top:20px;} .m-dial .u-img3 { left:186px; top:77px;} .m-dial .u-img4 { left:196px; top:133px;} .m-dial .u-img5 { left:135px; top:190px;} .m-dial .u-img6 { left:72px; top:191px;} .m-dial .u-img7 { left:18px; top:136px;} .m-dial .u-img8 { left:20px; top:58px;} .ui-lottery-btn { top:50%; left:50%; margin:-46px 0 0 -46px; width:84px; height:84px; border:8px solid rgba(255,148,6,.6); border-radius:100%;} .ui-lottery-btn:after { content:''; position:absolute; top:0px; left:0px; width:100%; height:100%; background:#FF9406 url(./images/btn.png) no-repeat center; background-size:74px; border-radius:100%;} .ui-lottery-btn.s-dis:after { background-image:url(./images/btn-dis.png);} @-webkit-keyframes rotate1 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(45deg) skew(45deg); transform:rotate(45deg) skew(45deg);} } @keyframes rotate1 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(45deg) skew(45deg); transform:rotate(45deg) skew(45deg);} } .ui-animate-rotate1 { -webkit-animation-name:rotate1; animation-name:rotate1;} @-webkit-keyframes rotate2 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(90deg) skew(45deg); transform:rotate(90deg) skew(45deg);} } @keyframes rotate2 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(90deg) skew(45deg); transform:rotate(90deg) skew(45deg);} } .ui-animate-rotate2 { -webkit-animation-name:rotate2; animation-name:rotate2;} @-webkit-keyframes rotate3 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(135deg) skew(45deg); transform:rotate(135deg) skew(45deg);} } @keyframes rotate3 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(135deg) skew(45deg); transform:rotate(135deg) skew(45deg);} } .ui-animate-rotate3 { -webkit-animation-name:rotate3; animation-name:rotate3;} @-webkit-keyframes rotate4 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(180deg) skew(45deg); transform:rotate(180deg) skew(45deg);} } @keyframes rotate4 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(180deg) skew(45deg); transform:rotate(180deg) skew(45deg);} } .ui-animate-rotate4 { -webkit-animation-name:rotate4; animation-name:rotate4;} @-webkit-keyframes rotate5 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(225deg) skew(45deg); transform:rotate(225deg) skew(45deg);} } @keyframes rotate5 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(225deg) skew(45deg); transform:rotate(225deg) skew(45deg);} } .ui-animate-rotate5 { -webkit-animation-name:rotate5; animation-name:rotate5;} @-webkit-keyframes rotate6 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(270deg) skew(45deg); transform:rotate(270deg) skew(45deg);} } @keyframes rotate6 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(270deg) skew(45deg); transform:rotate(270deg) skew(45deg);} } .ui-animate-rotate6 { -webkit-animation-name:rotate6; animation-name:rotate6;} @-webkit-keyframes rotate7 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(315deg) skew(45deg); transform:rotate(315deg) skew(45deg);} } @keyframes rotate7 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(315deg) skew(45deg); transform:rotate(315deg) skew(45deg);} } .ui-animate-rotate7 { -webkit-animation-name:rotate7; animation-name:rotate7;} @-webkit-keyframes rotate8 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(360deg) skew(45deg); transform:rotate(360deg) skew(45deg);} } @keyframes rotate8 { 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);} 100% { -webkit-transform:rotate(360deg) skew(45deg); transform:rotate(360deg) skew(45deg);} } .ui-animate-rotate8 { -webkit-animation-name:rotate8; animation-name:rotate8;} @-webkit-keyframes fadein { 0% { opacity:0;} 100% { opacity:1;} } @keyframes fadein { 0% { opacity:0;} 100% { opacity:1;} } .ui-animate-fadein { -webkit-animation-name:fadein; animation-name:fadein; -webkit-animation-delay:1s; animation-delay:1s;} </style> </head> <body class="g-box"> <!-- <div class="m-dialbox"> <div class="m-dial" > --> <ul class="ui-lottery" lottery="rotate"> <li class="ui-animate ui-animate-rotate1 s-crt"><i></i></li> <li class="ui-animate ui-animate-rotate2"><i></i></li> <li class="ui-animate ui-animate-rotate3"><i></i></li> <li class="ui-animate ui-animate-rotate4"><i></i></li> <li class="ui-animate ui-animate-rotate5"><i></i></li> <li class="ui-animate ui-animate-rotate6"><i></i></li> <li class="ui-animate ui-animate-rotate7"><i></i></li> <li class="ui-animate ui-animate-rotate8"><i></i></li> </ul> <!-- </div> </div> --> </body></html>
