
async和await关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise。而FetchAPI可以通过网络访问资源，您可以发出HTTP请求（使用GET和POST其他方法）、下载和上传文件。

## Fetch API

Fetch API是一个全局的fetch()方法用于发起获取资源的请求。它返回一个promise，这个promise会在请求响应后被resolve，并传回Response对象。fetch()使用起来很简单，它的语法：

    Promise<Response> fetch(input[, init]);

input: URL字符串，或者一个Request对象
options: 具有method, headers, body,credentials等属性的配置对象。


## async/await

async/await非常适合与fetch()因为它使用语法糖简化了promises 的工作。

如下代码插入网页中会返回一直可爱的狗狗。

    <img id="dog" />
    <script>
        async function getDog(){
            const response = await fetch('https://dog.ceo/api/breeds/image/random')
            const dog = await response.json()
            document.getElementById('dog').src = dog.message
        }
        getDog()
    </script>

<img id="dog" />
<script>
    async function getDog(){
        const response = await fetch('https://dog.ceo/api/breeds/image/random')
        const dog = await response.json()
        document.getElementById('dog').src = dog.message
    }
    getDog()
</script>


Response对象提供了很多有用的方法：

* response.json()返回解析为 JSON 对象的承诺
* response.text()返回解析为原始文本的承诺
* response.formData()返回已解决的 promise 到FormData
* response.blob()返回解析为Blob（原始数据的类文件对象）的承诺
* response.arrayBuffer()()返回解析为ArryBuffer的承诺（原始通用二进制数据）

## 处理错误

    response.ok;     // => false
    response.status; // => 404

可以通过response的这二个属性来判断请求是否成功，response.ok最为方便。

    async function getDog(){
            const response = await fetch('https://dog.ceo/api/breeds/image/random')
            if(!response.ok){
                throw new Error('请求失败！');
            }
            const dog = await response.json()
            document.getElementById('dog').src = dog.message
        }
    getDog().catch(error => {
        error.message; // => '请求失败！'
    });

参考：

