CSS3 대형 캐러셀 복권 샘플 코드(반응형, 구성 가능)

이 글은 주로 순수 CSS3 대형 캐러셀 복권 샘플 코드(반응형, 구성 가능)를 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 이를 여러분과 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 살펴보겠습니다.

얼마 전 공개 베타 기간 중 WeChat 미니 프로그램의 초기 인기로 인해 이전에 Canvas를 사용하여 구현되었던 대형 캐러셀 복권이 WeChat mini에 이식되었습니다. 아쉽게도 당시에는 미니 프로그램이 Canvas를 충분히 지원하지 않아서 CSS3로 줄여야 했습니다. 캔버스 그리기만큼 화려하지는 않지만 마침내 복권을 완성했습니다

돌이켜 보면 CSS3 구현에는 단순성, 속도, 쉬운 디버깅 등의 이점이 있으며 렌더링은 캔버스보다 효율적입니다. 더 중요한 것은 미디어 쿼리를 지원하고 대형 캐러셀도 반응형으로 만들 수 있다는 것입니다. 그래서 시간을 들여 정리하고 순수 CSS3를 사용하여 대형 캐러셀 복권 데모를 구현하고 기록했습니다.

비슷한 요구 사항이 있고 세부 사항에 신경쓰고 싶지 않다면 여기로 가세요. - Canvas의 완전한 대형 회전목마 복권 프로젝트(직접 사용 가능)

코드는 직접 아래에 붙여넣었습니다.

코드

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">抽奖</a>     
</section>

JS

(function() {
    // 奖品配置
    var awards = [
            {'index': 0, 'text': '耳机' , 'name': 'icono-headphone'},
            {'index': 1, 'text': 'iPhone' , 'name': 'icono-iphone'},
            {'index': 2, 'text': '相机' , 'name': 'icono-camera'},
            {'index': 3, 'text': '咖啡杯' , 'name': 'icono-cup'},
            {'index': 4, 'text': '日历', 'name': 'icono-calendar'},
            {'index': 5, 'text': '键盘', 'name': 'icono-keyboard'}
        ],
        len = awards.length,
        turnNum = 1 / len;  // 文字旋转 turn 值

    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) {
        // 分隔线
        lineListHtml.push(&#39;<li class="gb-wheel-litem" style="&#39; + transform + &#39;: rotate(&#39;+ (i * turnNum + turnNum / 2) +&#39;turn)"></li>&#39;);

        // 奖项
        itemListHtml.push(&#39;<p class="gb-wheel-item">&#39;);
        itemListHtml.push(&#39;<p class="gb-wheel-icontent" style="&#39; + transform + &#39;: rotate(&#39;+ (i * turnNum) +&#39;turn)">&#39;);
        itemListHtml.push(&#39;<p class="gb-wheel-iicon">&#39;);
        itemListHtml.push(&#39;<i class="&#39;+v.name+&#39;"></i>&#39;);
        itemListHtml.push(&#39;</p>&#39;);
        itemListHtml.push(&#39;<p class="gb-wheel-itext">&#39;);
        itemListHtml.push(v.text);
        itemListHtml.push(&#39;</p>&#39;);
        itemListHtml.push(&#39;</p>&#39;);
        itemListHtml.push(&#39;</p>&#39;);
    });           

    lineList.innerHTML = lineListHtml.join(&#39;&#39;);
    itemList.innerHTML = itemListHtml.join(&#39;&#39;);

    function $(id) {
        return document.getElementById(id);
    };

    // 旋转
    var i = 0;
    $(&#39;gbLottery&#39;).onclick = function() {
        i++;
        gbWheel.querySelector(&#39;.gb-wheel-content&#39;).style = transform + &#39;: rotate(&#39;+ i * 3600 +&#39;deg)&#39;;  
    }

    // transform兼容
    function preTransform() {
        var cssPrefix,
        vendors = {
          &#39;&#39;: &#39;&#39;,
          Webkit: &#39;webkit&#39;,
          Moz: &#39;&#39;,
          O: &#39;o&#39;,
          ms: &#39;ms&#39;
        },
        testEle = document.createElement(&#39;p&#39;),
        cssSupport = {};

         // 嗅探特性
        Object.keys(vendors).some(function(vendor) {
            if (testEle.style[vendor + (vendor ? &#39;T&#39; : &#39;t&#39;) + &#39;ransform&#39;] !== undefined) {
              cssPrefix = vendor ? &#39;-&#39; + vendor.toLowerCase() + &#39;-&#39; : &#39;&#39;;
              return true;
            }
        });

      function normalizeCss(name) {
        name = name.toLowerCase();
        return cssPrefix ? cssPrefix + name : name;
      }

      cssSupport = {
        transform: normalizeCss(&#39;Transform&#39;),
      }

      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(100, 100, 100, 0.1) 15%, transparent 16%) 0 0,  
                -webkit-radial-gradient(rgba(100, 100, 100, 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(100, 100, 100, 0.1) 15%, transparent 16%) 0 0,
                radial-gradient(rgba(100, 100, 100, 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.disabled::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 only screen and (min-width: 375px) {
    html {
        font-size: 11.71875px
    }
}

@media only screen and (min-width: 480px) {
    html {
        font-size: 15px
    }
}

Project

데모 다운로드 주소 : 데모

위는 이 기사가 모든 내용이 모든 사람의 학습에 도움이 되기를 바라며, 또한 모든 사람이 PHP 중국어 웹사이트를 지지하기를 바랍니다.

더 많은 CSS3 대형 캐러셀 복권 샘플 코드(반응형, 구성 가능) 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!