子比主题添加闪动IPv6标识效果

很多网站都支持IPv6,但是对于很多网站想要一个标识的效果给自己的网站,此效果本站在底部,可以查看,非常美观的一个闪动Pv6标识

子比主题添加闪动IPv6标识效果插图
<span class="tengfei_ipv6 tag_ipv6">IPv6</span>
.tengfei_ipv6{display: inline; padding: 0.2em 0.6em; margin: 0px 5px; border-radius: 0.25em; background: rgb(92, 184, 92); color: rgb(255, 255, 255); font-size: 12px; font-weight: 200; line-height: 20px; vertical-align: baseline;}
.tag_ipv6{display:inline!important;float:none!important;padding:.2em .6em;margin:0 5px;position:relative!important;overflow:hidden;outline:none;border-radius:.25em;background:#5cb85c;color:#fff;font-size:12px;font-weight:200;line-height:20px;vertical-align:super;animation:blink 1s linear infinite;-webkit-animation:blink 1s linear infinite;-moz-animation:blink 1s linear infinite;-ms-animation:blink 1s linear infinite;-o-animation:blink 1s linear infinite;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tag_ipv6,.tag_ipv6 a,.tag_ipv6 a:hover,.tag_ipv6:hover{text-decoration:none!important}.tag_ipv6:after{background:#5cb85c;-moz-transform:translateX(-50%) translateY(-50%) rotate(-25deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(-25deg);-webkit-transform:translateX(-50%) translateY(-50%) rotate(-25deg);transform:translateX(-50%) translateY(-50%) rotate(-25deg)}@keyframes blink{0%{opacity:1;border:1px solid #fff;background-color:transparent;transition:all .4s ease-in-out}50%{opacity:.9;border:1px solid #5cb85c}to{opacity:.9;border:1px solid #fff}}@-webkit-keyframes blink{0%{opacity:1}50%{opacity:.9}to{opacity:1}}@-moz-keyframes blink{0%{opacity:1}50%{opacity:.9}to{opacity:1}}@-ms-keyframes blink{0%{opacity:1}50%{opacity:.9}to{opacity:1}}@-o-keyframes blink{0%{opacity:1}50%{opacity:.9}to{opacity:1}}.tag_ipv6:after{content:"";height:100%;width:100%;position:absolute;display:inline;margin:0;top:0;left:0;z-index:-1;animation:pulsate 1s ease-out;animation-iteration-count:infinite;animation-delay:1.1s}@keyframes pulsate{0%{transform:scale(.1);opacity:0;filter:alpha(opacity=0)}50%{opacity:1;filter:none}to{transform:scale(1.2);opacity:0;filter:alpha(opacity=0)}}
本站资源均为网友推荐收集整理而来,请勿商业运营,仅供学习和研究,请在下载后24小时内删除!!
© 版权声明
THE END
点赞14
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容