CSS文本效果、2D/3D转换

最新推荐文章于 2024-08-21 16:08:40 发布

博博915

最新推荐文章于 2024-08-21 16:08:40 发布

阅读量156

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_56393766/article/details/125946768

版权

一、文本效果

1、文本阴影

文本阴影是通过text-shadow样式属性来设置；通过该属性可以向文本添加一个或多个阴影。

示例代码如下：

<style>
    h1 {
        text-shadow: 2px 2px 5px red;
    }
<h1>文本阴影效果！</h1>

2、盒子阴影

box-shadow属性应用阴影于元素。

<style> 
    div {
        width: 300px;
        height: 100px;
        padding: 15px;
        background-color: yellow;
        box-shadow: 10px 10px 5px grey;
    }
</style>
<div>已设置 box-shadow 的 div 元素</div>

3、卡片阴影

<!DOCTYPE html>
<html>
<head>
    <style>
        .card {
            width: 250px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            text-align: center;
        }
        .header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            font-size: 40px;
        }
        .container {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="header">
            <h1>1</h1>
        </div>
        <div class="container">
            <p>January 1, 2021</p>
        </div>
    </div>
</body>
</html>

4、文本溢出

text-overflow 属性规定应如何向用户呈现未显示的溢出内容。

4.1 css实现单行文本溢出显示...

/* 将溢出文本进行隐藏 */
overflow: hidden;
/* 将溢出文本改为省略号 */
text-overflow: ellipsis;
/* 设置文本不换行 */
white-space: nowrap;

4.2 多行文本溢出显示...

display: -webkit-box;
-webkit-box-orient: vertical;
/* 控制显示的行数 */
-webkit-line-clamp: 3;
overflow: hidden;

-webkit-line-clamp: 3;用来限制在一块元素显示的文本的行数。为了实现该效果，它需要组合其他的webkit属性。常见结合属性:
display: -webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical;必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式
text-overflow: ellipsis;,可以用来多行文本的情况下，用省略号“….”隐藏超出范围的文本。

二、2D转换

转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。转换也可以简单理解为变形。

可分为三种:

移动: translate
旋转: rotate
缩放: scale

2.1 二维坐标系

2.2 移动translate

移动是2D转换里面的一种功能。

作用:可以改元素在页面中的位置，类似定位。

1、它的语法和取值:

transform: translate(x，y);

也可以单独文开写:

transform: translateX(n);
transform: translateY(n) ;

2、注意:

(1)、定义2D转换中的移动，沿着X和Y轴移动元素;

(2) 、 translate中的百分比单位是相对于自身元素的半径来说的transform: (50%，50%);

(3) 、对行内元素没有效果。

(4)、分开写的时候X，Y要大写，不分开写的时候要把它们用逗号隔开。translate最大的优点:不会影响到其他元素的位置;

2.3 旋转rotate

旋转的作用为:让元素在二维平面内顺时针旋转或者逆时针旋转。

1、语法:

trans fom:rotate (度数)

2、注意:

(1) .rotate里面跟度数，单位是deg比如rotate(180deg);

(2)、角度为正时,顺时针,负时,为逆时针;

(3)、默认旋转的中心点是元素的中心点。

2.4 转换中心点transform-origin

作用:我们可以设置元素转换的中心点。

1、语法:

transform-origin: x y;

2、注意:

(1)、后面的参数x和y一定要用空格隔开;

(2) 、xy默认转换的中心点是元素的中心点(50%50%);

(3)、还可以给xy设置像素或者方位名词( top/bottom/left/right/center)。

2.5 缩放scale

缩放的作用:可以放大和缩小。

只要给元素添加上了这个属性就能控制它放大还是缩小。

1、语法:

transform: scale(x,y);

2、注意:

(1)、其中的x和y是用逗号分隔开的;

(2) . transform: scale(1,1):宽和高都放大一倍，相对于没有放大。

(3) . transform: scale(2,2):宽和高都放大了2倍;

(4)、简单写法: transform: scale(2):只写一个参数，第二个参数则和第一个参数一样相当于scale(2,2);

(5) .transform: scale(0.5，0.5):缩小，只要输入的数值是小于1的就是缩放效果;

(6) 、sacle缩放最大的优势为:在于可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他元素。

2.6 转换的综合写法

前面讲的这些东西是可以一起写的就是我们上面标题说的综合写法。

但是要格外注意以下几点:

注意:

1、同时使用多个转换，其格式为: transform: translate() rotate()scale(..等等，一定要注意的一点:它们之间一定要用分号隔开;

2、它们的顺序会影响转换的效果。(先旋转会改变坐标轴方向);

3、当我们同时有位移和其他属性的时候，记得一定要将位移放到最前面。

三、3D转换

1、CSS 3D转换方法

通过CSS transform属性，您可以使用以下3D转换方法:.

rotateX()方法使元素绕其×轴旋转给定角度
rotateY()方法使元素绕其丫轴旋转给定角度
rotateZ()方法使元素绕其Z轴旋转给定角度

2、CSS转换属性

属性	描述
transform	向元素应用2D或3D转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在3D空间中显示。
perspective	规定3D元素的透视效果。
perspective-origin	规定3D元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。