Sonder
CSS 小猫咪特效
2021-04-23
0条评论
3.3k次阅读
CSS
<br> See the Pen <a href="https://codepen.io/haiwar/pen/bGgOWzG">bGgOWzG</a> by Sonder<br> (<a href="https://codepen.io/haiwar">@haiwar</a>) 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/227?cid=61&index=true" aria-controls="发表于2021-04-21 18:02:18" class="next cell poptip--top"><i class="fa fa-angle-left"></i><span>使用Wireshark抓包获取QQ好友的IP地址</span></a> <a href="/post/225?cid=61&index=true" aria-controls="发表于2021-04-21 18:02:18" class="prev cell poptip--top"><span>js修改全站主题颜色</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/245?cid=61&index=true" title="发表于2021-07-14 16:54:57" class="like_article_link"><span class="me-3 badge badge-2">2</span> <span class="like_article_title">px转rem</span></a></li><li class="fit"><a href="/post/114?cid=61&index=true" title="发表于2020-04-22 11:00:16" class="like_article_link"><span class="me-3 badge badge-3">3</span> <span class="like_article_title">重新回顾@media screen</span></a></li><li class="fit"><a href="/post/406?cid=61&index=true" title="发表于2022-12-29 15:14:56" class="like_article_link"><span class="me-3 badge badge-4">4</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-5">5</span> <span class="like_article_title">分享一个好看的搜索框样式</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-6">6</span> <span class="like_article_title">js实现网页全屏切换（平滑过渡），鼠标滚动切换</span></a></li><li class="fit"><a href="/post/439?cid=61&index=true" title="发表于2023-05-10 15:26:58" class="like_article_link"><span class="me-3 badge badge-7">7</span> <span class="like_article_title">nav导航栏每个子元素居中对齐，两边留边距</span></a></li><li class="fit"><a href="/post/239?cid=61&index=true" title="发表于2021-06-30 14:10:55" class="like_article_link"><span class="me-3 badge badge-8">8</span> <span class="like_article_title">文字溢出边缘羽化 CSS Mask 实现</span></a></li><li class="fit"><a href="/post/115?cid=61&index=true" title="发表于2020-04-22 21:54:53" class="like_article_link"><span class="me-3 badge badge-9">9</span> <span class="like_article_title">按钮效果：一闪而过</span></a></li><li class="fit"><a href="/post/122?cid=61&index=true" title="发表于2020-05-23 10:06:45" class="like_article_link"><span class="me-3 badge badge-10">10</span> <span class="like_article_title">基于bootstrap的面板选中效果</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){return {layout:"default",data:[{seoTitle:d,post_data:{content:"\u003Ciframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"bGgOWzG\" src=\"https:\u002F\u002Fcodepen.io\u002Fhaiwar\u002Fembed\u002FbGgOWzG?height=265&theme-id=dark&default-tab=css,result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\"\u003E\u003Cbr\u003E See the Pen \u003Ca href=\"https:\u002F\u002Fcodepen.io\u002Fhaiwar\u002Fpen\u002FbGgOWzG\"\u003EbGgOWzG\u003C\u002Fa\u003E by Sonder\u003Cbr\u003E (\u003Ca href=\"https:\u002F\u002Fcodepen.io\u002Fhaiwar\"\u003E@haiwar\u003C\u002Fa\u003E) on \u003Ca href=\"https:\u002F\u002Fcodepen.io\"\u003ECodePen\u003C\u002Fa\u003E.\u003Cbr\u003E",title:"CSS 小猫咪特效",desc:b,create_time:"2021-04-23",img:"https:\u002F\u002Fgitee.com\u002Fliuhaier\u002Fimages\u002Fraw\u002Fmaster\u002Fimg\u002F20210423112302.png",look:"3.3k",cate_name:"CSS",cid:a,keywords:b,is_md:0,metaDescription:"\u003Ciframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"bGgOWzG\" src=\"https:\u002F\u002Fcodepen.io\u002Fhai..."},prev:{title:"js修改全站主题颜色",id:225,create_time:"发表于2021-04-21 18:02:18",pic:b},next:{title:"使用Wireshark抓包获取QQ好友的IP地址",id:227,create_time:"发表于2021-05-07 13:26:28",pic:"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002FHaiwar\u002Fimages\u002Fimg\u002F20210507131621.png"},like_article:[{create_time:"发表于2020-09-24 23:28:29",id:162,cid:a,title:"CSS 三栏布局，让底部固定下方",keywords:"css,三栏布局"},{create_time:"发表于2021-07-14 16:54:57",id:245,cid:a,title:"px转rem",keywords:b},{create_time:"发表于2020-04-22 11:00:16",id:114,cid:a,title:"重新回顾@media screen",keywords:"自适应"},{create_time:"发表于2022-12-29 15:14:56",id:406,cid:a,title:"使用CSS实现微信朋友圈的九宫格图片自适应",keywords:b},{create_time:"发表于2020-07-16 19:18:27",id:139,cid:a,title:"分享一个好看的搜索框样式",keywords:"搜索框样式"},{create_time:"发表于2020-06-24 11:10:23",id:130,cid:a,title:"js实现网页全屏切换（平滑过渡），鼠标滚动切换",keywords:"全屏切换,滚动一页,鼠标滚动"},{create_time:"发表于2023-05-10 15:26:58",id:439,cid:a,title:"nav导航栏每个子元素居中对齐，两边留边距",keywords:"css,导航栏"},{create_time:"发表于2021-06-30 14:10:55",id:239,cid:a,title:"文字溢出边缘羽化 CSS Mask 实现",keywords:b},{create_time:"发表于2020-04-22 21:54:53",id:115,cid:a,title:"按钮效果：一闪而过",keywords:"一闪而过样式"},{create_time:"发表于2020-05-23 10:06:45",id:122,cid:a,title:"基于bootstrap的面板选中效果",keywords:"bootstrap,css,选中"}]}],fetch:{},error:c,state:{config:{seo_name:d},links:{},hotListData:[],articlePass:c,articleByAbout:c},serverRendered:true,routePath:"\u002Fpost\u002F226",config:{_app:{basePath:e,assetsPath:e,cdnURL:"https:\u002F\u002Fcdn.musclewiki.cn\u002Fnuxt\u002F"}}}}(61,"",null,"Sonder","\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>