网站部署及CSS剩余模块

贩卖纯净水.2024-11-24 14:48

CSS3 2D转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果

转换可以理解为变形：缩放、旋转、移动

移动

2D移动数2D这个样哑巴中的一种功能，可以改变元素在页面中的位置，类似于定位

语法是这样：

css 复制代码 
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
css 复制代码 
div{
    width: 200px;
    height: 200px;
    background-color: pink;
    transform: translate(100px,100px);
}

translate 最大的优点是不会影响到其他元素的位置

translate的百分比单位是相对于自身元素的translate

我们可以用这个特点实现子盒子在父盒子的中央位置

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天菜</title>
    <style>
        div{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        p{
            position: absolute;
            top:50%;
            left: 50%;;
            width: 200px;
            height: 200px;
            background-color:aqua;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

对行内标签是没有效果的

旋转

旋转是指元素在二维平面内顺时针或者逆时针旋转

这是基本的语法：

css 复制代码 
transform:rotate(度数)

rotate里面跟度数，单位是deg，比如rotate(45deg)

角度为正的时候，顺时针

负的时候是逆时针

默认的旋转的中心点是元素的中心点

css 复制代码 
<!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>
        div{
            width: 300px;
            height: 300px;   
        }
        div img{
            width: 100%;
            height: 100%;
            border-radius: 50px;
        }
        div:hover img{
            transform: rotate(360deg);
            transition: all 0.7s;
        }
    </style>
</head>
<body>
    <div>
        <img src="./1714915128_new_IMG-20240503-WA0094.jpg" alt="">
    </div>
</body>
</html>

真是盖了帽了

旋转可以给我们做出三角形

css 复制代码 
<!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>
        div{
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid red;
        }
        div::after{
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 15px;
            height: 15px;
            border-right: 1px solid skyblue;
            border-bottom: 1px solid seagreen;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

三角和旋转配合起来就可以有动画的效果

我们可以设置我们元素转换的中心点：transform-origin

css 复制代码 
transform-origin: x y;
css 复制代码 
<!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>
        div{
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid palegreen;
            margin: 100px auto;
        }
        div::before{
            content: "喜欢";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.4s;
        }
        div:hover::before{
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

旋转效果可爱捏

缩放

缩放的语法：

css 复制代码 
transform: scale(x,y);

里面的数字如果不跟单位的话就是倍数的意思

css 复制代码 
<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }
        div:hover{
            transform: scale(2,2);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

分页按钮
css 复制代码 
<!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>
        li{
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 7px;
            transition: all 0.4s;
        }
        li:hover{
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
</html>

2D转换有综合的写法，是同时使用多个转换，空格隔开即可

顺序会影响转换的效果

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

CSS3 动画

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

动画可以实现更多的变化，控制，连续自动播放等效果

先定义再调用

css 复制代码 
@keyframes 动画名称{
     0%{
           width:100px;
      }
      100%{
            width:200px;
        }
}

这是定义动画

这是使用动画：

css 复制代码 
div{
    height: 300px;
    width: 300px;
    border-color: aqua;
    animation-name: move;
    animation-duration: 5s;
}

动画可以实现很多效果

动画可以改变任意多的样式任意多的次数

可以用百分比规定变化发生的时间，或者用关键词from to，等同于0和100

css 复制代码 
<!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>
        @keyframes move{
            0%{
                transform: translate(0px);
            }
            25%{
                transform: translate(1000px,0);
            }
            50%{
                transform: translate(1000px,500px);
            }
            75%{
                transform: translate(0,500px);   
            }
            100%{
                transform: translate(0px);
            }
        }
        div img{
            height: 200px;
            width: 300px;
            background-color: aqua;
            animation-name: move;
            animation-duration: 3s;
        }
    </style>
</head>
<body>
    <div>
        <img src="./pp.jpg" alt="">
    </div>
</body>
</html>

还挺炫酷的

这是各种可以设置的属性

动画结束之后的状态是backwards

动画简写就是animation：动画名称，持续时间，运动曲线，何时开始，播放次数，是否反方向，动画起始或者结束的状态

我用动画做了537的发光眼：

css 复制代码 
<!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>
        .map{
            position: relative;
            width: 550px;
            height: 550px;
            background-image: url(./537.jpg);
        }
        .city{
            position: absolute;
            top: 141px;
            right: 105px;
        }
        .dotted{
            width: 8px;
            height: 8px;
            background-color: rgb(0, 255, 76);
            border-radius: 50%;
        }
        .city div[class^="pulse"]
        {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #5dfd00;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        .map .city .pulse2{
            animation-delay: 0.4s;
        }
        .map .city .pulse3{
            animation-delay: 0.8s;
        }
        @keyframes pulse{
            0%{

            }
            70%{
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100%{
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }    
</style>
</head>
<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>
</html>

然后关于速度曲线有细节，具体看这张表：

这个步长是一步一步走的

css 复制代码 
<!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>
        div{
            width: 0;
            height: 30px;
            background-color: pink;
            animation: w 4s steps(10) forwards;
        }

        @keyframes w{
            0%{
                width: 0;
            }
            100%{
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

我们可以拿这个实现打字效果

css 复制代码 
<!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>
        div{
            overflow: hidden;
            width: 0;
            height: 30px;
            white-space: nowrap;
            background-color: pink;
            animation: w 4s steps(11) forwards;
        }

        @keyframes w{
            0%{
                width: 0;
            }
            100%{
                width: 180px;
            }
        }
    </style>
</head>
<body>
    <div>西安邮电你是杀不死我的</div>
</body>
</html>

嘻嘻

我是不会放过你们的

给我等着吧

这个肉像是有蛆爬过去一样

西安邮电还在输出

而且我还吃了大半碗才发现这件事

案例：奔跑的蓝色米老鼠

CSS3 3D转换

我们的生活环境是3D的，照片就是3D物品在2D平面中呈现的例子

它近大远小

且物体后面遮挡不可见

我们3D转换所用到的三维坐标系是立体空间，是由三个轴共同组成的

3D位移

这是语法：

css 复制代码 
<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            transform: translate3d(100px,100px,100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

而xyz都是不能省略的，如果没有的话就写0

要在2D平面产生近大远小视觉立体的效果只是二维的

透视

如果想要产生3D效果的话需要透视（3D投影在2D平面）

模拟人类的视觉位置，可以认为是只安排一只眼睛去看

透视我们也称之为视距，视距就是人的眼睛到屏幕的距离

距离视觉点近的电脑平面成像越大，越远的越小

透视的单位是像素

透视是写在被观察元素的父盒子上面的

d是视距，是一个距离人的眼睛到屏幕的距离

z是z轴，物体距离屏幕的距离，越大我们看到的物体就越大

3D旋转

3D旋转可以让我们按照x轴y轴z轴或者自定义轴旋转

语法：

css 复制代码 
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(x,y,z,deg);

这前面三个分别是沿着x，y，z正方向旋转45deg，第四个是沿着自定义轴旋转，deg是角度

对于元素的旋转方向的判断，基于左手准则

左手手拇指指向x轴的正方向，其余手指的弯曲方向就是该元素沿着x轴旋转的方向

css 复制代码 
<!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>
        body{
            /* 透视写到被观察的元素的父盒子上面 */
            perspective: 500px;
        }
        div{
            width: 200px;
            height: 300px;
            background-color: pink;
            transform: translate3d(100px,100px,100px);
            transform: translateZ(-300px);
            transition: all 0.5s;
            margin: 0 auto;
        }
        div img{
            width: 100%;
            height: 100%;
        }
        div:hover
        {
            transform: rotateX(180deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="./王振1.jpg" alt="">
    </div>
</body>
</html>

这是沿着不同轴转动能实现的效果

3D呈现

3D呈现是transform-style

它控制子元素是否开启三维立体环境

transform-style:flat子元素不开启3d立体空间，默认的

transform-style:preserve-3d，子元素开启立体空间

代码写给父级，影响的是子盒子

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>
        body{
            perspective: 500px;
        }
        .box{
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 1.1s;
            transform-style: preserve-3d;
        }
        .box:hover{
            transform: rotateY(60deg);
        }
        .box div{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: aquamarine;
        }
        .box div:last-child{
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
</html>

这就可以实现3D的立体效果

两面旋转盒

我们首先需要搭建html结构

box父盒子里面包含前后两个子盒子

box是反转的盒子，front是前面的盒子，back是后面的盒子

我们反转的是盒子

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>
        body{
            perspective: 350px;
        }
        .box{
            position: relative;
            width: 250px;
            height: 300px;
            margin: 100px auto;
            /* 让背面的盒子保存立体空间 */
            transition: all 3s;
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }
        .front,
        .back{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .front{
            z-index: 1;
        }
        .back{
            transform: rotateY(180deg);
        }
        .box:hover{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./见见的狗.jpg" alt="" class="front">
        <img src="./王振2.jpg" alt="" class="back">
    </div>
</body>
</html>

这是我们实现的代码

旋转木马案例

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>
        body{
            perspective: 800px;
        }
        @keyframes rotate{
            0%{
                transform: rotateY(0);

            }
            100%{
                transform: rotateY(360deg);
            }
        }
        section{
            position: relative;
            width: 400px;
            height: 400px;
            margin: 100px auto;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
            background: url(./王振1.jpg);
            background-size: cover;
        }
        section:hover{
            /* 鼠标放置暂停 */
            animation-play-state: paused;
        }
        section div{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: url(./见见的狗.jpg);
        }
        section div:nth-child(1){
            transform: translateZ(500px);
        }
        section div:nth-child(2){
            transform: rotateY(60deg) translateZ(500px);
        }
        section div:nth-child(3){
            transform: rotateY(120deg) translateZ(500px);
        }
        section div:nth-child(4){
            transform: rotateY(180deg) translateZ(500px);
        }
        section div:nth-child(5){
            transform: rotateY(240deg) translateZ(500px);
        }
        section div:nth-child(6){
            transform: rotateY(300deg) translateZ(500px);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

当然是要先旋转再移动啦

说实话这个看久了头都晕了

浏览器私有前缀

浏览器有私有前缀，是为了兼容老版本的写法，比较新版本的浏览器都无需添加

这就是主要的属性

看完十日终焉的我：

相关推荐
冰冻果冻14 分钟前
vue--制作随意滑动的相册
前端·javascript·vue.js
GISer_Jing33 分钟前
前端测试工具（Jest与Mock）
前端·测试工具
licy__1 小时前
HTML 元素类型介绍
前端·css·html
谢尔登1 小时前
【Next】路由处理
服务器·javascript·css
一雨方知深秋1 小时前
WEB APIS（DOM对象，操作元素内容，属性，表单属性，自定义属性，定时器）
开发语言·前端·javascript
三金121381 小时前
整站使用Vue(工程化)
前端·javascript·vue.js
爪哇学长1 小时前
打造极致网页体验：HTML与CSS高级实战秘籍
前端·css·html
程序猴老王2 小时前
el-select 和el-tree二次封装
前端·vue.js·elementui
blzlh2 小时前
手把手教你做网易云H5页面，进大厂后干的第一件事
前端·javascript·css
热门推荐
01Docker 夺命连环 15 问02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码