执念 执念

发表文章数:233

热门标签

首页 » 技巧教程 » wordpress插件技巧 » 网站图像旋转和文字变色代码

网站图像旋转和文字变色代码

*头像旋转*/
.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);
}
.article-content h2 {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid;
    padding: 5px 15px;
    border-left: 8px solid;
    border-left-color: #EE3B3B;
    border-color: #EE3B3B;
    color: #EE3B3B;
    margin: 18px 0 18px -20px;
    overflow: hidden;
}

.article-content h5 {
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid;
    padding: 2px 15px;
    border-left: 6px solid;
    border-left-color: #01aaef;
    border-color: #3cc3ff;
    color: #3cc3ff;
    margin: 18px 0 18px -20px;
    overflow: hidden;
}



.suiji h3,.hots h3, .excerpt-post .note,.wbd p ,.footcolor{display:block;
/**width:355px;
height:50px;**/
/*渐变背景,此处为能无缝拼接的渐变 即0~100%*/ /*linear-gradient(线性渐变)*/
background-image:-webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
color:transparent;
/*文字填充色为透明*/
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
/* background-clip 规定背景的绘制区域:*/ /*背景剪裁为文字,相当于用背景填充文字 CSS3新属性*/
-webkit-background-size:200% 100%;
/*背景图片向水平方向扩大一倍,这样background-position才有移动与变化的空间*/
background-size:200% 100%;
/* 动画 */
-webkit-animation:masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position:0 0;
/*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position:-100% 0;
}
}@-webkit-keyframes masked-animation {
0% {
background-position:0 0;
}
100% {
background-position:-100% 0;
}
}

可以看看本站图片,本站原来是的,但是我不喜欢花里胡哨的了,放出来吧!

网站图像旋转和文字变色代码

标签:

未经允许不得转载:作者:执念, 转载或复制请以 超链接形式 并注明出处 触光博客
原文地址:《网站图像旋转和文字变色代码》 发布于2020-02-15

分享到:
赞(0) 打赏 生成海报

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

关于本站账户注册
注册登陆说明因需提高本站资源高效性,方便后期资源整合和问题反馈,后期本站将关闭第三方登陆接口,建议大家使用邮箱注册登陆获取更多精品资源权限哦,感谢各位!
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册