⭐公告:会员务必收藏永久发布页https://bikan.jiuandun.tk⭐

头像下拉源码两款 效果展示(一)

注:主题原来获取的时间是VIP到期时间,该美化修改为用户注册时间

头像下拉源码两款 效果展示(二)

附赠:(Logo流光效果、头像旋转、多彩滚动条)

/*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; }
}

/*头像旋转*/
.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);
}

/**====滚动条样式====*/
::-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;
}
/**====滚动条样式====*/

第一期教程地址:http://www.52cgzy.com/source/35/

本站所有资源收集于网络,如有侵权违规请联系联系客服处理删帖,谢谢
52草根资源 » RiPro 主题美化教程 (第二期)

常见问题FAQ

1.关于新手解压出错 必看(附电脑+安卓WINRAR APP)
新手必看 本站资源解压教程:http://www.52cgzy.com/76304/
2.本站Telegram群组链接
本站Telegram群组链接:https://t.me/joinchat/ElyDb9Es_YNjYjdl
3.所有礼包码下载地址:http://www.52cgzy.com/422289/
所有礼包码下载地址:http://www.52cgzy.com/422289
4.各类问题及解决处理方法合集
各类问题及解决处理方法合集:http://www.52cgzy.com/zhanwu/xinshou/

发表评论

提供最优质的资源集合

立即查看 申请友链