【RiPro 主题美化】LOGO流光效果/头像旋转/多彩滚动条分享wordpress教程推荐

摘要： 头像旋转将下方代码置于『WordPress』后台—>外观—>自定义—>额外CSS中即可。/*头像旋转*/.bg-cover { &nb...

头像旋转

将下方代码置于『WordPress』后台—>外观—>自定义—>额外CSS中即可。

/*头像旋转*/  .bg-cover {      border: #ececec 1px solid;  }  .avatar{  -Webkit-transition:0.4s;  -webkit-transition:-webkit-transform 0.4s ease-out;  transition:transform 0.4s ease-out;  -moz-transition:-moz-transform 0.4s ease-out;  }  .avatar:hover{  transform:rotateZ(360deg);  -webkit-transform:rotateZ(360deg);  -moz-transform:rotateZ(360deg);  }

多彩滚动条

将下方代码置于『WordPress』后台—>外观—>自定义—>额外CSS中即可。

/**====滚动条样式====*/  ::-webkit-scrollbar {/*滚动条整体样式*/    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/    height: 1px;  }  ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/    background-color: #12b7f5;    background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);  }  ::-webkit-scrollbar-track {/*滚动条里面轨道*/      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);      background: #f6f6f6;  }  /**====滚动条样式====*/

LOGO流光

将下方代码置于『 WordPress 』后台—>外观—>自定义—>额外CSS中即可。

/*LOGO 流光*/  .logo-wrapper {      position: relative;      font-size:2em;      font-weight:700;      line-height:39px;      overflow:hidden;      margin:0;  }  .logo-wrapper::before{      content:"";      position: absolute;      width: 150px;      height: 10px;      background-color: rgba(255,255,255,.5);      -webkit-transform: rotate(-45deg);      transform: rotate(-45deg);      -webkit-animation: searchLights 1s ease-in 1s infinite;      animation: searchLights 1s ease-in 1s infinite;  }  @-webkit-keyframes searchLights {      0% { left: -90px; top: 0; }      to { left: 90px; top: 0; }  }

以上代码也可加入到\rIPro\assets\css\diy.css文件中。