标题:CSS新特性之2D,3D和动画 | 作者: catfish | 时间:2020年01月11日
暂无法显示图片

css选择器

id选择器 #

类选择器 .

后代选择器 空格

子元素选择器 >

交集选择器  选择器1选择器2

并集选择器   选择器1,选择器2

相邻兄弟选择器 选择器1+选择器2(紧跟在其后那个标签)

通用兄弟选择器  选择器1`选择器2(后面的所有同级标签)

属性选择器 [attribute]

CSS 2D模块transform

rotate(45deg) 默认围绕着z轴旋转。rotateX(45deg)(左手);rotateY(45deg);rotateZ(45deg);

平移translate(100px, 0)

缩放scale(1, 1.5)

综合transform: rotate(45deg) translate(100px, 0px) scale(1.5);

CSS 3D模块

和透视一样。想看到某个元素的3d效果,只需要给它的父元素添加一个transform-style属性,然后设置为preserve-3d即可

perspective: 500px; 近大远小

opacity:0.5; 透明度

css动画

基本使用

1,告诉系统执行哪个动画

animation-name: lnj;            // 随便写

2,告诉系统我们自己需要创建一个叫做lnj名称的动画。

@keyframes lnj{
	from{
		margin-left: 0;
	}
	to{
		margin-left:500px;
	}
}

3,告诉系统动画执行的时长。

animation-duration: 2s;

动画模块的其他属性

animation-timing-function时间函数,用法和过渡一样。animation-delay延迟animation-iteration-count: infinte;执行次数animation-play-state: running(默认), pause(暂停)执行状态animation-direciton: normal, alternate(往返);执行方向

多过程运动

@keyframes lnj{
	0%{
            top: 0;
            left: 0;
	}
	1%{
            top: 0;
            left: 300;
	}
	100%{
            top: 300;
            left: 300;
	}
}

 

我要评论

没有登录?请先登录后再评论

最新评论

暂无人评论,来抢个沙发吧!