Web

前端实现视频转gif图片

效果图 demo 链接: 视频转gif (xushanxiang.com) 思路 video→canvas( drawImage )→ gif.js( addFram )→ gif.js ( render) 关键代码 ctx.drawImage(video, 0, 0, width, height); ...

css实现table响应式布局

效果图 在屏幕视口较为宽时,表现为一个整体 Table 的样式。而当屏幕视口宽度较小时,通过媒体查询,Table 的每一行数据单独拆分为像一个“ Table ” 进行展示。 HTML <table> <caption>...

css实现一个转动的风车

风车有4个叶片,都是三角形,需要创造4个三角形。 如: border: 50px solid #f73833;border-left: 50px solid transparent;border-bottom: 50px solid transparent; 旋转动画效果: @keyframe...

css在悬停时显示附加内容

步骤 创建一个在悬停时显示附加内容的卡片,步骤: 使用 overflow:hidden 在卡片上隐藏垂直溢出的元素。 如果元素悬停(hovered)、聚焦(focused)或其任何后代都聚焦,则使用 :hover 和 :focus-within ...

PHPExcel导入表格(带图片)

PHPExcel 最后一个版本是1.8.1,于2015年发布。该项目于2017年正式弃用,并于2019年永久存档。该项目已多年未维护,不建议使用于新项目上。 所有用户都必须迁移到其直接继承者 PhpSpreadsheet 或其他替代方案。...

css鼠标悬停时文字覆盖图片

下面实现悬停时的图像叠加文字的效果。 步骤 分别对叠加层的顶部和底部条使用 :before 和 :after 伪元素。 设置它们的不透明度 opacity 、缩放变换 transform 和 过渡动画 transition 以产生所需的效果。 ...

css实现带有浮动标题的列表

下面来实现为每个部分创建一个带有浮动标题的列表。 步骤 使用 overflow-y: auto 允许列表容器垂直溢出。 使用内部容器 ( <dl> ) 上的 display: grid 创建包含两列的布局。 将标题 ( <dt> ) ...

CSS中完美的嵌套border radius(圆角)

如果处理不当,带圆角边框(border radius)的嵌套元素可能看起来非常错误。 幸运的是,有一个简单的数学技巧可以让它看起来正确。 您所需要做的就是计算其中一个元素的边界半径以及它们之间的距离。 ...