day09 伪元素和变形

最新推荐文章于 2024-09-04 17:17:13 发布

会开的水仙花

最新推荐文章于 2024-09-04 17:17:13 发布

阅读量285

点赞数

本文链接：https://blog.csdn.net/weixin_44304606/article/details/101077136

版权

这篇博客详细介绍了CSS3中的伪元素`before`和`after`的使用，包括它们的作用，如清除浮动和自定义列表样式。此外，还探讨了CSS3的过渡、2D和3D变形，如`translate`、`scale`、`rotate`、`skew`，以及如何调整变形原点。同时，文章讲解了3D变形中的`rotateX`、`rotateY`、`rotateZ`和透视效果。最后，提到了`animation`在创建复杂动画中的应用。

摘要由CSDN通过智能技术生成

before和after伪元素

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

作用

可以用伪元素清楚浮动
可以直接不需要新加元素在内容里添加
可以通过before元素给list-style改变样式，比如插入图片
…

注意：

一定要有content，否则伪元素不起作用

过渡(CSS3)

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。

在CSS3里使用transition可以实现补间动画（过渡效果），A状态，B状态，

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。[all(全部),height,width…]
transition-duration	定义过渡效果花费的时间。默认是 0。[单位是s(秒)]
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。逐渐变慢
	ease-in 减速 ease-out 加速 linear匀速
transition-delay	规定过渡效果何时开始。默认是 0。 [单位是s]

2D变形(CSS3) transform

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

变形转换 transform transform 变换变形的意思

移动 translate(x, y)

translate 移动平移的意思

translate(50px,50px);

在这里插入图片描述

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
 translateX(x)仅水平方向移动（X轴移动）
 translateY(Y)仅垂直方向移动（Y轴移动）

让定位的盒子水平居中

前提是父元素设置了position relative(或者父元素是body本身)

position: absolute;
left: 50%;top: 50%;
transform: translate(-50%,-50%);

缩放 scale(x, y)

对元素进行水平或垂直方向的缩放

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform:rotate(45deg);

transform-origin可以调整元素转换变形的原点

transform-origin: 50px 10px ;

如果是4个角，用left,top，这些值，如果想要精确的位置，就用像素值

倾斜 skew(deg, deg)

transform:skew(30deg,0deg);

3D变形(CSS3) transform

rotateX()

就是沿着 x 立体旋转.

rotateY()

沿着y轴进行旋转

rotateZ()

沿着z轴进行旋转

透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

透视原理：近大远小。
浏览器透视：把近大远小的所有图像，透视在屏幕上。
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。（可以造成放大的效果）

perspective 一般作为一个属性，设置给父元素可以选择（body），作用于所有3D转换的子元素

translateX(x)

仅水平方向移动**（X轴移动）

translateY(y)

仅垂直方向移动（Y轴移动）

translateZ(z)

前后移动，直观的表现就是大小变化

translate3d(x,y,z)

[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

动画(CSS3) animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation: go 1s ease-out 0s infinite(无限次) normal（正常）;
animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

     @keyframes go{
     //相当于调用了一个函数，这是函数体
     //keyframes  是固定写法 后面跟着自定义的动画名
            0%{
                transform: translate3d(0,0,0);
                初始位置：原点
            }
            25%{
                transform: translate3d(200px,0px,200px);
                1/4位置：横向挪动200px,放大效果

            }
            50%{
                transform: translate3d(200px,200px,200px);
                  2/4位置：横向挪动200px,纵向挪动200px放大效果

            }
              75%{
                transform: translate3d(0px,200px,200px);

            }

            100%{
                transform: translate3d(0,0,200px);
            }
        }
				
				//该表示了一正方形环绕了一个200的正方周运动   而且是循环