css圆形卡片环绕点击选择效果代码
代码语言:html
所属分类:动画
代码描述:css圆形卡片环绕点击选择效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> html,body{height:100%;padding:0;margin:0;text-align:center} .title{font-weight:700;font-size:55px;margin-bottom:10px;color:#333} .description{font-size:21px;font-weight:400;color:#888} .bold{font-weight:700} .slider{padding:50px 0} .slider-origin{background-color:#bd2cbd;border-radius:50%;display:inline-block;position:relative} .slider-inner{display:inline-block} .slider-item{width:74px;height:100px;background-color:rgba(128,0,128,0.4);box-shadow:0 0 3px 1px rgba(0,0,0,0.1);border-radius:3px;position:absolute;bottom:200%;left:50%;margin-left:-37px;cursor:pointer;transform-origin:center 175%;-webkit-transform-origin:center 175%;-ms-transform-origin:center 175%;-moz-transform-origin:center 175%;-webkit-transition:-webkit-transform 0.5s;transition:-webkit-transform 0.5s;transition:transform 0.5s;transition:transform 0.5s,-webkit-transform 0.5s;-webkit-transition:transform 0.5s;-ms-transition:transform 0.5s;-moz-transition:transform 0.5s;text-align:left;color:#fff;padding:7px;box-sizing:border-box;-moz-user-select:-moz-none;-webkit-user-select:none;-ms-user-select:none;user-select:none} .slider-item.active{background-color:purple;cursor:default} .slider-item:not(.active):hover{background-color:#540554} </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script> </head> <body> <div class="slider"> <div class="slider-inner"> <div class="slider-origin"> <div class="slider-item">1</div> <div class="slider-item">2</div> <div class="slider-item">3</div> <div class="slider-item">4</div> <div class="slider-item">5</div> <div class="slider-item">6</div> <div class="slider-item">7</div> <div class="slider-item">8</div> <div class="slider-item">9</div> <div class="slider-item">10</div> <div class="slider-item">11</div> <div class="slider-item">12</div> <div class="slider-item">13</div> <div class="slider-item">14</div> <div class="slider-item">15</div> <div class="slider-item">16</div> <div class="slider-item">17</div> <div class="slider-item">18</div> <div class="slider-item">19</div> <div class="slider-item">20</div> <div class="slider-item">21</div> <div class="slider-item">22</div> <div class="slider-item">23</div> <div class="slider-item">24</div> <div class="slider-item">25</div> <div class="slider-item">26</div> <div class="slider-item">27</div> <div class="slider-item">28</div> <div class="slider-item">29</div> <div class="slider-item">30</div> </div> </div> </div> <script> $(document).ready(function(){ // helpful variables var slider = $('.slider'); var sliderInner = slider.find('.slider-inner'); var sliderOrigin = slider.find('.slider-origin'); var sliderItems = slider.find('.slider-item'); var itemsLength = sliderItems.length; var calcDeg = 270 / itemsLength; v.........完整代码请登录后点击上方下载按钮下载查看
网友评论0