Banner

网站添加ipv6闪动标识

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

效果:

网站添加ipv6闪动标识

html代码:

<span class="tengfei_ipv6 tag_ipv6">IPv6</span>

css:

.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)}}
声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至ddan99@163.com 或点击右侧 私信:极端世界 反馈,我们将尽快处理。

给TA投币
共{{data.count}}人
人已投币
子比美化技术教程

子比go外链美化

2024-4-14 13:51:34

子比美化技术教程

子比修改认证图标

2024-4-14 14:01:02

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
  • 63

    文章数目

  • 48

    注册用户

  • 3

    本周发布

  • 54

    稳定运行

  • 1640

    总访问量

  • 波浪
  • 波浪
  • 波浪
  • 波浪