CSS3基本知识与技术大总结

最新推荐文章于 2023-04-12 10:17:15 发布

zeki豪

最新推荐文章于 2023-04-12 10:17:15 发布

阅读量266

点赞数

分类专栏：基础知识前端文章标签： css3

本文链接：https://blog.csdn.net/EDT777/article/details/105523014

版权

基础知识同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

前端

17 篇文章 0 订阅

订阅专栏

文章目录

属性选择器
结构伪类选择器
伪元素选择器
2D转换 (transform)
动画
3D转换
浏览器私有前缀

属性选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofdsGrxQ-1586874359641)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c4a3b202-15b7-4b51-b276-aff4f6483b2a/Untitled.png)]

  button[disabled]{ //选择的是 即是button 又有disabled 这个属性的元素 权重高于标签选择器
  		cursor: default; 
  }
  button[disabled="disbaled"]{  
  		cursor: default; 
  }
  button[disabled^="dis"]{   //以某个值开通
  		cursor: default; 
  }
  button[disabled$="led"]{   //以某个值结尾
  		cursor: default; 
  }
  button[disabled*="l"]{     //包含某个值
  		cursor: default; 
  }
  
  <button disabled="disabled">按钮</button>

结构伪类选择器

结构伪类选择器

属性选择器和结构伪类选择器和类选择器权重一样 10

在这里插入图片描述

    	ul li:first-child{    //第一个
    	background-color: #pink;
    }
    // nth-child  选择父元素里面的第几个孩子 不管里面孩子是否同种类型
    ul li:nth-child(8){   // 自定义第x个 nth-child(x)
    	background-color: #pink;
    }
    ul li:nth-child(even){   // 偶数
    	background-color: #pink;
    }
    ul li:nth-child(odd){   //奇数
    	background-color: #pink;
    }
    ul li:nth-child(2n){   //自定义公式  n从0开始加 2n偶数 2n+1奇数 
    	background-color: #pink;
    }
    ul li:last-child{     //最后一个
    	background-color: #deeppink;
    }
    
    <ul>
    	<li>123</li>
    	<li>123</li>	
    	<li>123</li>
    	<li>123</li>
    	<li>123</li>
    	<li>123</li>
    	<li>123</li>	
    </ul>

of-type

    div span:nth-child(2){//必须写2才能选择 写1无效
    		background-color:#pink;    
    }
    
    div span:first-of-type {  //指定类型元素第一个
    		background-color: #purple;
    }
    div span:nth-of-type(n) {  //指定类型元素第n个  也可n作为公式 
    		background-color: #purple;
    }
    div span:last-of-type {  //指定类型元素最后一个
    		background-color: #purple;
    }
    <div>
    	<p>我是一个屁</p>
    	<span>我是span</span>
    	<span>我是span</span>
    	<span>我是span</span>
    </div>

- ul 里面只允许放 li  所以nth-child 和 nth-of-type 就一样了

伪元素选择器

伪元素选择器

在这里插入图片描述

    div {
    	width : 300px;
    	height: 300px;
    	border: 1px solid #pink;
    }
    div::before {
    		content: "我"
    		display:inline-block;  //默认是行内元素 没有大小 所以要转化
    		width:100px;
    		height: 100px;
    		background-color: #pink
    }
    div:: after {
    	 content: "小猪佩奇"
    		display:inline-block;
    		width:100px;
    		height: 100px;
    		background-color: #pink
    }
    
    <div>是</div>

定义图标

    @font-face {
                font-family: 'icomoon';
                src: url('fonts/icomoon.eot?7kkyc2');
                src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
                font-weight: normal;
                font-style: normal;
            }
            
            p::after {
                content: '\ea50';  //写对应的编码 则无需复制图标
                position: absolute;
                top: 10px;
                right: 10px;
                font-family: 'icomoon';
            }

2D转换 (transform)

2D转换（transform）

移动 translate

  div {
  		width: 200px;
  		height: 200px;
  		background-color:#pink;
  		transform:translate(100px,100px); 
  		transform:translate(100px,0);  //只移动x
  		transform:translateX(100px);//只移动x
  		transform:translateY(100px);//旋转只移动Y
  }

在这里插入图片描述