[fetch()](https://developer.mozilla.org/zh-CN/docs/Web/API/fetch)

[How to Use Fetch with async/await](https://dmitripavlutin.com/javascript-fetch-async-await/)

async和await关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise。而FetchAPI可以通过网络访问资源，您可以发出HTTP请求（使用GET和POST其他方法）、下载和上传文件。

async/await和fetch()的使用


之前写了一个node的脚本，用来检测博客的友情链接是否互换成功，通过fetch()采集对方网站友情链接页面的HTML代码，搜索是否含有自己的博客域名来判断是否互换。但是运行了几次脚本发现其中一个网站页面无法打开的状态，后来发邮件询问大体说是被反爬虫给屏蔽了，考虑到自己的简陋的代码并没有处理反爬虫的这个情况，于是修改代码加入了headers中的`'user-agent'`伪装。

但是添加后我想测试一下看看请求中headers是否添加了`fetch()如何读取请求中的'user-agent'？`,本来希望打印`response`中的herders来查看`'user-agent'`是否伪装成功，直接在fetch的response中遍历headers是无法获得`'user-agent'`这个属性。所以只好搭建一个临时服务器端来打印请求的request。

### 解决方法

我是通过Python fastAPI创建了一个简单的服务器，然后使用fetch发送请求，在服务器端打印request的headers中的`'user-agent'`，这次，可以看到`'user-agent'`的属性被添加了。服务端的具体代码：

    import uvicorn
    from fastapi import FastAPI,Response,Request
    app = FastAPI()
    @app.get("/")
    async def root(request:Request):
        print(request.headers['user-agent'])
        return {"message": "Hello World"}
    if __name__ == '__main__':
        uvicorn.run(app='main:app', host="127.0.0.1", port=8888, reload=True, )


node的请求代码很简单：

    fetch(url, )
            .then(res => {
                // console.log(res);
                return res.text()})
            .catch((e) => {
                console.error(`错误: ${e.message}`);
            });


这样问题就解决了，直接在fetch的response中遍历headers是无法获得`'user-agent'`这个属性。

但是添加后我想测试一下看看请求中headers是否添加了`fetch()如何读取请求中的`user-agent`？`,本来希望打印`response`中的herders来查看`user-agent`是否伪装成功，直接在fetch的response中遍历headers是无法获得`user-agent`...

fetch()如何读取请求中的`user-agent`？


这阵子忙里偷闲的更新了一些博文，因为之前中间有段时间没有更新博客，所以对独立博客的这个圈子了解的也不是很多，最近通过一些独立博客的友情链接，发现了几个有意思的关于中文独立博客聚合的网址，觉得很有趣，不敢独享分享给大家。

### 中文独立博客聚合

1. [中文独立博客列表](https://github.com/timqian/chinese-independent-blogs) 一个大而全的中文博客汇总网站，这是一个GitHub的仓库，截止笔者起草这篇博客时，项目仓库标星15.3K,登记中文独立博客1141个。算是比较中文博客聚合比较大的项目网站了，但是可能有些对GitHub操作不熟悉的个人站长不会提交，所以肯定会有些疏漏。
2. [十年之约](https://foreverblog.cn/) 一个充满感情色彩的中文博客聚合网站，站长寄语：“
十年之约，即从加入这个活动起，我们的博客十年不关闭，保持更新和活力！”，而且十年之约官网将记录所有成员的加入时间、履约情况、博客大事记、博客陨落时间等信息！并且配有论坛和QQ群讨论。
3. [寻我-优秀个人独立博客列表](https://seekbetter.me/blogs) 之前还申请加入这个独立博客的列表，不过这几天发现这站已经打不开了，有几天提示为阿里云没有备案，再后来就彻底打不开了。这个博客列表网站我还是很喜欢的，真希望它能恢复。
4. [个站商店](https://storeweb.cn/site) 一个精致的，带社交元素的个人网站发布平台，博客收录网站。网站有些不错的更能，方便独立博客的站长互相交流，目前笔者还没有申请加入，后续会考虑的。
5. <a href="https://daohang.lusongsong.com/" target="_blank">博客大全</a> 卢松松旗下博客聚合网站，网站标明：18000+的博客，数据还是很大的。
6. <a href="https://bf.zzxworld.com/" target="_blank">BlogFinder</a> 发现优秀的个人博客,一个简洁的博客聚合网站。
7. <a href="https://sites.link/" target="_blank">站点聚合平台</a> 站点聚合平台，因为热爱，所以相聚，让更多的人知道您的网站。
8. <a href="https://firewood.news/" target="_blank">积薪</a>  - 依然相信文字的力量，一个非常不错的博客文章聚合类站点，是一个较新的博客聚合站点。！
9. <a href="https://chuanliu.org/" target="_blank">川流</a>  - 川流代表着信息的流动和传播，川流象征着思想和知识的碰撞与交流，川流代表着持续的发展和进步。

暂时就发现这些中文独立博客的聚合网站，如有遗漏，欢迎评论出补充。

### 关于独立博客

> 独立博客一般指在采用独立域名和网络主机的博客，既在空间、域名和内容上相对独立的博客。独立博客相当于一个独立的网站，而且不属于任何其他网站。相对于BSP下的博客，独立博客更自由、灵活，不受限制。

这阵子忙里偷闲的更新了一些博文，因为之前中间有段时间没有更新博客，所以对独立博客的这个圈子了解的也不是很多，最近通过一些独立博客的友情链接，发现了几个有意思的关于中文独立博客聚合的网址，觉得很有趣，不敢独享分享给大家。

一些关于中文独立博客的聚合网站


今天想写一段前端的效果，然后就手动使用原生JavaScript生成了一些HTML的DOM，其中有一些是带有`display:none;`隐藏的css属性的，我的本意是想隐藏这些元素并且不占用空间，但是使用JavaScript动态生成的DOM，动态添加的css属性`display:none;`的话，元素就会发生只隐藏但空间占用的情况还是存在。

原本使用CSS的"display: none"属性可以隐藏元素并且不占用空间，这意味着该元素在页面中不可见，并且在页面布局中也不会占用任何空间。这是因为"display: none"属性会将元素完全从文档流中移除，使其在页面上不再存在，因此不会影响页面布局。

如果使用CSS的"visibility: hidden"属性隐藏元素，则元素仍然会保留其空间，并占用其在页面布局中的位置，只是元素在页面上不可见。因此，如果您希望隐藏元素但不希望它占用任何空间，则应该使用"display: none"而不是"visibility: hidden"。

`需要注意的是:`如果您使用JavaScript在运行时动态更改元素的"display"属性，由于JavaScript会影响页面布局，所以此时元素可能会重新占用其在页面布局中的空间。因此，在使用JavaScript动态更改"display"属性时，应该谨慎考虑其对页面布局的影响。

今天想写一段前端的效果，然后就手动使用原生JavaScript生成了一些HTML的DOM，其中有一些是带有`display:none;`隐藏的css属性的，我的本意是想隐藏这些元素并且不占用空间，但是使用JavaScript动态生成的DOM，动态添加的css属性`display:none;`的话，元...

display:none没有隐藏元素所占空间的原因


TailwindCSS上手确实很好用，有点明显，但是坑也挺多的。本来打算使用TailwindCSS制作一个全新的博客主题，但是在实际的使用过程中有一些不爽细节不吐不快。

### TailwindCSS在使用中的缺点

1. 响应式布局后，在移动端加载页面如果使用了过渡效果，页面会有过渡的动画闪过，有点不爽。
2. hover:效果，添加修改宽度的w-8值的时候，没有实际的效果，但是修改背景的颜色是可以的，也就是说，hover:可能有一定的限制？并不是所有的效果都可以进行修改。
3. 没有组件，如果单单使用TailwindCSS，所有的组件内容都得自己做，官方的UI组件样式不足，貌似还收费。
4. 和其他的的框架组合使用会出现莫名其妙的坑。
5. 预置的颜色太少了，虽然可以自己编译添加。

这是目前发现的一些TailwindCSS使用中的坑。

### TailwindCSS的优点

1. 响应式布局很方便，把所有要用到的css属性都预置了。
2. 对元素进行一些基本的css样式设置非常方便，不用单独在sytle的文件里写代码了。
3. css的过渡和动画可以快速的使用起来。

以上就是昨天使用一天TailwindCSS的心得。

TailwindCSS上手确实很好用，有点明显，但是坑也挺多的。本来打算使用TailwindCSS制作一个全新的博客主题，但是在实际的使用过程中有一些不爽细节不吐不快。

再谈TailwindCSS的使用心得


今天在vscode中安装Tailwind CSS IntelliSense这个插件，但是安装完后，编写HTML中的class的时候并没有得到tailwindcss的代码提示，看来配置项设置有问题。

## 解决方法：

1. 打开vscode的首选项-用户配置的JSON文件，打开方法快捷键：cmd(ctrl)+shift+p 搜索：user 基本就能看到了。
2. 添加如下配置JSON代码：

    "editor.quickSuggestions": {
        "strings": true
    },

保存后重启vscode即可。

参考：

[Tailwind CSS IntelliSense 官方文档](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

今天在vscode中安装Tailwind CSS IntelliSense这个插件，但是安装完后，编写HTML中的class的时候并没有得到tailwindcss的代码提示，看来配置项设置有问题。

安装了Tailwind CSS IntelliSense插件 vscode没有代码提示


## Tailwind CSS 简介

「Atomic/Utility-First CSS」，是和「Semantic CSS 」(语义化 CSS ) 相对的一种 CSS 规范。不管你是否听说过「Semantic CSS 」这个名词，实际项目开发中，它都是我们最常用、也是最传统的 CSS 规范。Tailwind CSS是一种和传统CSS编写方式不一样的开发模式，Tailwind CSS编写大量的css的class，预置超多的css样式，让开发者可以通过在HTML的class中以命名的方式去调用这些class，几乎可以不用去写style的代码，只使用class的名称来代替。

## Tailwind CSS 环境搭建

最简单的方式就是通过引用CDN：

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

一个简单的例子：

    <div class="sm:container mx-auto h-64 bg-gray-100 flex">
        <div class="text-slate-950 text-2xl bg-gray-200 h-1/2 flex-1">11</div>
        <div class="text-blue-600 text-xl bg-gray-400 flex-1">222</div>
    </div>



<div class="sm:container mx-auto h-64 bg-gray-100 flex">
    <div class="text-slate-950 text-2xl bg-gray-200 h-1/2 flex-1">11</div>
    <div class="text-blue-600 text-xl bg-gray-400 flex-1">222</div>
</div>

再来看一个flex布局，以及box阴影的样式：

    <div class="flex flex-wrap sm:container bg-gray-200">
        <div class="shadow-sm w-48 h-48 m-5"></div>
        <div class="shadow w-48 h-48 m-5"></div>
        <div class="shadow-md w-48 h-48 m-5"></div>
        <div class="shadow-lg w-48 h-48 m-5"></div>
        <div class="shadow-xl w-48 h-48 m-5"></div>
        <div class="shadow-2xl w-48 h-48 m-5"></div>
    </div>

<div class="flex flex-wrap sm:container bg-gray-200">
    <div class="shadow-sm w-48 h-48 m-5"></div>
    <div class="shadow w-48 h-48 m-5"></div>
    <div class="shadow-md w-48 h-48 m-5"></div>
    <div class="shadow-lg w-48 h-48 m-5"></div>
    <div class="shadow-xl w-48 h-48 m-5"></div>
    <div class="shadow-2xl w-48 h-48 m-5"></div>
</div>
<br>


再来看文字排版：

    <div class="text-center mt-10">
        <p class="text-xs">Tailwind CSS</p>
        <p class="text-sm">Tailwind CSS</p>
        <p class="text-base">Tailwind CSS</p>
        <p class="text-lg">Tailwind CSS</p>
        <p class="text-xl">Tailwind CSS</p>
        <p class="text-2xl">Tailwind CSS</p>
        <p class="text-3xl">Tailwind CSS</p>
        <p class="text-4xl">Tailwind CSS</p>
        <p class="text-5xl">Tailwind CSS</p>
        <p class="text-6xl">Tailwind CSS</p>
    </div>

<div class="text-center mt-10">
    <p class="text-xs">Tailwind CSS</p>
    <p class="text-sm">Tailwind CSS</p>
    <p class="text-base">Tailwind CSS</p>
    <p class="text-lg">Tailwind CSS</p>
    <p class="text-xl">Tailwind CSS</p>
    <p class="text-2xl">Tailwind CSS</p>
    <p class="text-3xl">Tailwind CSS</p>
    <p class="text-4xl">Tailwind CSS</p>
    <p class="text-5xl">Tailwind CSS</p>
    <p class="text-6xl">Tailwind CSS</p>
</div>


## Tailwind CSS的优点

可以不再使用传统的style编写方式，通过预置的class可以减少更多的错误，而且熟练了之后css样式的编写会很快。因为预置，可以重复使用省去更多的时间。

## Tailwind CSS的缺点

每个class中要声明使用大量的css class，开始的时候可能会不太习惯，不过我几个小时后再用的时候我就觉得我已经离不开她了。


## 总结

Tailwind CSS上手简单，只要你略懂css的属性，这个框架对于你编写css样式绝对是如虎添翼。

参考：

[Tailwind CSS 中文官方文档](https://www.tailwindcss.cn/)

[使用 Tailwind CSS 一年后，我的一些感受](https://juejin.cn/post/6951300894684577823#heading-4)

[一次就能看懂的Tailwind CSS介绍](https://juejin.cn/post/7042901516499288077)




Tailwind CSS是一种和传统CSS编写方式不一样的开发模式，Tailwind CSS编写大量的css的class，预置超多的css样式，让开发者可以通过在HTML的class中以命名的方式去调用这些class，几乎可以不用去写style的代码，只使用class的名称来代替。

Tailwind CSS的安装配置和体验


今天愉快的写好了代码，准备提交，然后就这样了：

    (base) bash-3.2$ git push github master
    Counting objects: 5, done.
    Delta compression using up to 8 threads.
    Compressing objects: 100% (5/5), done.
    Writing objects: 100% (5/5), 484 bytes | 484.00 KiB/s, done.
    Total 5 (delta 4), reused 0 (delta 0)
    remote: Resolving deltas: 100% (4/4), completed with 4 local objects.
    remote: fatal error in commit_refs
    To https://github.com/bosichong/bosichong.github.io.git
    ! [remote rejected] master -> master (failure)
    error: failed to push some refs to 'https://github.com/bosichong/bosichong.github.io.git'


Google搜索没有解答，stackoverflow查了一下，都是以前的记录，大体意思是GitHub的服务器挂了。我还是有点不信，然后去推特看了下GitHub的官方账号，也发布相应的公告，有关GitHub服务器的响应可以查看这个网站：https://www.githubstatus.com/ ,看来，我得过会才能提交代码了？先休息一下吧，或许GitHub正在重启那些成千上万的服务器：）所以这个问题的解决办法就是耐心等待啦。

Git提示 ! [remote rejected] master -> master (failure) 的解决办法。

Git提示 ! [remote rejected] master -> master (failure)

很久以前，在JavaScript中发送请求或者获取资源的时候很多人都是用的是`jQuery`，直到最近一直使用`axios`，但有的时候不想使用第三方的请求的库，这个时候你可以试试Fetch。

现代浏览器基本上都支持fetch，包括node18以上的版本，除了IE。


### 曾经的请求方式jQuery

曾经的回忆，jQuery发送get请求：


    $.get( "foo.php", function( response ) {
        console.log( response ); // server response
    });

后来的axios的get请求代码：

    // 向给定ID的用户发起请求
    axios.get('/user?ID=12345')
    .then(function (response) {
        // 处理成功情况
        console.log(response);
    })
    .catch(function (error) {
        // 处理错误情况
        console.log(error);
    })
    .then(function () {
        // 总是会执行
    });

### 现代JavaScript的请求

在看看Fetch的get请求代码示例：

    <img id="dog" />
    <script>
        fetch('https://dog.ceo/api/breeds/image/random')
            .then((res) => {
                return res.json()
            }).then((result) => {
            document.getElementById("dog").src = result.message;
        })
            .catch((err) => {
            })
    </script>

这个请求会返回一个图片地址，随机显示一只可爱的狗狗图片。

<img id="dog" />
<script>
    fetch('https://dog.ceo/api/breeds/image/random')
        .then((res) => {
            return res.json()
        }).then((result) => {
        document.getElementById("dog").src = result.message;
    })
        .catch((err) => {
        })
</script>
    
再试试一个post的请求，这里我们使用`https://echo.apifox.com/post`这个免费的测试接口，这个接口有两个Body参数 (application/json)：d和dd.

    let myHeaders = new Headers();
    myHeaders.append("User-Agent", "Apifox/1.0.0 (https://www.apifox.cn)");
    myHeaders.append("Content-Type", "application/json");

    let raw = JSON.stringify({
        "d": "hello",
        "dd": "world"
    });

    let requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow'
    };

    fetch("https://echo.apifox.com/post", requestOptions)
        .then(response => response.json())
        .then((rest)=>{
            let d = JSON.parse(rest.data);
            console.log(d.d+d.dd) })
        .catch(error => console.log('error', error));


在node环境下，运行脚本，会输出：helloworld。

以上就是fetch的简单用法，fetch使用需要注意的是在node环境中需要18+的版本，现代浏览器除了IE基本上都是支持fetch的。


参考：

[fetch()](https://developer.mozilla.org/zh-CN/docs/Web/API/fetch#%E8%AF%AD%E6%B3%95)

[Fetch_API](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API)

[Apifox Echo](https://echo.apifox.cn/doc-1406337)




很久以前，在JavaScript中发送请求或者获取资源的时候很多人都是用的是`jQuery`，直到最近一直使用`axios`，但有的时候不想使用第三方的请求的库，这个时候你可以试试Fetch。

使用Fetch发送Ajax请求

这阵子一直在读编程相关的工具书，枯燥乏味的很！昨天偶然间在哪里？不记得是哪里看到的有人推荐《写作是门手艺》这本书，赶紧去京东淘了一本，今天就收到了。

为什么要看这本书？很简单，就是想把博文写的更畅快一些，随手翻翻这本书，看了前几章也有一些收获，至少能让我提问与思考。写作和编程甚至是画画有很多相似的地方，例如结构化、表现手法、技巧和实际经验等等很多吧，世间万物皆有共同点。

其实我的博文大多都是一些技术实践的记录，记录下来只是为了重复记忆加深印象，通过写作记录检查对知识掌握程度，或是日后忘记的时候有个查询的地方。

《写作是门手艺》这本书主要是教你写论文，此书开篇引导读者去思考去联想，很吸引人去把这本书看下去，期待。。。这几天要把她看完。

这阵子一直在读编程相关的工具书，枯燥乏味的很！昨天偶然间在哪里？不记得是哪里看到的有人推荐《写作是门手艺》这本书，赶紧去京东淘了一本，今天就收到了。

读《写作是门手艺》的思考


Link-Validator 一个检测对方网站友情链接页面是否添加自己网站链接的JavaScript脚本。


## 作者

- [@bosichong](https://github.com/bosichong)
- [Link-Validator项目地址](https://github.com/bosichong/Link-Validator)


## 在本地运行

Clone 这个 project


    git clone https://link-to-project


前往项目目录


    cd my-project

编辑`lv.js`文件，添加修改头部的'links'，把需要检测的友情链接页面加入，

修改`siteUrl = 'suiyan.cc'`为你自己的网址。

格式如下：


    let siteUrl = 'suiyan.cc'
    let links = [
        {
            site: "碎言博客",
            ulr: "https://suiyan.cc/aboutme.html"
        },
        {
            site: "糊涂说",
            ulr: "https://hutusi.com/links/"
        },
        {
            site: "Jason",
            ulr: "http://atjason.com/links/"
        },
        {
            site: "咕咚同学",
            ulr: "https://gudong.site/links.html"
        }
    ];


启动服务器


    node lv.js



## 技术栈

JavaScript 原生代码，node环境下即可运行。

原理：采集对方的友情链接页面，搜索自己的网址是否存在即可验证友联是否存在。


## 🚀 关于
写这个脚本是为了方便检测我的博客友联状况，那么有没有独立博客的小伙伴互换个链接呢？

我的博客：碎言博客

链接：[https://suiyan.cc/](https://suiyan.cc/)


## 致谢

- [非常棒的 Readme 模板](https://awesomeopensource.com/project/elangosundar/awesome-README-templates)
- [非常棒的 README](https://github.com/matiassingers/awesome-readme)
- [如何写好 readme](https://bulldogjob.com/news/449-how-to-write-a-good-readme-for-your-github-project)



Link-Validator 一个检测对方网站友情链接页面是否添加自己网站链接的JavaScript脚本。

要创建链接悬停时滑动的下划线效果，可以向锚点标记添加伪元素，并使用CSS过渡动画来显示它。

css链接悬停时滑动的下划线效果


css 有很多神奇的效果都是使用 CSS 伪元素利用视觉差来制作的，以前没怎么深入的研究过 css，这次复习 css 的知识点才恍然大悟，原来 css 这么 cool。


### 动画实现原理

这个组动画的实现原理很简单，前边是一个 div，这个 div 后边再加一个 div 做动画就可以实现了，那么我们需要前后两个 div 叠加在一起？NoNoNo，这个时候就需要 CSS 伪元素::before 和::after 出场了。

### CSS 伪元素`::before` 和`::after`

> CSS 伪元素::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

`::before` 和`::after` 的区别就是一前一后，举个简单的例子：


举个例子：

<div id="demo1">这是顶部的div</div>
<style>
    #demo1{
        position: relative;
        width:100px;
        height:100px;
        color: white;
        background-color: black;
    }
    #demo1::before{
        content:'';
        position: absolute;
        width:110px;
        height:110px;
        z-index: -1;
        top:-5px;
        left:-5px;
        background-image: linear-gradient(
                    var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
    }
    #demo1::after{
        content:'';
        position: absolute;
        width:120px;
        height:120px;
        z-index: -2;
        top:-10px;
        left:-10px;
        background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
    }
</style>
<br>


代码如下：

    <div id="demo1">这是顶部的div</div>
    <style>
        #demo1{
            position: relative;
            width:100px;
            height:100px;
            color: white;
            background-color: black;
        }
        #demo1::before{
            content:'';
            position: absolute;
            width:110px;
            height:110px;
            z-index: -1;
            top:-5px;
            left:-5px;
            background-image: linear-gradient(
                        var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
        }
        #demo1::after{
            content:'';
            position: absolute;
            width:120px;
            height:120px;
            z-index: -2;
            top:-10px;
            left:-10px;
            background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
        }
    </style>

这段 css 代码中有几个关键的属性

1. div 必须作为伪元素定位的父类 position: relative;
2. 伪元素为相对于 div 定位 position: absolute;
3. 通过其他css属性来定义伪元素的属性，产生层叠和视觉上的错位。

最后就是利用 animation 来制作动画了，动画的效果可以选择移动旋转或是透明度，可以产生各种超酷的效果。

看下最后的效果：

<div id="demo2">这是顶部的div</div>
<style>
    @property --rotate {
            syntax: "<angle>";
            initial-value: 132deg;
            inherits: false;
        }
    #demo2{
        position: relative;
        width:103px;
        height:103px;
        color: white;
        background-color: black;
        border-radius: 8px;
        padding: 3px;
    }
    #demo2::before {
        content: "";
        width: 112px;
        height: 112px;
        border-radius: 8px;
        background-image: linear-gradient(
                    var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
        position: absolute;
        z-index: -1;
        top: -5px;
        left: -5px;
        animation: spin1 2.5s linear infinite;
        }
    #demo2::after{
        position: absolute;
        content: "";
        top:30px;
        left: 0;
        right: 0;
        z-index: -1;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        transform: scale(0.8);
        filter: blur(30px);
        background-image: linear-gradient(
                    var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
        opacity: 1;
        transition: opacity .5s;
        animation: spin1 2.5s linear infinite;
    }
    @keyframes spin1 {
            0% {
                --rotate: 0deg;
            }
            100% {
                --rotate: 720deg;
            }
        }
</style>
<br>
完整的效果代码如下：

    <div id="demo2">这是顶部的div</div>
    <style>
        @property --rotate {
                syntax: "<angle>";
                initial-value: 132deg;
                inherits: false;
            }
        #demo2{
            position: relative;
            width:103px;
            height:103px;
            color: white;
            background-color: black;
            border-radius: 8px;
            padding: 3px;
        }
        #demo2::before {
            content: "";
            width: 112px;
            height: 112px;
            border-radius: 8px;
            background-image: linear-gradient(
                        var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
            position: absolute;
            z-index: -1;
            top: -5px;
            left: -5px;
            animation: spin1 2.5s linear infinite;
            }
        #demo2::after{
            position: absolute;
            content: "";
            top: calc(var(--card-height) / 6);
            left: 0;
            right: 0;
            z-index: -1;
            height: 100%;
            width: 100%;
            margin: 0 auto;
            transform: scale(0.8);
            filter: blur(calc(var(--card-height) / 5));
            background-image: linear-gradient(
                        var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
            opacity: 1;
            transition: opacity .5s;
            animation: spin1 2.5s linear infinite;
        }
        @keyframes spin1 {
                0% {
                    --rotate: 0deg;
                }
                100% {
                    --rotate: 720deg;
                }
            }
    </style>

这个 css 的效果主要是靠伪类的动画来实现的，具体的细节还需要自己多多调试修改各个参数，使之达到自己的期望的动效。


css有很多神奇的效果都是使用CSS伪元素利用视觉差来制作的，以前没怎么深入的研究过css，这次复习css的知识点才恍然大悟，原来css这么cool。

使用CSS伪元素制作动感超酷的hover动画

要在CSS中创建动画，我们可以使用animation属性。该属性允许我们指定动画的关键帧、持续时间、时间函数、延迟和迭代次数。

以下是对各个属性的介绍：

- animation-name: 指定要应用于元素的动画名称。
- animation-duration: 指定动画的持续时间。
- animation-timing-function: 指定动画的时间函数，用于控制动画的速度。
- animation-delay: 指定动画的延迟时间，即动画开始之前的等待时间。
- animation-iteration-count: 指定动画的迭代次数，可以是一个数字或infinite。
- animation-direction: 指定动画的播放方向，可以是normal、reverse、alternate或alternate-reverse。
- animation-fill-mode: 指定动画在播放前和播放后如何应用样式，可以是none、forwards、backwards或both。
- animation-play-state: 指定动画的播放状态，可以是running或paused。


以下是一个简单的例子：

<style>
        @keyframes example {
            0% {
                background-color: red;
            }

            25% {
                background-color: yellow;
                width: 150px;
            }

            75% {
                background-color: green;
                width: 200px;
            }
            100%{
                background-color: red;
            }
        }

        .box {
            width: 100px;
            height: 100px;
            animation-name: example;
            animation-duration: 4s;
            animation-timing-function: ease-out;
            animation-delay: 1s;
            animation-iteration-count: infinite;
        }
</style>
<div class="box"></div>


    <style>
            /* 添加一个过渡效果 */
            .box {
                width: 100px;
                height: 100px;
                transition: all 2s ease-in 1s;
            }

            /* 鼠标悬停时改变宽度 */
            .box:hover {
                width: 200px;
                height: 200px;
                transform: rotate(180deg);
                opacity: 0.5;
            }

            @keyframes example {
                0% {
                    background-color: red;
                }

                25% {
                    background-color: yellow;
                    width: 150px;
                }

                75% {
                    background-color: green;
                    width: 200px;
                }
                100%{
                    background-color: red;
                }
            }

            .box {
                width: 100px;
                height: 100px;
                animation-name: example;
                animation-duration: 4s;
                animation-timing-function: ease-out;
                animation-delay: 1s;
                animation-iteration-count: infinite;
            }
    </style>
    <div class="box"></div>

这个css动画包含了animation的常用属性，仔细观察可以了解到各个属性的含义，修改其属性值，观察盒子模型的动画的变化有助于了解这些属性的含义。

要在CSS中创建动画，我们可以使用animation属性。该属性允许我们指定动画的关键帧、持续时间、时间函数、延迟和迭代次数。

CSS动画animation的简单应用


CSS 的`transition`允许您对 CSS 属性的更改进行动画处理，这对于在网站上创建平滑和视觉上吸引人的效果非常有用。

要创建一个过渡，您需要使用 transition 属性。该属性允许您指定要过渡的 CSS 属性，以及过渡的持续时间、时间函数和延迟。以下是 transition 属性的语法：

    transition: property duration timing-function delay;

- property：这是您要过渡的 CSS 属性的逗号分隔列表。例如，background-color 或 width。
- duration：这是过渡所需的时间长度，以秒（s）或毫秒（ms）为单位。例如，1s 或 500ms。
- timing-function：这控制过渡的变化速率。有几个内置的时间函数可用，例如 ease、linear、ease-in、ease-out 和 ease-in-out。您还可以使用 cubic-bezier()函数创建自定义时间函数。
- delay：这是在开始过渡之前等待的时间量，以秒（s）或毫秒（ms）为单位。例如，0.5s 或 250ms。

以上属性可以简写在`transition`中，如果单独设置需要添加 transition 前缀，例如：`transition-duration`.

一个简单的小栗子，请使用鼠标划过这个盒子：

<style>
    /* 添加一个过渡效果 */
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: all 2s ease-in 0.5s;
    }

    /* 鼠标悬停时改变宽度 */
    .box:hover {
        width: 300px;
        height: 200px;
        background-color: blue;
        transform: rotate(180deg);
        opacity: 0.5;
    }
</style>
<div class="box"></div>

代码如下：

    <style>
        /* 添加一个过渡效果 */
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 2s ease-in 0.5s;
        }

        /* 鼠标悬停时改变宽度 */
        .box:hover {
            width: 300px;
            height: 200px;
            background-color: blue;
            transform: rotate(180deg);
            opacity: 0.5;
        }
    </style>
    <div class="box"></div>

需要注意的是，并非所有属性都可以过渡。以下是一些不能过渡的属性：

- display：此属性控制元素在页面上的显示方式，不能过渡。
- visibility：此属性控制元素是否可见，不能过渡。
- height和width（当设置为auto时）：当这些属性的值设置为auto时，不能过渡。
- margin和padding（当设置为auto时）：当这些属性的值设置为auto时，不能过渡。
- background-image：此属性不能直接过渡，但是您可以过渡background-position属性以创建类似的效果。

这不是详尽无遗的列表，可能还有其他不能过渡的属性。如果您不确定某个属性是否可以过渡，可以尝试一下，看看是否有效。

至此，您对css的`transition`应该有了一个了解。

CSS的transition允许您对CSS属性的更改进行动画处理，这对于在网站上创建平滑和视觉上吸引人的效果非常有用。

css的过渡效果transition的使用

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。而Element Plus是一款基于Vue3面向设计师和开发者的组件库。

最终效果：

![](https://suiyan.cc/assets/images/2023/elementtest.gif)

### 环境搭建

已安装 16.0 或更高版本的 Node.js，终端：

    npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

    ✔ Project name: … <your-project-name>
    ✔ Add TypeScript? … No / Yes
    ✔ Add JSX Support? … No / Yes
    ✔ Add Vue Router for Single Page Application development? … No / Yes
    ✔ Add Pinia for state management? … No / Yes
    ✔ Add Vitest for Unit testing? … No / Yes
    ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
    ✔ Add ESLint for code quality? … No / Yes
    ✔ Add Prettier for code formatting? … No / Yes

    Scaffolding project in ./<your-project-name>...
    Done.

然后：

    > cd <your-project-name>
    > npm install
    > npm run dev

然后打开提示的演示网址就能看到Vue的预览页面了。

### Element Plus

element+的安装：

    npm install element-plus --save
    npm install @element-plus/icons-vue

上边安装了element和内置的图标库。

    // main.js
    import { createApp } from 'vue'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import App from './App.vue'

    const app = createApp(App)

    app.use(ElementPlus)
    app.mount('#app')

然后再入口处引入element即可使用element了。

### 明暗主题的切换

明暗主题的切换非常简单，首先在项目的index.html中添加class="dark"：

    <html lang="en" class="dark">

在组件中使用Vueuse的内置函数就可以搞定了。

    import { useDark, useToggle } from '@vueuse/core'
    const toggleDark = useToggle(isDark)

模板里添加一个开关

    <el-switch v-model="isDark" size="large" class="mt-2" style="margin-left: 24px" inline-prompt :active-icon="Moon" :inactive-icon="Sunny" />

这样就可以自由切换应用的明暗主题了,其他具体代码可以查看代码仓库

最后，项目地址：

[https://github.com/bosichong/elementplus-test-demo](https://github.com/bosichong/elementplus-test-demo)

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。而Element Plus是一款基于Vue3面向设计师和开发者的组件库