动画transform
- transform:translate()位移
- translateX水平位移
- translateY垂直位移
- translate(500px,600px)水平500500px,垂直600px
- transform:scale()缩放，
大于1的是放大，小于1的是缩小- transform:scaleX()宽缩放
- transform:scale()高缩放
- transform:scale(0.5)总体缩小0.5倍
- transform:rotate()旋转，单位deg
- transform:rotateX(45deg)模仿小时候玩单杠
- transform:rotateY()模仿钢管舞
- transform:rotate(45deg)模仿大风车
- transform:skew()倾斜，单位deg
- transform:skewY(45deg)沿着Y倾斜45度
- transform:skewX(45deg)沿着X倾斜45度
- transform:skew(45deg,45deg)沿着XY轴倾斜转换
- transform-origin：x,y; 改变元素变形时候的作用原点。
- 水平方向：left、 center、 right；
- 垂直方向：top、center、bottom;
过渡动画transition
+ 第一个值是动画的属性，可以为all代表所有属性
+ 第二个值是动画时间
+ 第三个是运动曲线，如linear匀速和ease先慢后快再慢，默认为ease
+ 第四个是延迟的时间
transition:height 2s linear 2s;
帧动画animation
+ 第一个值是动画名
+ 第二个是动画时间
+ 第三个是动画运动曲线
+ 第四个是延迟
+ 第五个是循环次数，可以为infinite无限循环或forwards到最后一帧停下，或both
.box1{
width:100px;
height: 100px;
background-color: lightpink;
animation: run 2s linear infinite;
animation: run 2s linear forwards;
/* forwards让动画停留在最后一帧 */
/* backwards如果动画中有延迟，想要迅速以第一帧开始，可以加一个backwards属性 */
/* both是forwards和backwards的结合 */
}
@keyframes run{
0%{
transform:translate(0,0);
}
25%{
transform:translate(400px,0);
}
50%{
transform:translate(400px,400px);
}
75%{
transform:translate(0,400px);
}
100%{
transform:translate(0,0);
}
单位vw
100vw代表的是整个屏幕的宽 1vw代表的是屏幕宽的百分之1
翻转卡片
backface-visibility: hidden;的作用是将反面也就是rotateY(360deg)的隐藏
<!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-scale=1.0">
<title>旋转</title>
</head>
<style>
b {
display: inline-block;
width: 100px;
height: 200px;
position: relative;
}
.all {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 200px;
background: rosybrown;
transition: all 1.2s;
backface-visibility: hidden;
}
#a2{
transform: rotateY(180deg);
}
#aa:hover #a1 {
transform: rotateY(180deg);
}
#aa:hover #a2 {
transform: rotateY(360deg);
}
</style>
<body>
<b id="aa">
<div id="a1" class="all">正</div>
<div id="a2" class="all">反</div>
</b>
</body>
</html>
css选择器
has
- 根据存在的子，操作父元素
<div class="par">
父级文字
<div class="children">子文字</div>
</div>
.par:has(.children) {
color: red;
}
.children {
color: gray;
}
css变量
- 定义的时候，以--开头
- 后代可以使用，自身、兄弟、父级不可使用
<head>
<meta charset="UTF-8">
<title>css变量</title>
<style>
.box {
--color: red;
--size: 10px;
color: var(--colorA);
/*
color: var(--colorA);不生效，因为使用了子集的变量
color: var(--color);会生效;，因为使用的是自身的变量
*/
}
.a {
color: var(--color);
font-size: var(--size);
--colorA: blue;
}
.b {
color: var(--colorA);
}
</style>
</head>
<body>
<div class="box">
父
<div class="a">测试1
<div style="color:var(--colorA)">孙</div>
</div>
<div class="b">测试2</div>
</div>
</body>
css函数
var
- 参考上面的css变量
attr
- 使用attr获取指向的行间属性
- 获取不到就为空
<!-- 下面以conten为例，将attr的值填充到before中,span没有获取到对应的值，所以不展示内容 -->
<head>
<meta charset="UTF-8">
<title>attr</title>
<style>
.a::before {
content: attr(href);
}
div::before{
content: attr(name);
}
span::before{
content: attr(key);
}
</style>
</head>
<body>
<a href="我是链接" class="a"></a>
<div name="div的name"></div>
<span name="span值"></span>
</body>
calc
- 计算属性
- 运算符左右两侧以空格隔开，否则不生效
<head>
<style>
div{
font-size: calc(100px - 10px);
}
</style>
</head>
<body>
<div>哈哈</div>
</body>
max
- 选出最大值，每个值以，间隔
<!-- div的字体大小为30px -->
<style>
div {
font-size: max(10px, 20px, 30px)
}
</style>
min
- 同上，只不过是最小值
