详情 评论 问答 子比主题美化-给侧边栏添加一个小美化小柚子3月15日更新关注私信01469 前言 给你的子比主题侧边栏加一个小美化挂件,让你的侧边栏变的不会那么空白。 效果展示 教程开始 将下面代码添加在小工具里的自定义HTML里就好了 <style type="text/css"> #container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center;padding: 10px;background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);border-radius: var(--main-radius);} #flip-box-1{overflow:hidden;height:50px;border-radius:99px} #flip-box-1 div{height:50px} #flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%} #flip-box-1 div:first-child{animation:show 8s linear infinite} .flip-box-1-1{background-image:linear-gradient(to right,#fa709a 0,#fee140 100%)} .flip-box-1-2{background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);} .flip-box-1-3{background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);} .flip-box-1-4{background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);} .flip-box-1-5{background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);} .flip-box-1-6{background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);} @keyframes show{0%{margin-top:-300px} 5%{margin-top:-250px} 16.666%{margin-top:-250px} 21.666%{margin-top:-200px} 33.332%{margin-top:-200px} 38.332%{margin-top:-150px} 49.998%{margin-top:-150px} 54.998%{margin-top:-100px} 66.664%{margin-top:-100px} 71.664%{margin-top:-50px} 83.33%{margin-top:-50px} 88.33%{margin-top:0} 99.996%{margin-top:0} 100%{margin-top:300px} } </style> <div id="container-box-1"> <div class="container-box-1-1"><svg class="icon" aria-hidden="true"><use xlink:href="#iconxiangwenbiaoqing"></use></svg> 坚持每天来逛逛,会让你 <svg class="icon" aria-hidden="true"><use xlink:href="#iconpaomeiyanbiaoqing"></use></svg></div> <div id="flip-box-1"><div><div class="flip-box-1-1">生活也美好了!</div> </div><div><div class="flip-box-1-2">心情也舒畅了!</div></div> <div><div class="flip-box-1-3">走路也有劲了!</div></div><div> <div class="flip-box-1-4">腿也不痛了!</div></div> <div><div class="flip-box-1-5">腰也不酸了!</div></div> <div><div class="flip-box-1-6">工作也轻松了!</div></div> </div><div class="container-box-1-2"><svg class="icon" aria-hidden="true"><use xlink:href="#iconkaixinbiaoqing"></use></svg> 你好我也好,不要忘记哦! <svg class="icon" aria-hidden="true"><use xlink:href="#icondaxiaobiaoqing"></use></svg></div></div> 文章很赞,支持一下吧~ 还没有人为TA充电 为TA充电 还没有人为TA充电 © 版权声明 版权声明 1 本站名称: 七九网单 2 本站网址:www.fengxue.cc 3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。 4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。 6 本站附件资源、教程等内容如因时效原因失效或不可用,请评论区留言或联系站长及时更新。 THE END子比美化 喜欢就支持一下吧点赞9打赏 分享QQ空间微博QQ好友复制链接收藏如何下载资源?您可以通过搜索或浏览分类列表来找到您期望下载的资源。随后点击资源介绍页右侧的下载链接按钮,依据提示信息进行操作即可。是否需要充值才能下载?大部分资源可积分免费下载,为了维持网站的运行小部分资源须付费才能下载。下载的资源是否有版权?本站提供的下载资源均为网络搜集,仅供个人学习和交流使用。对于版权问题,请用户自行判断并承担相应责任。 上一篇 子比主题美化 – 子比主题拟态CSS 下一篇 子比主题增加仿mac三个点 评论 抢沙发 请登录后发表评论 登录 注册 暂无评论内容