Pure CSS3 Big Carousel Draw (responsive, configurable)

From the early stage of the initial hot public testing period, the previous canvas realized the large turntable draw into a small program, helpless at that time the small program to the canvas support is not perfect, had to reduce the implementation with CSS3. Although not as beautiful as Canvas painting, but also finally completed a lottery Demo, see: Https://github.com/givebest/wechat-turntalbe-canvas.

After hindsight, CSS3 implementation is not without benefit, such as simple, fast, debugging convenient, rendering want to be more efficient than Canvas, more important is to support media queries, large turntable can also be made into a responsive type. So take the time to organize, with pure CSS3 to achieve a large turntable lottery Demo and recorded.

If there is a similar demand and do not want to trouble to understand the details, you can come here--canvas complete Big Carousel Lottery Project ( 可以直接拿来用 ) https://github.com/givebest/GB-canvas-turntable.

The following is directly affixed to the code, 后面有演示地址 .

Code HTML

class="gb-wheel-container" id="gbWheel">    <div class="gb-wheel-content gb-wheel-run"> <ul class="gb-wheel-line"></ul> <div class="gb-wheel-list"></div> </div> <a href="javascript:;" class="gb-wheel-btn" id="gbLottery">抽奖</a> </section>

Js

(function) {Prize configurationvar awards = [{' Index ':0,' Text ':' Headphones ',' Name ':' Icono-headphone '}, {' Index ':1,' Text ':' IPhone ',' Name ':' Icono-iphone '}, {' Index ':2,' Text ':' Camera ',' Name ':' Icono-camera '}, {' Index ':3,' Text ':' Coffee cups ',' Name ':' Icono-cup '}, {' Index ':4,' Text ':' Calendar ',' Name ':' Icono-calendar '}, {' Index ':5,' Text ':' Keyboard ',' Name ':' Icono-keyboard '}], Len = awards.length, Turnnum =1/len;Text Rotation Turn valuevar Gbwheel = $ (' Gbwheel '), linelist = Gbwheel.queryselector (' Ul.gb-wheel-line '), itemList = Gbwheel.queryselector ('. Gb-wheel-list '), linelisthtml = [], itemlisthtml = [];var transform = Pretransform (); Awards.foreach (functionV, I, a) {Divider Line Linelisthtml.push (' <li class= ' Gb-wheel-litem "style=" ' + Transform +': Rotate (' + (i * turnnum + turnnum/2) +' Turn ' ></li> ');Award Itemlisthtml.push (' <div class= ' gb-wheel-item ' > '); Itemlisthtml.push (' <div class= ' gb-wheel-icontent "style=" ' + Transform +': Rotate (' + (i * turnnum) +' Turn ' > '); Itemlisthtml.push (' <p class= ' Gb-wheel-iicon ' > '); Itemlisthtml.push (' <i class= ' +v.name+' ></i> '); Itemlisthtml.push (' </p> '); Itemlisthtml.push (' <p class= ' gb-wheel-itext ' > '); Itemlisthtml.push (V.text); Itemlisthtml.push (' </p> '); Itemlisthtml.push (' </div> '); Itemlisthtml.push (' </div> '); }); linelist.innerhtml = Linelisthtml.join (‘‘); itemlist.innerhtml = Itemlisthtml.join (‘‘);function$(ID) {Returndocument.getElementById (ID); };Rotatingvar i =0; $(' Gblottery '). onclick =function) {i++; Gbwheel.queryselector ('. Gb-wheel-content '). style = transform +': Rotate (' + i *3600 +' deg) '; }Transform compatiblefunctionPretransform () {var cssprefix, vendors = {‘‘:", Webkit:' WebKit ', Moz:", O:' O ', MS:' Ms '}, Testele =Document.createelement (' P '), csssupport = {};Sniffing characteristicsObject.keys (Vendors). Some (functionvendor) { if (Testele.style[vendor + (vendor? ' t ': ' t ') + ' ransform ']!== undefined) {cssprefix = Vendor? '-' + vendor.tolowercase () + '-': ' ; return True;}}); function normalizecss (name) {name = Name.tolowercase (); return cssprefix Cssprefix + name:name;} Csssupport = {transform:normalizecss (' transform '),} return csssupport.transform;}} ());

Css

HTML {Font-size:10px}. Gb-wheel-containerUl. Gb-wheel-containerLi. Gb-wheel-containerp {Margin0;Padding0}. Gb-wheel-containerUl. Gb-wheel-containerLi {List-style:none}. gb-wheel-container {Margin0 auto;position:relative;Width30rem;Height30rem;Border-radius:50%;Box-shadow:02px3px#333,002px#000;Overflow:hidden}. gb-wheel-content {Position:absolute;Left1rem;Top1rem;Z-index:2;Width28rem;Height28rem;Box-sizing:border-box;Border-radius:inherit;Background-clip:padding-box;Background-webkit-radial-gradient (Rgba100,100,100,0.1)15%, Transparent16%)00,-webkit-radial-gradient (Rgba100,100,100,0.1)15%, Transparent16%)8px8PX,-webkit-radial-gradient (Rgba255,255,255,0.1)15%, Transparent20%)01px,-webkit-radial-gradient (Rgba255,255,255,0.1)15%, Transparent20%)8px9px;BackgroundRadial-gradient (Rgba100,100,100,0.1)15%, Transparent16%)00,Radial-gradient (Rgba100,100,100,0.1)15%, Transparent16%)8px8PX,Radial-gradient (Rgba255,255,255,0.1)15%, Transparent20%)01px,Radial-gradient (Rgba255,255,255,0.1)15%, Transparent20%)8px9px;Background-color:#ffcb3f;Background-size:12px14PX}. gb-wheel-content: Before {Content‘ ‘;Position:absolute;Left:-1rem;Top:-1rem;Z-index:-1;Width28rem;Height28rem;Border-radius:inherit;Border1rem Solid#E44025;Box-shadow:002px2pxRgba0,0,0,0.2) Inset}. gb-wheel-list {Position:absolute;Left0;Top0;Width:inherit;Height:inherit;Z-index:9999}. gb-wheel-item {Position:absolute;Left0;Top0;Width100%;height:100%; Color: #e4370e; Font-weight:bold; text-shadow:0 1px 1px rgba (255, 255, 255, 0.6)}.gb-wheel-icontent {position:relative; display:block; padding-top:1.5r Em margin:0 Auto; Text-align:center; -webkit-transform-origin:50% 14rem; -ms-transform-origin:50% 14rem; transform-origin:50% 14rem}.gb-wheel-itext {font-size:1.4rem; Font-weight:lighter}.gb-wheel-iicon [class*=icono-] { Color: #e4370e}.gb-wheel-line {position:absolute; left:0; top:0; width:inherit; height:inherit; z-index:99}.gb-whee L-litem {position:absolute; left:14rem; top:0; width:1px; height:14rem; Background-color:rgba (228, +, 0.6); OV Erflow:hidden; -webkit-transform-origin:50% 14rem; -ms-transform-origin:50% 14rem; transform-origin:50% 14rem}.gb-wheel-btn {position:absolute; left:11rem; top:11rem; z-index:400; width:8rem; height : 8rem; border-radius:50%; Color: #F4E9CC; Background-color: #E44025; Line-height:8rem; Text-align:center; Font-size:2rem; text-shadow:0 -1px1px rgba (0, 0, 0, 0.6); box-shadow:0 3px 5px rgba (0, 0, 0, 0.6), 0 0 5px 4px rgba (0, 0, 0, 0.2) inset; text-decoration:none}a.gb-wheel-btn {border-bottom:none}.gb-wheel-btn::after {position:absolute; content: '; Left: 2.5rem; Top: -1rem; Width:3rem; Height:3rem; Background-color: #E44025; -webkit-transform:rotate (45DEG); -ms-transform:rotate (45DEG); Transform:rotate (45DEG); box-shadow:0 3px 5px rgba (0, 0, 0, 0.6), 0 0 5px 4px rgba (0, 0, 0, 0.2) inset}.gb-wheel-btn.disabled,.gb-wheel-btn.disabl ed::after {pointer-events:none; background: #B07A7B; color: #ccc}.gb-wheel-run {-webkit-transition:transform 6s ease; Transition:transform 6s Ease} @media only screens and (min-width:320px) {html {font-size:10px}} @media only screens and (min-width:375px) {html {font-size:11.71875px}} @media only screens and (min-width:480px) {html {font-size:15px}}

Demonstrate

Http://blog.givebest.cn/GB-css3-wheel.html

Project

Https://github.com/givebest/GB-css3-wheel

Thank

Prizes icon from: Https://github.com/saeedalipoor/icono
CSS3 turntable background from: http://lea.verou.me/css3patterns/

By the way Lea Verou (the CSS Group invited experts) book "CSS Secrets:better Solutions to everyday Web Design problems", let you shock, the original CSS can also be used, can achieve so many brilliant special Effect. There is a Chinese version of the "CSS Secrets", CSS魔法 translation.

Pure CSS3 Big Carousel Draw (responsive, configurable)