CSS3 Big Carousel Lottery Sample code (responsive, configurable)

This article mainly introduces the pure CSS3 large Carousel Lottery Sample code (responsive, configurable), small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it.

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

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 do not want to trouble to understand the details, you can go here--canvas complete Large Carousel Lottery project (can be directly used)

The following code is directly affixed.

Code

Html

<section class= "Gb-wheel-container" id= "Gbwheel" >    <p class= "Gb-wheel-content gb-wheel-run" >        <ul class= "Gb-wheel-line" ></ul>        <p class= "gb-wheel-list" ></p>    </p>    <a href= "javascript:;" class= "gb-wheel-btn" id= "Gblottery" > Sweepstakes </a>     </section>

Js

(function () {///prize config var awards = [{' index ': 0, ' text ': ' Headset ', ' name ': ' Icono-headphone '}, {            ' Index ': 1, ' text ': ' IPhone ', ' name ': ' Icono-iphone '}, {' Index ': 2, ' text ': ' Camera ', ' name ': ' Icono-camera '}, {' Index ': 3, ' text ': ' coffee cup ', ' 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 value var gbwheel = $ (' Gbwheel '), linelist = Gbwheel.queryselector (' Ul.gb-wheel-line '), itemList    = Gbwheel.queryselector ('. Gb-wheel-list '), linelisthtml = [], itemlisthtml = [];    var transform = Pretransform (); Awards.foreach (function (v, I, a) {//Divider line Linelisthtml.push (' <li class= "Gb-wheel-litem" style= "' + transf        ORM + ': Rotate (' + (i * turnnum + TURNNUM/2) + ' Turn) ' ></li> '); Award Itemlisthtml.push (' <p class= "Gb-wheel-item" > ");        Itemlisthtml.push (' <p 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 (' </p> ');    Itemlisthtml.push (' </p> ');               });    linelist.innerhtml = Linelisthtml.join (");    itemlist.innerhtml = Itemlisthtml.join (");    function $ (ID) {return document.getElementById (ID);    };    rotation var i = 0;        $ (' gblottery '). onclick = function () {i++;      Gbwheel.queryselector ('. Gb-wheel-content '). style = transform + ': rotate (' + i * 3600 + ' deg) '; }//Transform compatible function pretransform () {var cssprefix, vendors = {":', Webkit: ' Webkit ', Moz: ', o: ' O ', MS: ' MS '}, Testele = Document.cr         Eateelement (' P '), csssupport = {}; Sniffing characteristics Object.keys (vendors). Some (function (vendor) {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-container Ul,.gb-wheel-container Li,.gb-wheel-container p {margin:0;    Padding:0}.gb-wheel-container Ul,.gb-wheel-container li {list-style:none}.gb-wheel-container {margin:0 auto;    position:relative;    Width:30rem;    Height:30rem;    border-radius:50%;    box-shadow:0 2px 3px #333, 0 0 2px #000;    overflow:hidden}.gb-wheel-content {position:absolute;    Left:1rem;    Top:1rem;    Z-index:2;    Width:28rem;    Height:28rem;    Box-sizing:border-box;    Border-radius:inherit;    Background-clip:padding-box; Background:-webkit-radial-gradient (Rgba (16%,, 0.1) 15% Transparent 0 0,-webkit-radial-gradient (RGBA (0.1) 15%, transparent 16%) 8px 8px,-webkit-radial-gradient (RGBA (255, 255, 255, 0.1) 15%, transparent 20%) 0 1px,-webkit-radial-gradient (RGBA (255, 255, 255, 0.1) 15%, transparent 20%)    8PX 9px; Background:radial-gradient (Rgba (0.1) 15%, TRansparent 16%) 0 0, Radial-gradient (RGBA (0.1) 15%, transparent 16%) 8px 8px, Radial-gradient (RGBA (255, 255, 255, 0.1) 15%, transparent 20%) 0 1px, Radial-gradient (RGBA (255, 255, 255, 0.1) 15%, transparent 20%)    8PX 9px;    Background-color: #ffcb3f;    background-size:12px 14px}.gb-wheel-content:before {content: ';    Position:absolute;    Left: -1rem;    Top: -1rem;    Z-index:-1;    Width:28rem;    Height:28rem;    Border-radius:inherit;    Border:1rem solid #E44025;    box-shadow:0 0 2px 2px rgba (0, 0, 0, 0.2) inset}.gb-wheel-list {position:absolute;    left:0;    top:0;    Width:inherit;    Height:inherit;    Z-index:9999}.gb-wheel-item {position:absolute;    left:0;    top:0;    width:100%;    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.5rem;    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-wheel-litem {position:absolute;    Left:14rem;    top:0;    width:1px;    Height:14rem;    Background-color:rgba (228, 55, 14, 0.6);    Overflow: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 -1px 1px 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 screen and (min-width:320px) {html {font-size:10px}} @media onl    Y screen and (min-width:375px) {html {font-size:11.71875px}} @media only screen and (min-width:480px) { HTML {font-size:15px}}

Project

Demo Download Address: Demo

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.