IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

如何css手写轮播+点击的轮播图

轮播

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <section class="header-slider-contaner">
    <ul class="header-slider">
      <li class="header-slider-item slider-item1"></li>
      <li class="header-slider-item slider-item2"></li>
      <li class="header-slider-item slider-item3"></li>
      <li class="header-slider-item slider-item4"></li>
      <li class="header-slider-item slider-item5"></li>
    </ul>
    <div class="header-focus-container">
      <ul class="clearfix">
        <li>
          <div class="header-focus-item focus-item1"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item2"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item3"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item4"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item5"></div>
        </li>
      </ul>
    </div>
  </section>




  ul,li{
  list-style: none;
  }
  /*css reset end*/
  
  /*css public start*/
  .clearfix {
    &:after {
      content: "";
      display: table;
      clear: both;
    }
}
  /*css public end*/
  
  /*slider start*/
  .header-slider-contaner{
  width:100%;
  position:relative;
  }
  .header-slider-item {
  opacity:0;
  }
  .header-slider-item{
  width:100%;
  position:absolute;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  background-size:100%;
  }
  .header-focus-container{
  position:absolute;
  z-index:7;
  margin:0 auto;
  width: 1rem;
  left:0;
  right:0;
  }
  .header-focus-container li{
  width:0.1rem;
  height:0.1rem;
  border-radius:50%;
  float:left;
  margin-right:0.05rem;
  margin-left: 0.05rem;
  background:#fff;
  }
  .header-focus-item{
  width:100%;
  height:100%;
  border-radius:inherit;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  }
  .focus-item2,.focus-item3,.focus-item4,.focus-item5{
  opacity:0;
  }

  /*设置轮播焦点的位置*/
  .header-focus-container{
  bottom:2%;
  }
  /*设置当前图片焦点的颜色*/
  .header-focus-item{
  background:#51B1D9;
  }
  /*设置动画，请根据实际需要修改秒数*/
  .header-slider-item,.header-focus-item{
  animation-duration: 20s;
  }
  .slider-item1,.focus-item1{
  animation-delay: -1s;
  }
  .slider-item2,.focus-item2{
  animation-delay: 3s;
  }
  .slider-item3,.focus-item3{
  animation-delay: 7s;
  }
  .slider-item4,.focus-item4{
  animation-delay: 11s;
  }
  .slider-item5,.focus-item5{
  animation-delay: 15s;
  }
  @keyframes fade{
  0%{
  opacity:0;
  z-index:2;
  }
  5%{
  opacity:1;
  z-index: 1;
  }
  20%{
  opacity:1;
  z-index:1;
  }
  25%{
  opacity:0;
  z-index:0;
  }
  100%{
  opacity:0;
  z-index:0;
  }
  }
  /*设置背景，响应式请利用媒体查询根据断点修改路径*/
  .slider-item1{
  background-image:url(../start-a-project/sss/CSS/task8/task8-1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item2{
  background-image:url(../start-a-project/sss/CSS/task8/picture-1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item3{
  background-image:url(../start-a-project/sss/CSS/task8/picture-2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item4{
  background-image:url(../start-a-project/sss/CSS/task8/task8-1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item5{
  background-image:url(../start-a-project/sss/CSS/task8/picture-1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  /*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
  .header-slider,.header-slider-item{
  padding-bottom:31%;
  }

class命名方式有哪些通俗易懂的。

通用

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* 这里的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 这里的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}

轮播图能否不使用绝对定位

轮播

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.frame{
    box-sizing: border-box;
    position: fixed;
    overflow:hidden; 
    padding-bottom: 30%;
    min-width: 100%;
    .photos {  
        position: absolute;
        width: 100%;
        overflow: hidden;
        .roll { 
            float: left;
            width: 100%;
        }
        .boil {
            background: url(./images/Image.png) no-repeat;
            background-size:100% 100%;
        }
        .boil-one {
            animation: myfirst 10s ease  infinite normal;
        }
        .boil-tow {
            animation: myfirst 10s ease  infinite normal;
        }
        .boil-tir {
            animation: myfirst 10s ease  infinite normal;
        }
        @keyframes myfirst {
            30%,50% {margin-left: -100%;}
            55%,75% {margin-left: -200%;}
            80%,100% {margin-left: -300%;}
        }
    }    
}

组件库规范

框架

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@mixin module-imgscale($width,$height,$margin,$image,$position,$scale) {
  width: $width;
  height: $height;
  margin: $margin;
  background-image: $image;
  background-position: $position;
  -webkit-transform: scale($scale);
  -moz-transform: scale($scale);
  -ms-transform: scale($scale);
  -o-transform: scale($scale);
  transform: scale($scale);
}