您正在使用 IPV4 [44.221.73.157] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 七夕节 056
2025年 高 考 357
2025年 元 旦 200
2025年 春 节 228
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
纯 CSS 实现多标签自动显示超出数量的思路详解
内容摘要: divclass='wrap'divclass='con'style='--num:7'aclass='tag'HTML/aaclass='tag'CSS/aaclass='tag'JavaScript/aaclass='tag'Flutter/aaclass='tag'Vue/aaclass='tag'React/aaclass='tag'Svelte/a......
<divclass="wrap">

<divclass="con"style="--num:7">

<aclass="tag">HTML</a>

<aclass="tag">CSS</a>

<aclass="tag">JavaScript</a>

<aclass="tag">Flutter</a>

<aclass="tag">Vue</a>

<aclass="tag">React</a>

<aclass="tag">Svelte</a>

</div>

</div>

html,body{

font-family:-apple-system,"BlinkMacSystemFont",sans-serif;

margin:0;

height:100%;

display:flex;

justify-content:center;

flex-direction:column;

align-items:center;

background:#fff;

gap:20px;

accent-color:#9747FF;

}

.wrap{

width:300px;

display:flex;

align-items:center;

padding:15px;

outline:2pxsolid#9747FF;

gap:5px;

overflow:hidden;

}

.con{

position:relative;

display:flex;

gap:5px;

padding:5px;

overflow:hidden;

counter-reset:num;

animation:check;

animation-timeline:scroll(xself);

margin-right:-46px;

}

@keyframescheck{

from,to{

margin-right:0;

-webkit-mask:linear-gradient(toright,#fffcalc(100%-30px),transparent);

}

}

.wrap::after{

content:"+"counter(num);

padding:.2em.5em;

background-color:#FFE8A3;

color:#191919;

border-radius:4px;

}

.tag{

padding:.2em.5em;

background-color:#c49ef5;

color:#fff;

border-radius:4px;

counter-increment:num1;

animation:appear;

animation-timeline:view(inline);

animation-range:contain;

}

@keyframesappear{

from,to{

background-color:#9747FF;

counter-increment:num0;

}

}

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JS实现鼠标点击箭头旋转180度功能

 

下一篇:CSS实现div滑入效果

发布日期:2024/4/16
手机扫二维码直达本页
发布时间:21:55:30
点  击:12
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.5.1 build240527(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....