CSS-transform【上】(2D转换)【看这一篇就够了！！！】

于 2024-09-05 18:36:59 发布
阅读量545 收藏 8
点赞数 19
分类专栏： 前端 HTML CSS 文章标签： css 3d 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zheshiyangyang/article/details/141927498
版权
前端 同时被 3 个专栏收录
47 篇文章 0 订阅
订阅专栏
CSS
26 篇文章 1 订阅
订阅专栏
HTML
11 篇文章 0 订阅
订阅专栏

目录

transform属性

transform的2D变换函数

transform的3D转换属性值

2D转换

translate位移

translate(x,y)

x，y为px长度单位

x，y为%百分比

y值不写，默认为0

translateX(x)与translateY(y)

translate与绝对定位结合实现元素水平垂直居中

scale(x,y)

百分比单位

scaleX(x)与scaleY(y)

skew斜切

rotate旋转

transform-origin

关键字表示

数值表示法

百分比表示法

scale与skew都可以设置其变换原点

2D转换综合写法顺序问题

2D转换实战应用

旋转的三角形

鼠标滑动图片放大

transform属性

  • 在CSS中，利用transform这个属性实现对元素进行旋转、缩放、倾斜或平移
  • transform属性的值可以是none或一个或多个css变换函数
  • transform的值不是none时，元素会创建自己的层叠上下文

transform的2D变换函数

属性值描述实例
translate(x,y)x，y 为长度单位,可以是 px，也可以是百分比%，
x 表示元素在 x 轴上的移动量
y 表示元素在 y 轴上的移动量，如果 y 值不写，则默认为 0，例如 translate(10px)表示 translate(10px,0)		transform:translate(100px,200px)
translateX(x)x 为长度单位，可以是 px，也可以是百分比%
表示元素在平面 x 轴上的位移量		transform:translateX(300px)
translateY(y)y 为长度单位，可以是 px，也可以是百分比%
表示元素在平面 Y 轴上的位移量		transform:translateY(200px)
rotate(ax)ax 代表旋转的角度
正角表示顺时针旋转
负角表示逆时针旋转		transform:rotate(30deg)
scaleX(x)x 数字类型，表示元素在 x 轴上的缩放比transform:scaleX(2)
scaleY(y)y 数字类型，表示元素在 y 轴上的缩放比transform:scaleY(2)
scale(x,y)x 数字类型，表示元素在 x 轴上的缩放比
y 数字类型，表示元素在 y 轴上的缩放比
当只有 x，没有 y 时，则 y 默认为 x，元素在 x，y 轴上均匀缩放		transform:scale(2,3)
skew(ax,ay)ax 表示一个角度，表示沿着 x 横坐标扭曲元素的角度
ay 表示一个角度，表示沿着 y 纵坐标扭曲元素的角度		transform:skew(30deg,30deg)
skewX(ax)ax 表示一个角度，表示沿着 x 横坐标扭曲元素的角度,形成水平拉伸效果transform:skewX(30deg)
skewY(ay)ay 表示一个角度，表示沿着 y 纵坐标扭曲元素的角度，形成垂直拉伸效果transform:skewY(30deg)

transform的3D转换属性值

属性值描述实例
translateZ(z)x 为 px 长度单位
元素在 3D 空间 z 轴方向上的位移量		transform:translateZ(200px)
translate3d(x,y,z)x，y，z 分别为 px 长度单位
x 表示元素在 x 轴坐标上的位移量
y 表示元素在 y 轴坐标上的位移量
z 表示元素在 z 轴坐标上的位移量，该值不能使用百分比，如果使用会被认为是无效属性		transform:translate3d(50px,30px ,50px)
rotateX(ax)表示元素绕X轴旋转一定的角度
ax 表示度数，可以为正，也可以为负		transform:rotateX(30deg);
rotateY(ay)表示元素绕Y轴旋转一定的角度
ay 表示度数，可以为正，也可以为负		transform:rotateY(30deg)
rotateZ(az)表示元素绕Z轴旋转一定的角度
ax 表示度数，可以为正，也可以为负		transform:rotate(30deg);

2D转换

我们先来了解一下2D平面

下图里的x和y轴，就是基于2D平面图形

后期的所有2D动画特效都是在这个2D的平面操作

