HTML+CSS+JS
关注
分享
扫一扫
HTML+CSS+JS学习实战分享
mouka~
西南石油大学2015级 13-305
展开
-
HTML+CSS绘制一个旋转的盒子
实现原理：在大盒子里面设置两个叠加在一起的盒子（绝对定位，和父盒子一样大小），设置其中一个盒子沿着Y轴旋转180°至背面，css设置背面不可见，然后旋转父盒子实现切换。这里做了一个动画，也可以使用transition来实现。实现代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compa..原创 2022-05-13 11:08:54 · 3422 阅读 · 0 评论 -
HTML+CSS3实现扩散圈动画
实现原理：一个扩散圈整个为一个大盒子 中间有一个小圆点 周围有扩散的圆圈（利用动画来实现，通过控制每个小圆圈的动画延迟来实现扩散效果）代码：!important关键词可以提升样式权重<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=ed...原创 2022-05-11 16:52:38 · 3365 阅读 · 0 评论 -
CSS3 盒子设置border和padding不撑开盒子
普通的盒子模型我们设置border会将盒子撑大<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scal原创 2022-05-05 15:54:09 · 6759 阅读 · 2 评论 -
JS 将对象修改为驼峰命名
案例（主要用于识别“_”下划线）：o_type-------->oTypen_type-------->nTypeexport function ToHump(name) { if (name.includes("_")) { let oarr = name.split("_"); for (let i = 1; i < oarr.length; i++) { oarr[i] = oarr[i].charAt(0).toUpperCase()原创 2022-04-29 11:30:37 · 887 阅读 · 0 评论 -
HTML+CSS设置文字溢出显示省略号（单行/多行）
单行1. 设置文字单行显示white-space: nowrap;2. 设置内容溢出隐藏overflow: hidden;3. 设置文字溢出部门显示省略号text-overflow: ellipsis;多行1. 设置文字可换行显示white-space: nomal;2. 设置文字溢出隐藏overflow: hidden;3. 设置该块中文字可显示五行-webkit-line-clamp: 5;4. 设置或检索伸缩盒子对象的子元...原创 2022-04-24 11:41:20 · 1141 阅读 · 0 评论 -
HTML+CSS清除浮动
为什么需要清除浮动？父级没有高度 子盒子浮动了 影像到下面的布局，我们就应该清除浮动使用场景：假设我们要放很多盒子（不确定数量），这样就无法确定盒子的高度。如下图，设置蓝色盒子高度后，假如子盒子（浮动）数量多换行后显示到盒子外面去了，这样不是我们想要的结果，我们想让蓝色盒子来自适应高度。去掉高度设置（蓝色盒子的高度为0了），没有给父盒子高度，子盒子浮动不占有位置，最后父级盒子的高度就会为0，就会影响下面的标准流盒子。由于浮动元素不再占用原文档流位置，所以它会影响后面的元素排版。清.原创 2022-04-18 17:59:26 · 800 阅读 · 0 评论