CSS3-responsive, configurable draw carousel

This time to bring you CSS3 to make a responsive, configurable draw turntable, CSS3 to make a responsive, configurable draw turntable note what, the following is the actual case, together to see.

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: Http://xiazai.jb51.net/201701/yuanma/wechat-canvas_jb51.rar

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) Http://xiazai.jb51.net/201701/yuanma/canvas_jb51.rar

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}}

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Linear-gradient the use of a detailed

Several ways to clear floating