Sonder
CSS 文字向前滚动轮播
2021-07-14
0条评论
5k次阅读
CSS
<br> See the Pen <a href="https://codepen.io/haiwar/pen/MWmJvEJ"><br> 文字滚动轮播 by Sonder (<a href="https://codepen.io/haiwar">@haiwar</a>)<br> on <a href="https://codepen.io">CodePen</a>.<br></div> <!----> <!----></div></div> <div class="sidebar"><div class="sticky-block-box post_tree" style="top:0;"><ul class="menu_content"></ul></div></div></div> <div class="main-bottom-container"><div class="page"><a href="/post/245?cid=61&index=true" aria-controls="发表于2021-07-12 14:29:57" class="next cell poptip--top"><i class="fa fa-angle-left"></i><span>px转rem</span></a> <a href="/post/243?cid=61&index=true" aria-controls="发表于2021-07-12 14:29:57" class="prev cell poptip--top"><span>element-ui省市联动下拉框</span><i class="fa fa-angle-right"></i></a></div> <div class="clear"></div> <div class="article_list"><p class="article_list_title">📒 相关文章</p> <ul class="like_article"><li class="fit"><a href="/post/162?cid=61&index=true" title="发表于2020-09-24 23:28:29" class="like_article_link"><span class="me-3 badge badge-1">1</span> <span class="like_article_title">CSS 三栏布局，让底部固定下方</span></a></li><li class="fit"><a href="/post/295?cid=61&index=true" title="发表于2022-01-08 16:19:45" class="like_article_link"><span class="me-3 badge badge-2">2</span> <span class="like_article_title">css 头部底部固定，中间滑动</span></a></li><li class="fit"><a href="/post/62?cid=61&index=true" title="发表于2020-02-22 11:41:24" class="like_article_link"><span class="me-3 badge badge-3">3</span> <span class="like_article_title">CSS 故障艺术</span></a></li><li class="fit"><a href="/post/139?cid=61&index=true" title="发表于2020-07-16 19:18:27" class="like_article_link"><span class="me-3 badge badge-4">4</span> <span class="like_article_title">分享一个好看的搜索框样式</span></a></li><li class="fit"><a href="/post/490?cid=61&index=true" title="发表于2024-07-14 18:17:20" class="like_article_link"><span class="me-3 badge badge-5">5</span> <span class="like_article_title">实现一个直击用户灵魂的 Loading 效果（附源码）</span></a></li><li class="fit"><a href="/post/131?cid=61&index=true" title="发表于2020-06-24 18:03:50" class="like_article_link"><span class="me-3 badge badge-6">6</span> <span class="like_article_title">拒绝JavaScript，这三个CSS技巧你一定用的上</span></a></li><li class="fit"><a href="/post/97?cid=61&index=true" title="发表于2020-04-06 17:11:07" class="like_article_link"><span class="me-3 badge badge-7">7</span> <span class="like_article_title">bootstrap框架返回顶部效果和样式</span></a></li><li class="fit"><a href="/post/186?cid=61&index=true" title="发表于2021-01-06 10:37:15" class="like_article_link"><span class="me-3 badge badge-8">8</span> <span class="like_article_title">CSS 类似中奖名单的上下滚动特效</span></a></li><li class="fit"><a href="/post/245?cid=61&index=true" title="发表于2021-07-14 16:54:57" class="like_article_link"><span class="me-3 badge badge-9">9</span> <span class="like_article_title">px转rem</span></a></li><li class="fit"><a href="/post/130?cid=61&index=true" title="发表于2020-06-24 11:10:23" class="like_article_link"><span class="me-3 badge badge-10">10</span> <span class="like_article_title">js实现网页全屏切换（平滑过渡），鼠标滚动切换</span></a></li></ul></div></div></div></section> <section id="comment-list" class="wrapper overbox"><div class="box inner overbox-check"><div class="comment_content"><h2 class="align-center" style="margin-top: 10px;">💬 COMMENT</h2> <!----> <hr> <form action="#" method="post"><div class="form-userinfo"><div class="field half first"><label for="name">Name</label><input name="name" id="name" type="text" placeholder="昵称" value=""></div> <div class="field half email-box"><label for="email">Email</label><input name="email" id="email" type="email" placeholder="输入QQ邮箱会自动获取你的QQ头像" value=""> <img class="avatar-email" style="display:none;"></div></div> <div><label for="message">Message</label><textarea name="message" id="message" rows="6" placeholder="请填写正确的邮箱，以便于更好的与您取得联系，否则您的留言可能会被删除！"></textarea> <div class="iconList"></div></div> <div class="tip">🦄 支持markdown语法</div> <div class="actions align-center"><input value="发送" type="button" class="button special"></div></form></div> <div id="comments" class="m-cmmt"><div class="cmmts"></div></div></div></section></div> <div data-v-351ae5ae><section id="four" class="wrapper style3" style="background-image:url('https://picsum.photos/1920/1080');" data-v-17378ffe data-v-351ae5ae><div class="inner" data-v-17378ffe><header class="align-center" data-v-17378ffe><h2 data-v-17378ffe>👋友</h2> <ul class="actions" data-v-17378ffe></ul></header></div></section> <footer id="footer" class="wrapper" data-v-351ae5ae><div class="inner" data-v-351ae5ae><div class="copyright" data-v-351ae5ae><h4 data-v-351ae5ae></h4> <h5 data-v-351ae5ae></h5></div> <!----> <p class="heart" data-v-351ae5ae></p></div></footer></div> <!----></div></div></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i){return {layout:"default",data:[{seoTitle:d,post_data:{content:"\u003Ciframe height=\"300\" style=\"width: 100%;\" scrolling=\"no\" title=\"文字滚动轮播\" src=\"https:\u002F\u002Fcodepen.io\u002Fhaiwar\u002Fembed\u002Fpreview\u002FMWmJvEJ?default-tab=html%2Cresult\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\"\u003E\u003Cbr\u003E See the Pen \u003Ca href=\"https:\u002F\u002Fcodepen.io\u002Fhaiwar\u002Fpen\u002FMWmJvEJ\"\u003E\u003Cbr\u003E 文字滚动轮播 by Sonder (\u003Ca href=\"https:\u002F\u002Fcodepen.io\u002Fhaiwar\"\u003E@haiwar\u003C\u002Fa\u003E)\u003Cbr\u003E on \u003Ca href=\"https:\u002F\u002Fcodepen.io\"\u003ECodePen\u003C\u002Fa\u003E.\u003Cbr\u003E",title:"CSS 文字向前滚动轮播",desc:b,create_time:"2021-07-14",img:"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002FHaiwar\u002Fimages\u002Fimg\u002F20210817111548.png",look:"5k",cate_name:e,cid:a,keywords:b,is_md:0,metaDescription:"\u003Ciframe height=\"300\" style=\"width: 100%;\" scrolling=\"no\" title=\"文字滚动轮播\" src=\"https:\u002F\u002Fcodepen.io\u002Fhaiw..."},prev:{title:"element-ui省市联动下拉框",id:243,create_time:"发表于2021-07-12 14:29:57",pic:b},next:{title:f,id:g,create_time:h,pic:b},like_article:[{create_time:"发表于2020-09-24 23:28:29",id:162,cid:a,title:"CSS 三栏布局，让底部固定下方",keywords:"css,三栏布局"},{create_time:"发表于2022-01-08 16:19:45",id:295,cid:a,title:"css 头部底部固定，中间滑动",keywords:"移动端布局"},{create_time:"发表于2020-02-22 11:41:24",id:62,cid:a,title:"CSS 故障艺术",keywords:e},{create_time:"发表于2020-07-16 19:18:27",id:139,cid:a,title:"分享一个好看的搜索框样式",keywords:"搜索框样式"},{create_time:"发表于2024-07-14 18:17:20",id:490,cid:a,title:"实现一个直击用户灵魂的 Loading 效果（附源码）",keywords:b},{create_time:"发表于2020-06-24 18:03:50",id:131,cid:a,title:"拒绝JavaScript，这三个CSS技巧你一定用的上",keywords:b},{create_time:"发表于2020-04-06 17:11:07",id:97,cid:a,title:"bootstrap框架返回顶部效果和样式",keywords:b},{create_time:"发表于2021-01-06 10:37:15",id:186,cid:a,title:"CSS 类似中奖名单的上下滚动特效",keywords:"中奖名单"},{create_time:h,id:g,cid:a,title:f,keywords:b},{create_time:"发表于2020-06-24 11:10:23",id:130,cid:a,title:"js实现网页全屏切换（平滑过渡），鼠标滚动切换",keywords:"全屏切换,滚动一页,鼠标滚动"}]}],fetch:{},error:c,state:{config:{seo_name:d},links:{},hotListData:[],articlePass:c,articleByAbout:c},serverRendered:true,routePath:"\u002Fpost\u002F244",config:{_app:{basePath:i,assetsPath:i,cdnURL:"https:\u002F\u002Fcdn.musclewiki.cn\u002Fnuxt\u002F"}}}}(61,"",null,"Sonder","CSS","px转rem",245,"发表于2021-07-14 16:54:57","\u002F"));</script><script src="https://cdn.musclewiki.cn/nuxt/bcdd776.js" defer></script><script src="https://cdn.musclewiki.cn/nuxt/c0b1d36.js" defer></script><script src="https://cdn.musclewiki.cn/nuxt/1712727.js" defer></script><script src="https://cdn.musclewiki.cn/nuxt/948d1bc.js" defer></script><script src="https://cdn.musclewiki.cn/nuxt/cc2b11c.js" defer></script><script src="https://cdn.musclewiki.cn/nuxt/bee2152.js" defer></script> </body> </html>