纯CSS3大转盘抽奖示例代码(响应式、可配置)
发布时间:2017-01-13 16:49:40 作者:givebest 我要评论
这篇文章主要介绍了纯CSS3大转盘抽奖示例代码(响应式、可配置),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧。
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现。虽然比不上 Canvas 绘图的绚丽,但也总算完成了一个抽奖的 Demo,详见:http://xiazai.jb51.net/201701/yuanma/wechat-canvas_jb51.rar
事后想起,CSS3 实现也并不是无有益处,比如简单、快捷、调试方便、渲染想来也是要比 Canvas 要高效的,更重要的一点是支持媒体查询,大转盘也可以做成响应式的。因此抽空整理,用纯 CSS3 实现一个大转盘抽奖 Demo 并记录下来。
如果有类似需求并不想麻烦了解细节,可移步这里——Canvas 完整的大转盘抽奖项目(可以直接拿来用)http://xiazai.jb51.net/201701/yuanma/canvas_jb51.rar
以下就直接贴代码了。
代码
HTML
1 2 3 4 5 6 7 | < section 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | ( 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( '<li class="gb-wheel-litem" style="' + transform + ': rotate(' + (i * turnNum + turnNum / 2) + 'turn)"></li>' ); // 奖项 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) { return document.getElementById(id); }; // 旋转 var i = 0; $( 'gbLottery' ).onclick = function () { i++; gbWheel.querySelector( '.gb-wheel-content' ).style = transform + ': rotate(' + i * 3600 + 'deg)' ; } // transform兼容 function preTransform() { var cssPrefix, vendors = { '' : '' , Webkit: 'webkit' , Moz: '' , O: 'o' , ms: 'ms' }, testEle = document.createElement( 'p' ), cssSupport = {}; // 嗅探特性 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | 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 : 30 rem; height : 30 rem; border-radius: 50% ; box-shadow: 0 2px 3px #333 , 0 0 2px #000 ; overflow : hidden } .gb-wheel-content { position : absolute ; left : 1 rem; top : 1 rem; z-index : 2 ; width : 28 rem; height : 28 rem; 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 : -1 rem; top : -1 rem; z-index : -1 ; width : 28 rem; height : 28 rem; border-radius: inherit; border : 1 rem 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.5 rem; margin : 0 auto ; text-align : center ; -webkit-transform-origin: 50% 14 rem; -ms-transform-origin: 50% 14 rem; transform-origin: 50% 14 rem } .gb-wheel-itext { font-size : 1.4 rem; 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 : 14 rem; top : 0 ; width : 1px ; height : 14 rem; background-color : rgba( 228 , 55 , 14 , 0.6 ); overflow : hidden ; -webkit-transform-origin: 50% 14 rem; -ms-transform-origin: 50% 14 rem; transform-origin: 50% 14 rem } .gb-wheel-btn { position : absolute ; left : 11 rem; top : 11 rem; z-index : 400 ; width : 8 rem; height : 8 rem; border-radius: 50% ; color : #F4E9CC ; background-color : #E44025 ; line-height : 8 rem; text-align : center ; font-size : 2 rem; 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.5 rem; top : -1 rem; width : 3 rem; height : 3 rem; background-color : #E44025 ; -webkit-transform: rotate( 45 deg); -ms-transform: rotate( 45 deg); transform: rotate( 45 deg); 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 6 s ease; transition: transform 6 s 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 } } |
项目
demo下载地址:demo
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了CSS3移动端vw+rem不依赖JS实现响应式布局的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-01-23
- 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的。这篇文章主要介绍了html5/css3响应式页面开发总结 ,需要的朋友可以参考下2018-10-16
- 本篇文章主要介绍了CSS banner图响应式居中显示的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-03
- 这篇文章主要介绍了详解使用CSS3的@media来编写响应式的页面,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-01
- jcSlider是一款jquery和CSS3响应式轮播图插件。生成60多种轮播图过渡动画效果,简单实用,欢迎下载2017-07-21
CSS3 media queries + jQuery实现响应式导航
这篇文章主要介绍了CSS3 media queries + jQuery实现响应式导航的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-09-30- 这篇文章主要介绍了CSS 响应式布局系统的实例代码,需要的朋友可以参考下2019-05-24
最新评论