WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › CSS3动画 彩虹炫 – 让你的标签颜色呈现彩虹般效果

CSS3动画 彩虹炫 – 让你的标签颜色呈现彩虹般效果

PCDotFan10年前
  • 代码作者
  • 代码演示

 

嗯哼。。。本次给大家带来的是 CSS3 的动画,主要为 li 标签从下至上颜色依次渐变的效果,在代码演示地址中的右侧可见。上代码~~~

对于 xBorder 主题,可直接在 style.css 中加入以下代码:

aside ul.ulstyle:hover a {-webkit-transition-property:color;-webkit-transition-timing-function: cubic-bezier(1,0,1,0);transition-property:color;transition-timing-function: cubic-bezier(1,0,1,0);}
aside ul.ulstyle a{-webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
aside ul.ulstyle:hover li:nth-child(1) a {color:#DA020E;-webkit-transition-duration: 1s;transition-duration: 1s;}
aside ul.ulstyle:hover li:nth-child(2) a {color:#D30454;-webkit-transition-duration: .9s;transition-duration: .9s;}
aside ul.ulstyle:hover li:nth-child(3) a {color:#CB0A9B;-webkit-transition-duration: .8s;transition-duration: .8s;}
aside ul.ulstyle:hover li:nth-child(4) a {color:#C729B0;-webkit-transition-duration: .7s;transition-duration: .7s;}
aside ul.ulstyle:hover li:nth-child(5) a {color:#C75E81;-webkit-transition-duration: .6s;transition-duration: .6s;}
aside ul.ulstyle:hover li:nth-child(6) a {color:#C7A236;-webkit-transition-duration: .5s;transition-duration: .5s;}
aside ul.ulstyle:hover li:nth-child(7) a {color:#C7C40D;-webkit-transition-duration: .4s;transition-duration: .4s;}
aside ul.ulstyle:hover li:nth-child(8) a {color:#B8C10F;-webkit-transition-duration: .3s;transition-duration: .3s;}
aside ul.ulstyle:hover li:nth-child(9) a {color:#A2AD22;-webkit-transition-duration: .2s;transition-duration: .2s;}
aside ul.ulstyle:hover li:nth-child(10) a {color:#767954;-webkit-transition-duration: .1s;transition-duration: .1s;}

 

对于其它的主题,可以使用以下代码:

ul a,
ul:hover a {-webkit-transition-property:color;-webkit-transition-timing-function: cubic-bezier(1,0,1,0);transition-property:color;transition-timing-function: cubic-bezier(1,0,1,0);}
ul a{-webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
ul:hover li:nth-child(1) a {color:#DA020E;-webkit-transition-duration: 1s;transition-duration: 1s;}
ul:hover li:nth-child(2) a {color:#D30454;-webkit-transition-duration: .9s;transition-duration: .9s;}
ul:hover li:nth-child(3) a {color:#CB0A9B;-webkit-transition-duration: .8s;transition-duration: .8s;}
ul:hover li:nth-child(4) a {color:#C729B0;-webkit-transition-duration: .7s;transition-duration: .7s}
ul:hover li:nth-child(5) a {color:#C75E81;-webkit-transition-duration: .6s;transition-duration: .6s;}
ul:hover li:nth-child(6) a {color:#C7A236;-webkit-transition-duration: .5s;transition-duration: .5s;}
ul:hover li:nth-child(7) a {color:#C7C40D;-webkit-transition-duration: .4s;transition-duration: .4s;}
ul:hover li:nth-child(8) a {color:#B8C10F;-webkit-transition-duration: .3s;transition-duration: .3s;}
ul:hover li:nth-child(9) a {color:#A2AD22;-webkit-transition-duration: .2s;transition-duration: .2s;}
ul:hover li:nth-child(10) a {color:#767954;-webkit-transition-duration: .1s;transition-duration: .1s;}

因为各种主题有所不同,在使用了以上代码后某些同学可能会出现无效的情况,这时候可需要你慢慢修改咯~~

CSS3动画 彩虹炫 - 让你的标签颜色呈现彩虹般效果-WP酷很帅有木有~~

#CSS3
1
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (0)
再想想
    沙发抢一发
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
WordPress 获取文章估算阅读时间
9年前
如何确立对博客的定位
10年前
Landing Sites代码版:增加网站流量
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1