fluid主题设置关于页头像图片鼠标悬停360°旋转效果

设置关于页头像图片鼠标悬停360°旋转效果

将以下代码复制替换fluid主题about.styl文件内容

.about-avatar
  position relative
  margin -8rem auto 1rem
  width 10rem
  height 10rem
  z-index 3

  img
    width 100%
    height 100%
    border-radius 50%
    background-color transparent
    object-fit cover
    box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)

    transition: all 1s

.img-fluid:hover {
  background-color: #b9e769;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
     transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
}

.about-info
  & > div
    margin-bottom .5rem

.about-name
  font-size 1.75rem
  font-weight bold

.about-intro
  font-size 1rem

.about-icons
  & > a:not(:last-child)
    margin-right .5rem

  & > a > i
    font-size 1.5rem