CSS网课回顾

最新推荐文章于 2024-05-26 10:53:52 发布

小-茶

最新推荐文章于 2024-05-26 10:53:52 发布

阅读量228

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_43719948/article/details/103103792

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS精灵技术

精灵图：由很多小的背景图像合成的大图
本质：CSS精灵是一种处理网页背景图像的方式
使用：关键是使用background-position属性精确定位
使用FW准确测量x和y坐标，也就是background-position，y一般都是负的。
PS制作精灵图：
①精灵图上放的都是小的用于装饰的背景图片，插入图片不能往上放。
②精灵图的宽度取决于最宽的那个背景。
③每个图片之间有间隔。
④在精灵图最低端，留一片空隙，方便加其他精灵图。
存储时：
1个存为PSD格式；
1个存为“存储为web所用格式”，选GIF或PNG，勾选“透明度”复选框，存为背景透明的图片。
注：背景图片很少的情况下，没有必要使用精灵技术；背景图片比较多时，建议使用精灵技术。
eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小精灵</title>
    <style>
        span{
            background:url(images/abcd.jpg) no-repeat;//background总的引入一次就可
            float:left;
        }
        span:first-child{
            width: 143px;
            height: 117px;
            background-position: -110px -272px;
        }
        span:nth-child(2){
            width: 109px;
            height: 107px;
            background-position: -251px -562px;
        }
        span:last-child{
            width: 109px;
            height: 110px;
            background-position: -214px -142px;
        }
    </style>
</head>
<body>
<span></span>
<span></span>
<span></span>
</body>
</html>

这是原来的精灵图

这是效果图
在这里插入图片描述

滑动门技术

实现原理：CSS精灵（主要是背景位置）和盒子padding撑开宽度
例如微信官网导航栏，有凸起和凹下去的感觉
一般的经典布局;

<li>
    <a href="#">
        <span>导航栏内容</span>
    </a>
</li>

a要先display:inline-block;转为行内块，千万不能给宽度
span的样式：background:url("") no-repeat right;
注：
①a设置背景左侧，padding撑开合适宽度；
②span设置背景右侧，padding撑开合适宽度。剩下由文字继续撑开宽度；
③a包含span是因为整个导航都是可以点击的。
eg.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
		<style>
		div {
			width: 296px;
			height: 180px;
			margin: 20px auto;
			position: relative; /* 子绝父相 */		
		}
		div:hover::before {  /* 鼠标经过之后 前面插入一个伪元素 */
			content: "";
			width: 100%;
			height: 100%;
			border: 10px solid rgba(255, 255, 255, .3);
			display: block;  /* 伪元素属于行内元素  要转换 */
			position: absolute; /* 要伪元素不占位， 就用绝对定位 */
			top: 0;
			left: 0;
			box-sizing: border-box;  /* 把padding 和 border 都算入 width 里面 */
		}
		</style>
    </head>
    <body>
	<div>
		<img src="images/mi.jpg" height="180" width="296"/>
	</div>
    </body>
</html>

在这里插入图片描述

过渡（CSS3）

transition：要过渡的属性property | 花费时间duration | 运动曲线timing-function | 何时开始delay
duration：单位是秒s，必须写，默认是0
timing-function：默认是ease（渐慢）
delay：一般是0（默认）
在这里插入图片描述
如果有多组属性变化，可以用逗号隔开。
***使用时，transition要写到div里面而不是hover里面，在hover里面写上变化到的最终态。
***如果想要所有的属性都变化过渡，写一个all就可以
eg.transition:all duration;

CSS3新增2D和3D属性及应用

1、定位的盒子居中对齐新写法
在这里插入图片描述
transform:translate(-50%);//走自己盒子宽度的50%；
translate：移动距离，如果是%，不是以父级宽度为准，是以自己的宽度为准。
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .div1{
            height: 300px;
            width: 300px;
            position: relative;
            background-color: pink;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: palevioletred;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>
</body>
</html>

之前的写法：

left:50%;
top:50%;
margin-left: -100px;
margin-top: -100px;

2、缩放 scale(x, y)
在这里插入图片描述
可以对元素进行水平和垂直方向的缩放。
eg. transform:scale(0.8,1);//该元素在水平方向上缩小了20%，垂直方向上不缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
注：scale()的取值默认为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。
3、旋转 rotate(deg)
在这里插入图片描述
可以对元素进行旋转，正值为顺时针，负值为逆时针。
eg. transform:rotate(45deg);
① 当元素旋转以后，坐标轴也跟着发生的转变
② 调整顺序可以解决，把旋转放到最后
③ 注意单位是 deg 度数
4、倾斜 skew(deg, deg)
在这里插入图片描述
eg. transform:skew(30deg,0deg);//把元素水平方向上倾斜30度，垂直方向保持不变。
注：可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
5、设置变形中心点 transform-origin

eg.

div{
	transform-origin: left top;
	transform: rotate(45deg); 
}  /* 改变元素原点到左上角，然后进行顺时旋转45度 */

注：如果是4个角，可以用left、top这些，更精确可以用px。

6、rotateXYZ
transform:rotateXYZ();
rotateX() 沿着x轴立体旋转；
rotateY() 沿着y轴立体旋转；
rotateZ() 沿着z轴立体旋转.
7、透视(perspective)
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
透视原理：近大远小
perspective有两种写法：
① 作为一个属性，设置给父元素，作用于所有3D转换的子元素（一般用这个）
② 作为transform属性的一个值，作用于元素自身
8、translate3d
translateX(x)仅水平方向移动;
translateY(y)仅垂直方向移动;
translateZ(z)直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化(参照物就是perspective属性).
9、3D呈现（transform-style）
flat：所有子元素在 2D 平面呈现
preserve-3d：保留3D空间
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。
一般而言，该声明应用在3D变换的兄弟元素们的父元素上。
10、翻转的图片
backface-visibility:hidden;
属性定义当元素不面向屏幕时是否可见。
hidden->不是正面对向屏幕就隐藏。