大一/web/css

Posted on

Grid

2D排版方式定义

分割

1
2
3
4
5
6
7
8
9
10
11
    grid-template-rows: 100px 100px 50px;#垂直,分割行数值为间隔
grid-template-columns#水平

居中元素
align-items: center;
place-items: center;
间隔
row-gap: 10px

按比例分配 1fr 3fr 1:3分割
4*1fr 等价于 repeat(4,1fr)

子对象

1
2
3
4
5
6
7
8
9
#起始为1
grid-area:1/1/4/3

行首/列首/行尾/列尾
grid-row: 1/4;
grid-column: 1/3;

从哪开始延伸
1/ span 3

动画

使用animate.css

1
2
3
4
5
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

使用class来应用动画
<h1 class="animate__animated animate__bounce">
需要animate__前缀

然后可以在对象中指定参数

1
2
3
4
5
#ele{
    animation-duration: 2s;
    animation-delay: 2s;
    animation-timing-function:
}

关键帧

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
animation-name:mymove;
animation-duration:3s;时间
animation-timing-function:ease-in-out;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}

animation-iteration-count：检索或设置对象动画的循环次数

变量

CSS变量可以访问 DOM

1
2
3
4
5
6
7
8
9
10
:root{ 
  --bg-color: #cccccc;
}
{ 
  color: var(--primary-color, blue);
}
用var来插入变量
自定义属性有前缀--
从而可以快速改变css属性 	
也可以使用 fallback values，以便在自定义属性没有被定义时使用默认值

JS

1
2
3
4
5
6
7
8
9
10
.css("color","blue") (JQuery)
.style
如果样式是通过外部样式表或者通过浏览器的默认样式设置的，则无法通过.style对象访问这些样式
.style.setProperty('--animate-duration', '2s');(DOM对象)
//获取具体内容
var element = document.querySelector('.my-element');
var style = window.getComputedStyle(element).'::before';
var content = style.getPropertyValue('content');

getComputedStyle 方法只能用于获取元素的最终渲染样式，不能用于获取元素的原始样式

效果

1
2
box-shadow:
offset-x | offset-y | blur-radius | spread-radius | color

伪元素

1
2
3
4
5
6
7
8
::before/::after
在前或在后面
.sub_title::after{
    content: "";
    position: absolute;
    border-bottom: 5px solid black;
    height: 30px;
    transform: translate(-50%,50%);}
Shiwei Pan wechat