hexo-tag-plugins/lib/style/carousel.styl

A number of tag plugins for theme-butterfly

.carousel
  touch-action none
  overflow hidden
  display -webkit-box
  display -ms-flexbox
  display flex
  background transparent
  height fit-content
  min-height 600px
  -webkit-perspective 1000px
  perspective 1000px
  -webkit-transform-style preserve-3d
  transform-style preserve-3d

.drag-container, .spin-container
  position relative
  display -webkit-box
  display -ms-flexbox
  display flex
  margin auto
  -webkit-transform-style preserve-3d
  transform-style preserve-3d
  -webkit-transform rotateX(-10deg)
  transform rotateX(-10deg)

.drag-container img, .drag-container video
  -webkit-transform-style preserve-3d
  transform-style preserve-3d
  position absolute
  left 0
  top 0
  object-fit cover
  height 100%
  width 100%
  line-height 200px
  font-size 50px
  text-align center
  -webkit-box-shadow 0 0 8px #fff
  box-shadow 0 0 8px #fff
  -webkit-box-reflect below 10px linear-gradient(transparent, transparent, #0005)

.drag-container
  .img-alt
    &.is-center
      display none
  br
    display none
  p
    font-family Serif
    position absolute
    top 100%
    left 50%
    -webkit-transform translate(-50%,-50%) rotateX(90deg)
    transform translate(-50%,-50%) rotateX(90deg)
    color #fff

.drag-container img:hover, .drag-container video:hover
  -webkit-box-shadow 0 0 15px #fffd
  box-shadow 0 0 15px #fffd
  -webkit-box-reflect below 10px linear-gradient(transparent, transparent, #0007)

.carousel-ground
  width 900px
  height 900px
  position absolute
  top 100%
  left 50%
  -webkit-transform translate(-50%,-50%) rotateX(90deg)
  transform translate(-50%,-50%) rotateX(90deg)
  background -webkit-radial-gradient(center center, farthest-side , #9993, transparent)
// medium-zoom图片比例失调样式修复
img
  &.medium-zoom-image
    &.entered
      &.loaded
        &.medium-zoom-image--opened
          width auto!important


@-webkit-keyframes spin {
  from{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  } to{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes spin {
  from{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  } to{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes spinRevert {
  from{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  } to{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@keyframes spinRevert {
  from{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  } to{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}