一款简易的滚动文字公告代码

一款简易的滚动文字公告代码-青鹿云
一款简易的滚动文字公告代码
此内容为免费资源,请登录后查看
青鹿币0
请勿商业运营、违法使用和传播!仅供研究学习使用!
免费资源
已售 98

一款简易的滚动文字公告自适应代码,博主个人喜欢简约,没做美化,动手能力强的可以自己美化一下

演示

通知:
欢迎光临 青鹿云,青鹿云网址:www.milubk.com,按Ctrl+D收藏本网址!

代码

<link rel="stylesheet" type="text/css" href="static/gonggao.css">
<script type="text/javascript" src="static/iconfont.js"></script>
<section class="section wpcom-modules modules-html-code" id="modules-33">
  <div class="notice wrapper"><span style="float: left;margin-right: 5px;"><i class="wpcom-icon menu-item-icon"><svg aria-hidden="true"><use xlink:href="#icon-tongzhi1"></use></svg></i> <b>通知:</b></span><div class="notice-content"><span><b>欢迎光临 青鹿云,青鹿云网址:www.milubk.com,按Ctrl+D收藏本网址!</b></span></div></div>        </section>
window._iconfont_svg_string_3791183='<svg><symbol id="icon-mianxingtongzhi" viewBox="0 0 1024 1024"><path d="M827 681.6c-1.8-59.4-25.2-108-68.4-145.8l-3.6-3.6V400.8c0-99-59.4-183.6-144-221.4-3.6-52.2-46.8-93.6-99-93.6s-95.4 41.4-99 93.6c-84.6 37.8-144 122.4-144 221.4v131.4l-3.6 3.6c-45 39.6-68.4 91.8-68.4 153 0 14.4 12.6 27 27 27h576c14.4 0 27-12.6 27-27v-7.2zM407.6 760.8c19.8 37.8 59.4 63 104.4 63s84.6-25.2 104.4-63H407.6z" fill="#F74D7A" ></path><path d="M525.9 335.1l21.7 43.9c2.3 4.7 6.7 7.9 11.8 8.5l48.4 7c12.8 1.9 18 17.6 8.6 26.7l-35.1 34.1c-3.7 3.6-5.4 8.7-4.5 13.8l8.3 48.2c2.2 12.8-11.2 22.5-22.7 16.5L519.1 511c-4.6-2.4-10-2.4-14.6 0l-43.3 23c-11.4 6.1-24.9-3.7-22.7-16.5l8.3-48.2c0.8-5.1-0.8-10.2-4.5-13.8l-34.9-34c-9.2-9-4.2-24.9 8.6-26.7l48.4-7c5.1-0.8 9.5-4 11.8-8.5l21.7-43.9c5.8-11.9 22.3-11.9 28-0.3z" fill="#FFFFFF" ></path></symbol><symbol id="icon-tongzhi1" viewBox="0 0 1024 1024"><path d="M584.704 998.4H439.296c-228.352 0-413.696-185.344-413.696-413.696V439.296c0-228.352 185.344-413.696 413.696-413.696h145.408c228.352 0 413.696 185.344 413.696 413.696v145.408c0 228.352-185.344 413.696-413.696 413.696z" fill="#FF9A23" ></path><path d="M998.4 584.704V439.296c0-228.352-185.344-413.696-413.696-413.696H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 228.352 185.344 413.696 413.696 413.696h145.408c13.312 0 26.624-1.024 38.912-2.048 162.816-61.44 294.912-185.344 368.64-342.016 4.096-22.528 6.144-46.08 6.144-69.632z" fill="#FF9A23" ></path><path d="M584.704 25.6H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 158.72 90.112 296.96 222.208 366.592 45.056 10.24 91.136 16.384 139.264 16.384C715.776 967.68 983.04 700.416 983.04 371.712c0-17.408-1.024-34.816-2.048-51.2-51.2-171.008-208.896-294.912-396.288-294.912z" fill="#FF9F23" ></path><path d="M911.36 371.712c0-91.136-23.552-177.152-64.512-252.928-71.68-58.368-161.792-93.184-261.12-93.184H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 78.848 22.528 153.6 61.44 216.064 84.992 59.392 188.416 94.208 300.032 94.208C675.84 896 911.36 660.48 911.36 371.712z" fill="#FFA423" ></path><path d="M439.296 25.6C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 22.528 2.048 44.032 5.12 65.536 82.944 105.472 210.944 173.056 356.352 173.056C636.928 823.296 839.68 620.544 839.68 370.688 838.656 240.64 783.36 122.88 695.296 40.96c-34.816-9.216-71.68-15.36-109.568-15.36H439.296z" fill="#FFAA23" ></path><path d="M544.768 25.6H439.296C210.944 25.6 25.6 210.944 25.6 439.296v51.2c52.224 158.72 205.824 271.36 385.024 260.096 189.44-11.264 343.04-163.84 355.328-353.28 11.264-163.84-82.944-308.224-221.184-371.712z" fill="#FFAF23" ></path><path d="M391.168 375.808m-308.224 0a308.224 308.224 0 1 0 616.448 0 308.224 308.224 0 1 0-616.448 0Z" fill="#FFB423" ></path><path d="M155.648 374.784a235.52 235.52 0 1 0 471.04 0 235.52 235.52 0 1 0-471.04 0Z" fill="#FFB923" ></path><path d="M444.416 328.704c7.168-36.864 43.008-61.44 79.872-54.272 28.672 5.12 50.176 27.648 54.272 56.32 53.248 25.6 91.136 82.944 91.136 150.528l3.072 56.32s0 16.384 9.216 41.984c18.432 0 33.792 15.36 33.792 34.816 0 18.432-15.36 33.792-34.816 33.792H340.992c-18.432 0-33.792-15.36-33.792-33.792 0-18.432 15.36-33.792 33.792-33.792h1.024c8.192-25.6 8.192-41.984 8.192-41.984l-3.072-56.32c0-70.656 43.008-130.048 97.28-153.6z m135.168 354.304c0 37.888-30.72 67.584-68.608 67.584s-68.608-30.72-68.608-68.608l137.216 1.024z" fill="#FFFFFF" opacity=".8" ></path></symbol><symbol id="icon-tongzhi" viewBox="0 0 1024 1024"><path d="M504.32 514.7136m-450.816 0a450.816 450.816 0 1 0 901.632 0 450.816 450.816 0 1 0-901.632 0Z" fill="#FF4D7C" ></path><path d="M650.1376 382.8224c-10.3424 0-20.6336-4.4032-27.8016-12.9536-12.8512-15.36-10.8032-38.1952 4.5056-51.0464l98.304-82.2784c15.36-12.8512 38.1952-10.8032 51.0464 4.5056 12.8512 15.36 10.8032 38.1952-4.5056 51.0464l-98.304 82.2784a35.95264 35.95264 0 0 1-23.2448 8.448zM748.4416 782.2336c-8.192 0-16.4352-2.7648-23.2448-8.448l-98.304-82.2784c-15.36-12.8512-17.3568-35.6864-4.5056-51.0464 12.8512-15.36 35.6864-17.3568 51.0464-4.5056l98.304 82.2784a36.21888 36.21888 0 0 1-23.296 64zM815.5136 544.3584h-137.1648a36.2496 36.2496 0 0 1 0-72.4992h137.1648a36.2496 36.2496 0 0 1 36.2496 36.2496c-0.0512 20.0704-16.2816 36.2496-36.2496 36.2496zM504.7808 247.0912l-166.912 110.1312c-10.5984 7.68-23.3472 11.776-36.4544 11.776H231.3728c-34.4064 0-62.3104 27.904-62.3104 62.3104v161.28c0 34.4064 27.904 62.3104 62.3104 62.3104h92.3136c12.9536 0 25.6 4.0448 36.1472 11.5712l145.1008 93.1328c29.0816 20.736 69.4784-0.0512 69.4784-35.7888V282.7264c0.0512-35.84-40.5504-56.6272-69.632-35.6352z m-158.464 324.0448a36.2496 36.2496 0 0 1-72.4992 0v-122.88a36.2496 36.2496 0 0 1 72.4992 0v122.88z" fill="#FFFFFF" ></path></symbol></svg>',function(c){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var n,i,l,a,o,d=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}n=function(){var t,e=document.createElement("div");e.innerHTML=c._iconfont_svg_string_3791183,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(n,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),n()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(l=n,a=c.document,o=!1,h(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,s())})}function s(){o||(o=!0,l())}function h(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}}(window);

.icon-svg, .wpcom-icon svg {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
}


@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.notice-content {
    flex: 1;
    overflow: hidden;
}

.notice-content span {
    display: block;
    width: 1300px;
    white-space: nowrap;
    animation: marquee 15s linear infinite;
    padding-left: 100%;
    padding-right: 90%;
}

引用js、css即可,icon图标参照iconfont图标库更换

© 版权声明
THE END
点赞606 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容