注意：

  • 元素的左上角坐标为(0，0)
  • (0，0)坐标的右方，为x轴的正方向
  • (0，0)做表的下方，为y轴的正方向

translate位移

css中通过给transform添加translate(x,y)或translateX(x)或translateY(y)来实现元素的水平或垂直位移

属性值描述举例
translate(x,y)实现元素水平和垂直位移量translate(30px,50px)
translateX(x)实现元素水平位移量translateX(30px)
translateY(y)实现元素垂直位移量translateY(50px)

translate(x,y)

  • x和y是长度值length，可以是px，也可以是%百分比
  • x表示元素在x轴上的位移量，正表示向右移动，负表示向左移动
  • y表示元素的y轴上的位移量，正表示向下移动，负表示向上移动
  • 位移和相对定位非常像，位移变形也会“老家留坑”，机会占据原来的位置
  • 同时不会对其它元素造成影响，相当于悬浮在其它元素上面

x，y为px长度单位

<style>
  .box {
    width: 100px;
    height: 100px;
  }
  .box1 {
    background-color: tomato;
    /* 元素水平向右移动50px，向下移动50px */
    transform: translate(50px, 50px);
  }
  .box2 {
    background-color: khaki;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>
未添加transform添加transform

x，y为%百分比

  • x和y为%百分比，这个百分比分别是相对元素自身的可视宽和可视高而言
  • 在标准盒子模型下：
    • 水平位移 = (width + 左右padding + 左右border) * x%
    • 垂直位移 = (heigt + 上下padding + 上下border) * y%
<style>
  .box {
    width: 200px;
    height: 100px;
  }
  .box1 {
    padding: 25px;
    border: 25px solid skyblue;
    background-color: tomato;
    /* 
            水平位移=（200+25*2+25*2）*50%=150px
            垂直位移=（100+25*2+25*2）*25%=50px;
        	即：translate(50%,25%)等同于translate(150px,50px)
        */
    transform: translate(50%, 25%);
  }
  .box2 {
    background-color: khaki;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

效果：

y值不写，默认为0

<style>
  .box {
    width: 100px;
    height: 100px;
  }
  .box1 {
    background-color: tomato;
    /* 
            水平位移=100*50%=50px
            垂直位移=0
        */
    transform: translate(50%);
  }
  .box2 {
    background-color: khaki;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

效果：

translateX(x)与translateY(y)

  • translateX(x)实现元素在x轴的位移量
  • translateY(y)实现元素在y轴的位移量
  • 本质上translate(x,y)是translateX与translateY两者的复合写法
  • transform后面如果跟多个变换函数，则各函数之间用空格隔开
<style>
  .box {
    width: 100px;
    height: 100px;
  }
  .box1 {
    background-color: tomato;
    /* 
            水平向右移动50px
            垂直向下移动30px 
        */
    transform: translateX(50px) translateY(30px);
  }
  .box2 {
    background-color: khaki;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

效果：

translate与绝对定位结合实现元素水平垂直居中

使用translate移动，可以不再使用“margin-top”与“margin-left”实现居中，超级方便

/* 
	先利用绝对定位
    让元素的顶部和左侧分别与父元素垂直和水平中间对齐
	然后再利用translate，让元素向上和向左移动自身宽度的一半
	这样就实现了水平和垂直居中
*/
position: absolute;
top: 50%;
left: 50%;
/* 向左和向上分别移动元素自身宽和高的一半 */
transform: translate(-50%, -50%);

scale(x,y)

  • x，y都是数字类型，可以用百分比%表示，分别表示元素的宽和高缩放比
  • 当x，y值 > 1时，表示放大，< 1时，表示缩小， = 1表示不变
  • 当只有x，没有y时，则y默认为x，元素宽高同时均匀缩放
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: khaki;
    margin: 150px;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: rgb(255, 99, 71, 0.5);
    /* 宽放大2倍，高放大1.5倍 */
    transform: scale(2, 1.5);
    /* 宽高同时放大2倍 */
    transform: scale(2);
    /* 宽缩小一半，高放大2倍 */
    transform: scale(0.5, 2);
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>
scale(2,1.5)scale(2)scale(0.5,2)

百分比单位

  • x%和y%分别相对于元素的可视宽和可视高而言
  • 在标准盒子模型下
    • 宽缩放后大小 =（width + 左右 padding + 左右 border) * x%;
    • 高缩放后大小 =（height + 上下 padding + 上下 border) * y%
<style>
  .box {
    width: 150px;
    height: 150px;
    /* 背景颜色 黄色 */
    background-color: khaki;
    margin: 150px;
  }
  .item {
    width: 50px;
    height: 50px;
    padding: 25px;
    border: 25px solid rgb(243, 147, 147, 0.9);
    /* 
        	宽放大2倍，高缩小一半 
        	宽缩放后大小=（50+25*2+25*2）*200%=300px
        	高缩放后大小=（50+25*2+25*2）*50%=75px
        */
    transform: scale(200%, 50%);
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>
scale(200%,50%)0scale(200%)

scaleX(x)与scaleY(y)

  • scaleX(x) 实现元素的宽缩放效果
  • scaleY(Y) 实现元素高缩放效果
  • 本质上 scale(x,y)是 scaleX(x) 与 scaleY(y)的复合写法
/*
	transform:scale(x,y) 同等于 transform:scaleX(x) scaleY(y);
*/
transform: scaleX(x) scaleY(y);
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: khaki;
    margin: 150px;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: rgb(255, 99, 71, 0.5);
    /* 宽放大两倍，高缩小一半 */
    transform: scaleX(2) scaleY(0.5);
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

skew斜切

  • css中通过给“transform”添加“skew(ax,ay)”或“skewX(ax)”或“skewY(ay)”变换函数来实现元素斜切效果
  • skewX(ax)：用于水平拉伸，使元素的每个点在水平方向上扭曲一定角度
  • skewY(ay)：用于垂直拉伸，使元素的每个点在垂直方向上扭曲一定角度
  • skew(ax,ay)：用于水平和垂直拉伸，使元素在水平和垂直方向上扭曲一定角度
  • ax：表示一个角度，沿着横坐标扭曲元素的角度
  • ay：表示一个角度，沿着纵坐标扭曲元素的角度

skewX(30deg)skewX(-30deg)skewY(30deg)skew(30deg,30deg)

rotate旋转

  • css中通过给“transform:rotate(ax)”来表示元素旋转效果
  • ax表示旋转的角度，比如rotate(45deg)
  • ax为正，表示顺时针方向旋转
  • ax为负，表示逆时针方向旋转
<style>
  .body,
  ul {
    margin: 0;
    padding: 0;
  }
  ul {
    list-style-type: none;
  }
  ul li {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 20px;
    float: left;
  }
  .item {
    height: 100%;
    background-color: khaki;
  }
  .item1 {
    /* 顺时针旋转到30deg */
    transform: rotate(30deg);
  }
  .item2 {
    /* 逆时针旋转到30deg */
    transform: rotate(-30deg);
  }
  .item3 {
    /* 顺时针旋转到180deg */
    transform: rotate(180deg);
  }
  .item4 {
    /* 顺时针旋转30deg */
    transform: rotate(450deg);
  }
</style>
<body>
  <ul>
    <li>
      <div class="item item1">30deg</div>
    </li>
    <li>
      <div class="item item2">-30deg</div>
    </li>
    <li>
      <div class="item item3">180deg</div>
    </li>
    <li>
      <div class="item item4">450deg</div>
    </li>
  </ul>
</body>

效果：

transform-origin

  • transform-orgin属性，设置元素的变换原点，即元素在交换时是以围绕那个点来发生变换的
  • 默认值：transform-origin:50% 50% 0
  • x，y的值可以使长度值(px或百分比%)还可以是预设的关键词
  • z的值只能是长度值pc
/*
	x： 表示x轴的坐标位置
	y： 表示y轴的坐标位置
	z: 表示z轴的坐标位置
*/
transform-orign: x y z;

注意：

在2D转换中，元素的默认变换原点为元素的中心(transform:50% 50%)

 

关键字表示

关键词(left、right)与(top、bottom)与center三组中任意一个与另一组中的一个关键字组合来表示

关键 字描述
left原点为元素左边中间位置，同left center一样
right原点为元素右边中间位置，同right center一样
top原点为元素上边中间位置，同top center一样
bottom原点为元素下边中间位置，同bottom center一样
center原点为元素中间位置，同center center一样
top left原点为元素左上角，相当于坐标（0 0）
top right原点为元素右上角
left bottom原点为元素左下角
right bottom原点为元素右下角

元素的默认变换原点为元素的中间位置“transform-origin:center;”

<style>
  .body,
  ul {
    margin: 0;
    padding: 0;
  }
  ul {
    list-style-type: none;
    margin: 50px;
  }
  ul li {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 40px;
    float: left;
  }
  .item {
    height: 100%;
    background-color: khaki;
    /* 顺时针旋转60deg */
    transform: rotate(60deg);
  }
  .item1 {
    /* 旋转的原点 */
    transform-origin: top;
  }
  .item2 {
    /* 旋转的原点 */
    transform-origin: right;
  }
  .item3 {
    /* 旋转的原点 */
    transform-origin: bottom;
  }
  .item4 {
    /* 旋转的原点 */
    transform-origin: left;
  }
  .item5 {
    /* 旋转的原点 */
    transform-origin: center;
  }
</style>
<body>
  <ul>
    <li>
      <div class="item item1">top</div>
    </li>
    <li>
      <div class="item item2">right</div>
    </li>
    <li>
      <div class="item item3">bottom</div>
    </li>
    <li>
      <div class="item item4">left</div>
    </li>
    <li>
      <div class="item item5">center</div>
    </li>
  </ul>
</body>

效果

数值表示法

transform-origin: x y;
  • x，y为长度单位(px或百分比%)
  • 当y省略不写时，默认为元素的垂直中心点
<style>
  .body,
  ul {
    margin: 0;
    padding: 0;
  }
  ul {
    list-style-type: none;
    margin: 50px;
  }
  ul li {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 40px;
    float: left;
  }
  .item {
    height: 100%;
    background-color: khaki;
    /* 元素旋转60deg */
    transform: rotate(60deg);
  }
  .item1 {
    /* 旋转的原点 */
    transform-origin: 0 0;
  }
  .item2 {
    /* 旋转的原点 */
    transform-origin: 20px 20px;
  }
  .item3 {
    /* 旋转的原点 */
    transform-origin: 50px 50px;
  }
  .item4 {
    /* 旋转的原点 */
    transform-origin: 100px 0px;
  }
  .item5 {
    /* 旋转的原点 */
    transform-origin: 50px 100px;
  }
</style>
<body>
  <ul>
    <li>
      <div class="item item1">0 0</div>
    </li>
    <li>
      <div class="item item2">20px 20px</div>
    </li>
    <li>
      <div class="item item3">50px 50px</div>
    </li>
    <li>
      <div class="item item4">100px 0px</div>
    </li>
    <li>
      <div class="item item5">50px 100px</div>
    </li>
  </ul>
</body>

效果

百分比表示法

百分比相对的是元素自身的可视宽和可视高而言

<style>
  .body,
  ul {
    margin: 0;
    padding: 0;
  }
  ul {
    list-style-type: none;
    margin: 50px;
  }
  ul li {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 40px;
    float: left;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: khaki;
    transform: rotate(60deg);
  }
  .item1 {
    /* 旋转的原点 */
    transform-origin: 100%;
  }
  .item2 {
    /* 旋转的原点 */
    transform-origin: 50%;
  }
  .item3 {
    /* 旋转的原点 */
    transform-origin: 100% 0%;
  }
  .item4 {
    /* 旋转的原点 */
    transform-origin: 100% 100%;
  }
  .item5 {
    /* 旋转的原点 */
    transform-origin: 100% 50%;
  }
</style>
<body>
  <ul>
    <li>
      <div class="item item1">100%</div>
    </li>
    <li>
      <div class="item item2">50%</div>
    </li>
    <li>
      <div class="item item3">100% 0%</div>
    </li>
    <li>
      <div class="item item4">100% 100%</div>
    </li>
    <li>
      <div class="item item5">100% 50%</div>
    </li>
  </ul>
</body>

scale与skew都可以设置其变换原点

元素默认的转换原点为元素的中心点“transform-orgin:50% 50%;”

<style>
  .box {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 150px;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: rgb(242, 232, 147, 0.5);
    transform: scale(2);
    /* 原点左上角 */
    transform-origin: 0 0;
    /* 原点右边中间 */
    transform-origin: 100%;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

效果

2D转换综合写法顺序问题

同时使用多个转换，其多个转换函数之间用空格隔开

transform: translate() rotate() scale();

转换函数的顺序会影响转换的效果，例如：“先旋转会影响坐标轴方向”

<style>
  .box {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 20px 150px;
  }
  .item {
    width: 100px;
    height: 100px;
  }
  .item1 {
    /* 背景颜色为 黄色 */
    background-color: khaki;
    /* 先旋转，再位移 */
    transform: rotate(180deg) translateX(100px);
  }
  .item2 {
    /* 背景颜色为 天蓝色 */
    background-color: skyblue;
    /* 先位移，再旋转 */
    transform: translateX(200px) rotate(180deg);
  }
</style>
<body>
  <div class="box">
    <div class="item item1"></div>
  </div>
  <div class="box">
    <div class="item item2"></div>
  </div>
</body>

效果：

2D转换实战应用

旋转的三角形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.jiantou::after {
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			border-right: 2px solid red;
			border-bottom: 2px solid red;
			transform: rotate(-135deg);
			transition: transform 1s;
		}
		.jiantou:hover::after {
			transform: rotate(45deg);
		}
	</style>
</head>
<body>
	<div class="jiantou"></div>
</body>
</html>

效果：

鼠标滑动图片放大

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.container {
			width: 200px;
			height: 300px;
			margin: 100px auto;
			position: relative;
			overflow: hidden;
		}
		.container::after {
			content: "";
			display: none;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 3;
		}
		.container img {
			width: 200px;
			height: 300px;
			object-fit: cover;
			transition: transform 1s;
		}
		.container .play {
			position: absolute;
			width: 50px;
			height: 50px;
			opacity: 0;
			background-image: url("/static/play.png");
			background-size: contain;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 4;
		}
		.container:hover::after {
			display: block;
		}
		.container:hover img{
			transform: scale(1.2);
		}
		.container:hover .play{
			opacity: 1;
			transform: translate(-50%,-50%) scale(1.5);
		}
	</style>
</head>
<body>
	<div class="container">
		<img src="/static/jjy.png" alt="">
		<div class="play"></div>
	</div>
</body>
</html>

效果

是洋洋a
关注
  • 19
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
android view 2d扭曲,CSS3 transform变形（2D转换）
weixin_36485139的博客
05-29 410
transform 属性应用于2D 或 3D 转换。该属性允许我们对元素进行平移、旋转、缩放或倾斜。一.translate(x,y)、translateX(n)、translateY(n)定义2D平移转换根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。若translate(x,y)只定义一个数值，默认y=0。translateX(n):沿着 Y 轴移动元素。translateY(n...
学习CSS3这一篇就够了
热门推荐
轻松的小希
11-25 4万+
目录CSS第一章 CSS概述1.1、概述1.2、语法1.3、注释1.4、如何创建并引用1.4.1、外部样式表（外联式）1.4.2、内部样式表（内联式）1.4.3、内联样式（行内式）1.5、三种引入优先级第二章 CSS选择器2.1、id选择器2.2、class选择器2.3、标签选择器2.4、子代选择器2.5、后代选择器2.6、相邻兄弟选择器2.7、后续兄弟选择器2.8、交集选择器2.9、并集选择器2.10、通配符选择器2.11、伪类选择器2.11.1、anchor伪类2.11.2、input伪类2.11.3、
CSS之transform 2D 与 3D 转换（十五）
全粘小谭的博客
10-06 980
该文主要讲解了围绕transform属性展开的2D转换，3D转换等一系列相关属性的用法及注意事项，字数较多，建议细嚼慢咽。
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
chuangxin的专栏
07-07 2870
transform是一个相对比较难的属性，2D转换还好点，3D转换由于涉及空间旋转、透视等比较难以理解，但是我们只要掌握transform本质上就是一系列变形函数，分别是translate位移，scale缩放，rotate旋转，skew扭曲和matrix复合变换，再结合些许空间透视概念，那么我们一定可以驾驭transform
perspective-transform:一个小JavaScript库，用于创建和应用透视变换
05-03
是我写的一篇博客文章，内容涉及创建该库的动机及其某些应用程序的详细信息。 特征 创建函数以将点从一个任意的四边形映射到另一个，反之亦然 访问单应矩阵及其逆矩阵（用于使用CSS3转换元素） 没有外部依赖 安装 ...
[CSS入门到进阶] 用transform后z-index失效了？总结transform的注意事项！
Hull Qin
08-21 3187
前端开发者一定要知道的transform的知识！如果你不了解这些，就去使用transform这个css，很可能就踩坑了！快来学习一下吧！
CSS3复习1-阴影-2D转换
余光的博客
08-21 324
闲话不多说了，准备复习一篇css3的基础知识，如何熟练的运用css3，这需要一个代码量的积累，但是基础一定要牢固，我们共勉~ 一、阴影、图片、圆角 1、CSS3 圆角边框-box-radius border-radius:20px; /border-radius:20px 20px 20px 20px; is equivalent to: border-top-left-...
又一款js时钟!transform实现时钟效果
10-21
这篇文章主要介绍了一种使用CSS的transform属性以及少量JavaScript代码来创建一个动态时钟效果的方法。这种方法不需要使用复杂的图形库如Canvas，而是利用简单的HTML结构和CSS样式来实现。下面将详细阐述文章中涉及...
CSS 高级区块效果——WEB开发系列25
一条晒干的咸鱼的博客
08-31 1720
CSS提供了多种工具和属性，使我们能够创建视觉上引人注目的效果。今天我们继续将深入了解几种高级CSS效果：盒子阴影、滤镜、混合模式和文本背景裁剪，提升网页设计的质感和深度。
CSS前端学习（online tuorials）旋转动画
最新发布
m0_51581537的博客
09-04 471
应用 animateBox （keyframes ，这个动画定义了从 0deg 旋转到 180deg 的过程。子元素在前50%的时间里会旋转180度，并在接下来的50%时间里保持这个角度（因为 50% 和 100% 的状态是相同的）），持续2秒，使用 ease-in 函数进行无限循环。background: url(‘替换图片.jpg’) no-repeat center/cover;伪类用于当鼠标悬停在 .loader 上时，改变 .loader 和其子元素的样式。
css中的伪类
weixin_51480428的博客
08-30 446
伪类（Pseudo-classes）是 CSS 中的一个重要概念，它们用于定义元素的特定状态。伪类可以基于元素的特定属性或状态来选择和样式化文档树中的元素，而不需要使用类或 ID。伪类通常以冒号 : 开头。
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
Hanbuhuic的博客
09-04 1321
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
css画个熊猫
此博客内容主要是小可日常工作中的一些问题解决的记录整理而成
08-29 999
【html源码-一键复制查看效果】/* 不规则的圆形写法 *//* 半圆线条 */
CSS解析：盒模型
晓风残月淡的博客
09-01 1198
在网页上实现元素布局涉及很多技术。在复杂网站上，可能会用到浮动元素、绝对定位元素以及其他各种大小的元素，甚至也会使用较新的CSS特性，比如Flexbox或者网格布局。在此之前我们要打好基础，深刻理解浏览器是如何设置元素的大小和位置的。高级的布局话题基于文档流和盒模型等概念，这些是决定网页元素的大小和位置的基本规则。我们将构建一个两列布局的网页。你可能很熟悉这个布局，因为它是一个经典的CSS入门练习，但是在完成这种布局的过程中，有一些布局中经常被忽略的一些细节。
CSS学习3
qq_54641174的博客
08-29 869
css样式表
用CSS实现前端响应式布局
qq_69304031的博客
09-02 532
通过使用 CSS 媒体查询，我们可以轻松地实现响应式布局，让网页在不同的设备上都能呈现出最佳的效果。在实际开发中，我们可以根据具体的需求，针对不同的设备类型和屏幕尺寸进行更加精细的布局调整。希望这篇博客对你在网页设计中实现响应式布局有所帮助。如果你有任何问题或建议，欢迎在评论区留言。
理解调试和组织 CSS——WEB开发系列26
一条晒干的咸鱼的博客
09-01 1814
CSS（层叠样式表）不仅是为网页提供样式的关键工具，也是调试和优化网页表现的重要部分。无论是调整网页布局，还是确保样式的一致性，掌握调试和组织 CSS 的技巧都是至关重要的。
CSS实现水滴效果图
N201871643的博客
08-26 1260
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是洋洋a

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值