HTML前端 - 元素


图片文字遮罩:

引用:色块上移 ,需要默认文字不可见 ,定位色块的位置

间距用p标签的margin,因为padding会改变盒子的大小


代码如下:

图片变形:

原理:图片变形是指将一个图片原来的形状变成另一个形状

知识点:一个图片box的变形不会影响到另一个box

图片变形有四种类型,分别是 位移,旋转 ,缩放斜切

示例代码图:


元素旋转:

元素旋转既元素的反转,旋转的方向有

            1:X轴向右、Y轴向下、Z轴向屏幕外

            2:让轴向对着自己,顺时针方向就是该轴向的旋转方向

使用transform-style: preserve-3d; 来设置盒子按3D空间来显示

perspective设置透视距离,经验数值800比较符合人眼的透视效果


变形中心点:

transform-origin函数可以设置图像的旋转中心以及变形中心

通过nth-child()函数可以调用接下来的第几个元素

举个栗子:

背面可见:

既元素旋转后的背面是否可见 用backface-visibility函数



图片反面:

以下两句是为了演示图片和文字层重叠的效果

            transform-style: preserve-3d;

            transform: perspective(800px) rotateY(45deg);    初始旋转45度

图片和文字背面不可见,文字初始已翻转,所以隐藏露出底层图片

            transform: translateZ(10px);    初始文字浮起10像素方便查看图片与文字分层的效果

举个荔枝:

animation动画:

动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态

    @keyfrmes函数用来初始化动画状态

     infinite  不限次数

    alternate 动画结束后返回,返回也算次数

    animation-fill-mode 动画前后的状态

                    forwards 动画完成保持在最后一帧

                    backwards 在延迟时间内,在动画显示之前引用from开始属性值(例如box宽100、from宽100, 在延迟1s内显示200)

                    both 向前向后填充模式都被应用( 例如起始按200,结束停在最后一帧 )

    动画停止:animation-play-state:paused

    动画运行:animation-play-state:running


多帧动画:


你可能感兴趣的:(HTML前端 - 元素)