旋转 transform: rotate(xxdeg)

    img {
    	width:150px;
    	transform: rotate(45deg);  //顺时针旋转45度
    }

设置旋转中学点 transform-origin : left bottom  //   默认是 50% 50% = center center

缩放 transform: scale(x,y)

    div {
    transform: scale(2,1)  //数字代表倍数
    transform: scale(0.5)
    }

- 综合性写法 transform: translate(x px, x px )  rotate(15deg)  scale(1.2)   (先写位移)

动画

  //定义动画
  @keyframes move(动画名) {
  	
  	0% { //开始  也可以用from
  		transform: translateX(0px);
  }
  	100% { //结束 也可以用to
  		transform: translateX(1000px);
  }
  }
  //动画序列 可以做多个状态变化 ％是总的时间划分
  @keyframes move2(动画名) {
  	
  	0% { 
  		transform: translateX(0px);
  }
  	25% { 
  		transform: translate(1000px,0);
  }
  	50% { 
  		transform: translate(1000px,500px);
  }
  	75% { 
  		transform: translate(0px,500);
  }
  	100% { 
  		transform: translate(0,0);
  }
  }
  
  div {
  	width: 200px;
  	height: 200px;
  	background-color: pink;
  	//调用动画
  	animation-name: move;
  	//持续时间
  	animation-duration: 2s;
  }

动画属性

  div {
  	width:100px;
  	height: 100px;
  	background-color: pink;
  	//动画名称
  	animation-name: move;
  	//持续时间
  	animation-duration: 2s;
  	//运动曲线
  	animation-timing-function:ease; //默认
  	//何时开始 延迟
  	animation-delay: 1s;
  	//播放次数 默认1次
  	animation-iteration-count:infinite;  //无限次
  	//逆向播放 默认是normal
  	animation-direction:alternate; //来回播放
  	//结束后的状态 默认是backward 返回起始状态
  	animation-fill-mode:forwards; //停留在结束状态
  	//动画是否运行或者停止 默认是running
  	animation-play-state:paused; //停止
  }

动画简写 animation: 动画名称持续时间运动曲线何时开始播放次数是否反向动画起始或结束状态 ,

  //前2个属性 不能省略 其他省略就是默认值
  animation: myfirst 2s linear 2s infinite alternate
  animation: move 2s linear 0s 1 alternate forwards;
  animation: move 2s linear 0s 1 alternate forwards;

3D转换

3D移动 translate3d(x,y,z)

  div {
  transform:translateX(100px) translateY(100px) translateZ(100px);
  //trnaslateZ 单位一般跟px
  transform: translate3d(x,y,z); //简写 z是向外移动 为正值
  transform: translate3d(0,100px,100px);
  
  }

透视 perspective (近大远小)

  body {
  		//透视写在被观察元素的父盒子上面
  		perspective: 500px; //数值越小看得越大
  }

在这里插入图片描述

**3D旋转 rotate3d**

    div {
    	transform: rotateX(45deg);
    	transform: rotateY(45deg);
    	transform: rotateZ(45deg);
    	transform: totate3d(x,y,z,deg); //自定义旋转，deg为角度
    	transform: totate3d(1,1,0,deg);//对角线 矢量
    	transform: totate3d(1,0,0,deg);// 沿着x轴
    }

**左手准则:**

- 左手的手拇指指向x轴正方形
- 其余手指弯曲方向就是该元素沿x轴旋转方向

3D呈现 transform-style:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200414223320185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VEVDc3Nw==,size_16,color_FFFFFF,t_70)

浏览器私有前缀

浏览器私有前缀
- -moz- :代表firefox浏览器私有属性
- -ms- ：代表ie浏览器私有属性
- -webkit- : 代表safari,chrome私有属性
- -o- : 代表Opera 私有属性

    -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;

zeki豪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3基本知识与技术大总结

文章目录属性选择器结构伪类选择器伪元素选择器2D转换 (transform)动画3D转换浏览器私有前缀属性选择器属性选择器 button[disabled]{ //选择的是即是button 又有disabled 这个属性的元素权重高于标签选择器 cursor: default; } button[disabled="disbaled"]{ curso...
复制链接

扫一扫

专栏目录