css
关注
分享
扫一扫
上岸社社长
孩子不懒
展开
-
css动画基础
文章阅读大概需要五分钟，从动画基础原理，常用的动画制作，以及动画优化方面进行讲解 推荐一款动画设计工具 https://www.w3cways.com/css3-animation-tool 矩阵变换 在css中矩阵变换主要包括 transfrom: matrix3d(a00, a10, a20, a30, a01, a11, a21, a31, a02, a12, a22, a32, a03, a13, a23, a33) 和transfrom: matrix3d(a,b,c,d,e,f）来进行计算矩原创 2020-07-12 13:57:54 · 145 阅读 · 0 评论 -
hover选择器需要注意的地方
注意的是： 中间什么都不加 控制子元素； ‘+’ 控制同级元素（兄弟元素）； ‘～’ 控制就近元素； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ...原创 2019-10-23 21:18:34 · 209 阅读 · 0 评论 -
css3选择器之:nth-child(n)和:nth-of-child(n)
:nth-child(n)和:nth-of-child(n) :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 通俗一点的用法就是:nth-child(n) 表示谁的弟n个 比如li:nth-chidl(3) 表示页面的第三个li 也可以这样 .div { width: 100px; height: 100px; background...原创 2019-10-23 20:07:12 · 1194 阅读 · 0 评论 -
css变量声明
*变量名字区分大小写 作用同其他语言的变量 :root { --root-bgc-color :#ccc; } body { background-color:var(--root-bgc-color); } 如果想通过JavaScript设置CSS变量的值，你可以像这样： sidebarElement.style.setProperty(’–left-pos’, ‘200px’); ...原创 2019-10-23 19:46:05 · 119 阅读 · 0 评论 -
CSS3 box-sizing 属性
CSS3 box-sizing 属性 常规盒模型：内容区+padding+border+margin 如果在页面中设置100100的div，那么padding会撑大div，并且border也是在100100的基础上面进行增加像素的。 box-sizing的属性值：content-box默认，同常规的盒模型。 border-box，盒模型的border和padding算作100*100之内 值得注意...原创 2019-10-23 19:23:43 · 209 阅读 · 0 评论 -
grid布局
grid布局 从哪开始 grid-column-start: span 2; grid-column-start: 2; grid-column-start: 4; grid-column-end: span 1; 从哪到哪 grid-row: 2/3; grid-column: 1 /3; 定义行高一般 grid-template-rows:4.5rem auto 4...原创 2019-10-05 21:32:44 · 175 阅读 · 0 评论 -
高级选择器
div[class*="test"] { background:#ffff00; } <-- 含有字母--> div[class*='card-container-'] { position: relative; margin: 40px auto; width: 200px; height: 200px; -webkit-perspective: 500px; ...原创 2019-10-08 21:05:08 · 88 阅读 · 0 评论