🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

0 篇文章

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 动画 - 高度变化时的过渡效果

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='