CSS3(2)--学习笔记

CYSDLN

已于 2022-07-26 17:08:33 修改

阅读量71

点赞数 1

分类专栏：学习笔记文章标签： css3 学习前端 html5

于 2022-07-25 17:04:25 首次发布

本文链接：https://blog.csdn.net/CYSNLD/article/details/125978510

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

CSS3-文字渐变，文本效果，2D旋转

文本溢出改为省略点

2D转换

CSS3-文字渐变，文本效果，2D旋转

文字阴影效果(渐变字)

代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
         p {
            text-shadow: 5px 5px 5px red;
        }
    </style>
</head>

<body>
    <div>
        <p>这是一个渐变字</p>
    </div>

</body>

</html>

效果图

文本溢出改为省略点

删除不换行代码（white-space: nowrap; ）即可让文字在自己设置的大小里面呈现出来

代码

<!DOCTYPE html>

<html lang="zh">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>文字省略号</title>

   <style type="text/css">
        p{
            width: 300px;
            height: 200px;
            border: 2px solid red;
            /*设置不换行*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /*设置省略号*/
            /* text-overflow: ellipsis; */
        }   
    </style>
<body>
    <p>这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面这是一个页面</p>
</body>

</html>

效果图

2D转换

transform:

translate( x y) — 偏移

rotate(30deg) — 旋转

scale() — 放大

skewX() — X轴倾斜

skewY() — Y轴倾斜

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) — 所有2d组合

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D旋转</title>
    <style type="text/css">
        div {
            margin-top: 300px;
            margin-left: 200px;
            width: 300px;
            height: 200px;
            background: yellow;
            /* 水平移动100px */
            transform: translate(100px);

            /* 规定他旋转的时间 */
            transition: 3s;

        }

        div:hover {
            /* 通过点击事件来旋转180度    两个事件同时加载会被覆盖*/
            transform: rotate(180deg);
            /* transform: scale(0.3);  缩放到0.3*/
        }

        @keyframes identifier {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

效果图