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 · 115 阅读 · 0 评论 -
hover选择器需要注意的地方
注意的是:中间什么都不加 控制子元素;‘+’ 控制同级元素(兄弟元素);‘~’ 控制就近元素;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ...原创 2019-10-23 21:18:34 · 186 阅读 · 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 · 1140 阅读 · 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 · 92 阅读 · 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 · 171 阅读 · 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 · 140 阅读 · 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 · 71 阅读 · 0 评论