ME!
链滴
CSS
0 篇文章CSS 视觉 - :is/:matches/:any 选择器
CSS 交互 - 信息提示
CSS 其他 - 自定义变量
CSS 其他 - 计数器
CSS 其他 - Cacl()
CSS 交互 - 可切换的开关
CSS 交互 - 相邻兄弟视觉弱化
CSS 交互 - 当鼠标移上或聚焦时弹出菜单
CSS 交互 - 跟踪光标的渐变效果
CSS 交互 - 子元素选中后改变父元素的样式
2019-08-15 描述当表单中的任何元素被选中时，修改该表单的样式。HTML<divclass="focus-within"><form><labelfor="given_name">GivenName:</label><inputid="given_name"type="text"/><br/><labelfor="family_name">FamilyName:</label><inputid
CSS 交互 - 选不中我
2019-08-14 描述让内容无法被选中。HTML<p>Youcanselectme.</p><pclass="unselectable">Youcan'tselectme!</p>CSS.unselectable{user-select:none;}DemoSeethePen<ahref='https://codepen.io/vanessa219/pen/KKPVJVZ/'>Disablesel
CSS 动画 - 下划线动画
CSS 动画 - 阴影盒子的动画效果
CSS 动画 - 高度变化时的过渡效果
2019-08-09 描述在一个元素高度不确定的情况下，为其做一个高度从 0 到 auto 的过渡效果。HTML<divclass="trigger">Hovermetoseeaheighttransition.<divclass="el">content</div></div>CSS.el{transition:max-height0.5s;overflow:hidden;max-height:0;}.tr
CSS 动画 - 简单的变量
2019-08-08 描述为 transition-timing-function 属性构建比 ease，ease-in，ease-out 和 ease-in-out 更强大的可再次使用的变量。HTML<divclass="easing-variables">Hover</div>CSS:root{/*Placevariablesinheretouseglobally*/}.easing-variables{--
CSS 动画 - 🍩式的旋转
2019-08-07 描述创建一个 🍩 式的旋转，以其用于表示内容正在加载中。HTML<divclass="donut"></div>CSS@keyframesdonut-spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.donut{display:inline-block;border:4pxsolidrgba(0,0,0,
CSS 动画 - 按钮边框动画
2019-08-06 描述当鼠标移上时，创建一个边框的动画。HTML<divclass="button-border"><buttonclass="button">Submit</button></div>CSS.button{background-color:#c47135;border:none;color:#ffffff;outline:none;padding:12px40px10px;pos
CSS 视觉 - 斑马条纹列表
2019-08-05 描述创建一个背景色交替的条纹列表，这对于区分使用行来展示内容的兄弟节点很有用。HTML<ul><li>Item01</li><li>Item02</li><li>Item03</li><li>Item04</li><li>Item05</li></ul>CSSli:nth-child(odd){background-color:#eee;}DemoSeethePen<ahref=
CSS 视觉 - 三角形
2019-08-04 描述使用纯 CSS 创建一个三角形。HTML<divclass="triangle"></div>CSS.triangle{width:0;height:0;border-top:20pxsolid#333;border-left:20pxsolidtransparent;border-right:20pxsolidtransparent;}DemoSeethePen<ahref='