服务器&2D转换&动画

最新推荐文章于 2024-09-14 16:21:49 发布

码代码的小涛

最新推荐文章于 2024-09-14 16:21:49 发布

阅读量65

点赞数

文章标签：服务器前端 css3

本文链接：https://blog.csdn.net/m0_58425326/article/details/131161211

版权

本文介绍了服务器的基本概念，包括本地和远程服务器在网站部署中的作用。详细讲解了2D转换的各种功能，如位移、旋转、旋转中心点和缩放，并提供了相关示例。同时，概述了公司网站开发的流程，强调了域名备案和服务器选择的重要性。最后，简述了动画的使用和相关属性，展示其在创建动态效果中的应用。

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

其实这些内容昨天就看完了，但昨天懒得写了，那就今天赶个大早吧！

服务器

1.什么是服务器

服务器就相当于高配版的电脑，他也是一台计算机，但他能完成更为复杂的工作。
根据服务器的类型不同，又可以分为文件服务器，数据库服务器，应用程序服务器，web服务器。

问：我们写的品优购网站现在只能在自己本机的电脑访问，那么怎么才能让其他人也访问的到呢？
这个时候就要用到我们的web服务器了。

2.web服务器

web服务器一般指网络服务器，根据服务器在网络中的位置不同，又可以把他分为本地服务器和远程服务器。

2.1本地服务器

我们可以把自己的电脑设置为本地服务器，这样一个局域网中的小伙伴就能访问你的网站了，这里不详细介绍。

2.2远程服务器

本地服务器比较局限，只能在本地局域网中访问，要想把自己的网站部署到整个互联网中，就要用到远程服务器。
远程服务器通常是别的公司给我们提供一台服务器，然后我们把自己的项目传到这个服务器上，任何人都可以访问我们的网站了。
这里讲一下怎么将我们的网站上传至远程服务器：
首先，一般我们服务器和域名都是收费的（去一些互联网公司去买，如：阿里云，腾讯云…），但我们也可以申请一个免费的服务器（与买的服务器不同的是他不能部署大型网站，否则可能会崩，真正我们上线项目还得去买台服务器）。

登陆这个网站free.3v.do，然后注册一个账户

2.点击提交之后，我们会获得一个免费的域名，然后再在FTP页用刚才的账号和密码注册个服务器就行了
3.然后记录下我们的账号，密码，域名和服务器，下载一个cuteftp
4.在页面最上边输入我们的服务器名，账号，密码，进行链接
在这里插入图片描述

然后将自己的文件从左边传送到右边的远程服务器就行了
在这里插入图片描述
这个时候再用我们的域名访问网站就可以成功了

3.公司网站开发的流程

首先我们要申请一个域名
进行域名备案（这个时间一般在20天左右）
申请空间，也就是服务器
定位网站方向
分析网站的功能和需求
网站风格设计
网站代码制作（前后端）
测试网站
ftp上传网站
10.网站维护

2D转换

转换，使用这个特性，可以实现元素的位移，旋转和缩放

1. 2D转换之位移（translate）

语法：
在这里插入图片描述

利用位移使盒子水平垂直居中，我们之前的做法是先让子盒子走父盒的50%，然后再用左外边距，上外边距走自己宽高的一般
像这样

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            position: relative;
            /* left: 0;
            top: 0; */
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        p {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-left: -100px;
            margin-top: -100px;
            
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>
</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>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            position: relative;
            /* left: 0;
            top: 0; */
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        p {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            transform: translate(-50%, -50%);

        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>

</html>

最后两者的实验结果都是一样的
在这里插入图片描述

2. 2D转换之旋转（rotate）

在这里插入图片描述
在没学旋转之前，下三角图标我们都是引入的字体图标，现在我们可以用旋转来实现

<!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 #000;
        }

        div::after {
            content: '';
            position: absolute;
            right: 15px;
            top: 8px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.5s;
        }


        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

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

</html>

效果：
在这里插入图片描述

3. 2D转换之旋转中心点（translate-origin）

在旋转的时候，元素的旋转中心点默认是元素的中心位置，没关系，这里我们可以进行设置
在这里插入图片描述

4. 2D转换之缩放（scale）

在这里插入图片描述
利用缩放我们可以实现一些效果

<!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;
            margin: 100px auto;
            width: 200px;
        }

        img {
            display: inline-block;
            width: 100%;
            transition: all 0.5s;
        }

        div img:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div>
        <a href="#">
            <img src="../CSS/images/tb.jpg"></img>
        </a>
    </div>
</body>

</html>