【HTML】纯CSS居然能做出这种效果,一款宝藏网页分享(超详细讲解 | 附源码)

news2025/4/7 16:55:48

在这里插入图片描述

💂作者简介: THUNDER王,一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读,同时任汉硕云(广东)科技有限公司ABAP开发顾问。在学习工作中,我通常使用偏后端的开发语言ABAP,SQL进行任务的完成,对SAP企业管理系统,SAP ABAP开发和数据库具有较深入的研究。


💅文章概要: 各位C站的小伙伴们,今天我发现了一款纯CSS效果实现的精美页面,通过hover控件便可以实现网页的动态效果,无需引入Javascript。让我们一起来看看吧!收藏我并且关注博主,让我们拿起电脑一起练,一路火光带闪电!


🤟每日一言: 你可以遗憾,但是你绝对不能后悔。遗憾证明你努力过了,只是力有不逮。而后悔,只能说明你当时没努力过。


目录

    • 前言
    • CSS:Hover选择器介绍
    • 纯CSS实现动态页面效果演示
    • 实现思路
      •  背景的设置
        •   HTML+CSS源码
      •  抬头栏设计
        •   HTML源码
        •   CSS源码
      •  左侧文本悬浮布局设计
        •   HTML源码
        •   CSS源码
      •  右侧星球悬浮布局设计
        •   HTML源码
        •   CSS源码
      •  右侧视频悬浮布局设计
        •   HTML源码
        •   CSS源码
      •  右侧文本悬浮布局设计
        •   HTML源码
        •   CSS源码
    • 完整源码
    • 写在最后的话


前言

在这里插入图片描述

  各位C站的小伙伴们,今天我发现了一款纯CSS效果实现的精美页面,通过hover控件便可以实现网页的动态效果,无需引入Javascript。让我们一起来看看吧!收藏我并且关注博主,让我们拿起电脑一起练,一路火光带闪电!


CSS:Hover选择器介绍

在这里插入图片描述
  首先我们要请出场的便是CSS:Hover选择器控件,它是实现本文页面效果最关键的控件
  CSS:Hover选择器用于选择鼠标指针浮动在上面的元素,它适用于所有元素,可以用来实现类似于Javascript的一些功能。
  CSS中Hover属性,鼠标移到上面的时候可以激活,它可以实现悬浮元素上改变样式,改变子元素的样式,改变同级的样式以及改变就近元素的样式等。

  PS:关于CSS:Hover选择器语法的介绍网上已经有很多了,本文不再进行赘述啦


纯CSS实现动态页面效果演示

在这里插入图片描述

  目前来说,该页面只支持PC端进行演示,暂时不支持移动端,还未进行响应式或者自适应适配,后续假如时间充裕,我会尝试做一版移动端的适配


实现思路

  看完效果图后,各位小伙伴们肯定很想知道实现的思路,接下来我将分步骤逐一进行讲解,如果想要获取源码的小伙伴可以跳过该部分,直接前往最后的完整源码章节!,在分步讲解中我会将HTMLCSS两个部分全部放在同一个文件中,方便各位小伙伴们获取!
  除此之外,为了方便各位小伙伴们免受图片和视频链接找不到的烦恼,我已经将所有图片和视频上载到我的个人网站里并且将【图片 | 视频】链接直接替换到了代码中,所以小伙伴们复制代码的时候不需要再考虑图片或者视频丢失问题!复制整个源码到一个HTML文件中即可完整显示注册表单效果图!
  最后:代码中按钮部分的链接设置为空了,小伙伴们可以根据需要自行添加!
  我将实现思路分成了如下五个部分,列举如下:

  • 背景的设置
  • 抬头栏设计
  • 左侧文本悬浮布局设计
  • 右侧星球悬浮布局设计
  • 右侧视频悬浮布局设计
  • 右侧文本悬浮布局设计

 背景的设置

  通过使用HTML和CSS可以完成整个页面背景的设计。背景颜色采取了底色为米白色,中间的盒子模型为白色的设计,米白色和白色相互交错叠加,具有一种高级感错落感

在这里插入图片描述

  HTML+CSS源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现动画交互</title>
    <style> 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f1ede5;

}

.wrap {
    width: 1340px; 
    height:800px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 10px 10px 50px rbga(0, 0, 0, 0.1);
    display: grid;
    grid-template-rows: 100px 1fr;
    overflow: hidden;
}
   </style>
</head>
<body>
    <div class="wrap">
    </div>
</body>
</html>

 抬头栏设计

  采取HTML+CSS样式可以设计出抬头栏的样式,抬头栏中间放置了一个图标,右侧放置了一个按钮,抬头栏不会因为Hover控件而移动。
在这里插入图片描述

  HTML源码

  复制如下源码粘贴到<div class="wrap"></div>标签之间
在这里插入图片描述

      <!-- 开始抬头栏项目-->
       <div class="nav">
			<div class="menu">
                <span></span>
            </div>
            <div class="logo">
                <img src="img/logo.png" alt="" />
            </div>
            <div class="btn">Play Now</div>
        </div>

  CSS源码

  复制如下源码粘贴到<style></style>标签之间

.nav {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 50px;
    background: #fff;
}

.btn {
    border: 1px solid #e1e1e0;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
}


 左侧文本悬浮布局设计

  使用HTMLCSS设计出左侧文本段落的样式,没啥重点的,直接上代码

  PS:这一段落设计的样式其实是动态的,因为用户需要将光标悬浮在内部盒子中,左侧文本段落才会从左侧向右侧进入,所以默认情况下左侧文本段落是被隐藏起来的

在这里插入图片描述

  HTML源码

  复制如下源码粘贴到<div class="wrap"></div>标签之间
在这里插入图片描述

      <!-- 开始框中内容布局-->
      <div class="content">
          <!-- 左侧文本段落-->
          <div class="text">
              <h1>Join the</h1>
              <h1>intergalactic</h1>
              <h1>battle.</h1>
              <h2>Play-to-Earn NFT marketplace</h2>
              <div class="more">Get a character</div>
              <div class="page">
                  <span>1 —— 5</span>
              </div>
          </div>
       </div>

  CSS源码

  复制如下源码粘贴到<style></style>标签之间

.content {
    width: 1240px;
    height: 650px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
}

.text {
    position: absolute;
    left: -500px;
    transition: 0.5s;
    opacity: 0;
}

.text h1 {
    font-size: 70px;
    line-height: 100%;
}

.text h2 {
    font-size: 32px;
    padding: 30px 0;
    font-weight: 200;
}

.more {
    width: 150px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e46036;
    color: #fff;
    border-radius: 10px;
}

.page {
    margin-top: 80px;
}

.page span {
    font-size: 18px;
}

.content:hover .text {
    position: absolute;
    left: 0;
    opacity: 1;
    z-index: 888;
}

 右侧星球悬浮布局设计

  使用HTMLCSS设计出右侧星球布局的样式,直接上代码

  PS:这一段落设计的样式其实是动态的,因为用户需要将光标悬浮在内部盒子中,右侧三个星球才会从右侧向左侧进入,所以默认情况下右侧三个星球是被隐藏起来的

在这里插入图片描述

  HTML源码

  复制如下源码粘贴到<div class="content"></div>标签之间
在这里插入图片描述

        <!--图片-->
       <img class="star1" src="img/qiu1.png" alt="" />
      <img class="star2" src="img/qiu2.png" alt="" />
       <img class="star3" src="img/qiu3.png" alt="" />

  CSS源码

  复制如下源码粘贴到<style></style>标签之间

.star1 {
    position: absolute;
    top: 20%;
    left: 110%;
    z-index: 999;
    transition: 1s;
    animation: bounce 3s infinite;
}

.star2 {
    position: absolute;
    top: 80%;
    left: 110%;
    z-index: 999;
    transition: 1s;
    animation: bounce 3s infinite;
}

.star3 {
    position: absolute;
    top: 50%;
    left: 150%;
    z-index: 999;
    transition: 1s;
    animation: bounce 3s infinite;
}

.content:hover .star1 {
    position: absolute;
    top: 20%;
    left: 45%;
    z-index: 999;
}

.content:hover .star2 {
    position: absolute;
    top: 80%;
    left: 42%;
    z-index: 999;
}

.content:hover .star3 {
    position: absolute;
    top: 50%;
    left: 96%;
    z-index: 999;
}

 右侧视频悬浮布局设计

  使用HTMLCSS设计出右侧星球布局的样式。<img>标签可以引入视频,muted loop autoplay属性可以使视频一直循环自动播放。

  PS:这一段落设计的样式其实是动态的,因为用户需要将光标悬浮在内部盒子中,右侧视频才会收缩成百分之50的样式,所以默认情况下右侧视频是充满整个内部盒子的

在这里插入图片描述

  HTML源码

  复制如下源码粘贴到<div class="content"></div>标签之间
在这里插入图片描述

       <!-- 视频-->
       <div class="video">             
              <video src="img/video.mp4" muted loop autoplay></video>
       </div>

  CSS源码

  复制如下源码粘贴到<style></style>标签之间

.video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    transition: 0.5s;
}

.content:hover .video {
    width: 50%;
    position: absolute;
    right: 0px;
    top: 0px;
}

 右侧文本悬浮布局设计

  使用HTMLCSS设计出右侧文本布局的样式。

  PS:这一段落设计的样式其实是动态的,因为用户需要将光标悬浮在内部盒子中,右侧文本才会向左侧进行隐藏,所以默认情况下右侧文本是充满整个内部盒子并且居中置于视频之上的

在这里插入图片描述

  HTML源码

  复制如下源码粘贴到<div class="video"></div>标签之间
在这里插入图片描述

    <div class="slogan">
         <h1>Protect your planet.</h1>
         <h1>Earn 2x money.</h1>
         <div class="more">Get a character</div>
    </div> 

  CSS源码

  复制如下源码粘贴到<style></style>标签之间

.slogan {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 15%;
    left: 0;
    transition: 0.5s;
}

.slogan .more {
    margin: 50px auto;
}

.slogan h1 {
    font-size: 70px;
    line-height: 120%;
    color: #fff;
}


.content:hover .slogan {
    position: absolute;
    left: -600px;
}

完整源码

  各位小伙伴只需要复制以下所有源码然后新建一个HTML文件将源码复制进去,然后就可以直接运行了!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现动画交互</title>
    <style> 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f1ede5;

}

.wrap {
    width: 1340px; 
    height:800px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 10px 10px 50px rbga(0, 0, 0, 0.1);
    display: grid;
    grid-template-rows: 100px 1fr;
    overflow: hidden;
}

.nav {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 50px;
    background: #fff;
}

.btn {
    border: 1px solid #e1e1e0;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
}

.content {
    width: 1240px;
    height: 650px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
}

.text {
    position: absolute;
    left: -500px;
    transition: 0.5s;
    opacity: 0;
}

.text h1 {
    font-size: 70px;
    line-height: 100%;
}

.text h2 {
    font-size: 32px;
    padding: 30px 0;
    font-weight: 200;
}

.more {
    width: 150px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e46036;
    color: #fff;
    border-radius: 10px;
}

.page {
    margin-top: 80px;
}

.page span {
    font-size: 18px;
}

.content:hover .text {
    position: absolute;
    left: 0;
    opacity: 1;
    z-index: 888;
}

.star1 {
    position: absolute;
    top: 20%;
    left: 110%;
    z-index: 999;
    transition: 1s;
    animation: bounce 3s infinite;
}

.star2 {
    position: absolute;
    top: 80%;
    left: 110%;
    z-index: 999;
    transition: 1s;
    animation: bounce 3s infinite;
}

.star3 {
    position: absolute;
    top: 50%;
    left: 150%;
    z-index: 999;
    transition: 1s;
    animation: bounce 3s infinite;
}

.content:hover .star1 {
    position: absolute;
    top: 20%;
    left: 45%;
    z-index: 999;
}

.content:hover .star2 {
    position: absolute;
    top: 80%;
    left: 42%;
    z-index: 999;
}

.content:hover .star3 {
    position: absolute;
    top: 50%;
    left: 96%;
    z-index: 999;
}

.video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    transition: 0.5s;
}

.content:hover .video {
    width: 50%;
    position: absolute;
    right: 0px;
    top: 0px;
}

.slogan {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 15%;
    left: 0;
    transition: 0.5s;
}

.slogan .more {
    margin: 50px auto;
}

.slogan h1 {
    font-size: 70px;
    line-height: 120%;
    color: #fff;
}


.content:hover .slogan {
    position: absolute;
    left: -600px;
}
</style>
</head>
<body>
    <div class="wrap">
		
		<!-- 开始抬头栏项目-->
       <div class="nav">
			<div class="menu">
                <span></span>
            </div>
            <div class="logo">
                <img src="img/logo.png" alt="" />
            </div>
            <div class="btn">Play Now</div>
        </div>
        
        <!-- 开始框中内容布局-->
      <div class="content">
          <!-- 左侧文本段落-->
          <div class="text">
              <h1>Join the</h1>
              <h1>intergalactic</h1>
              <h1>battle.</h1>
              <h2>Play-to-Earn NFT marketplace</h2>
              <div class="more">Get a character</div>
              <div class="page">
                  <span>1 —— 5</span>
              </div>
          </div>
          
            <!--图片-->
        <img class="star1" src="img/qiu1.png" alt="" />
        <img class="star2" src="img/qiu2.png" alt="" />
        <img class="star3" src="img/qiu3.png" alt="" />      
       
           <!-- 视频-->
         <div class="video">             
               <video src="img/video.mp4" muted loop autoplay></video>
               <div class="slogan">
                  <h1>Protect your planet.</h1>
                  <h1>Earn 2x money.</h1>
               <div class="more">Get a character</div>
              </div>             
         </div>        
      </div>            		
    </div>
</body>
</html>


写在最后的话

  本文花费大量时间介绍了如何使用纯CSS实现类似Javascript效果的一个精美页面,希望能帮助到各位小伙伴,码文不易,还望各位大佬们多多支持哦,你们的支持是我最大的动力!
在这里插入图片描述

原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力! \textcolor{9c81c1}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{ed7976}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{98c091}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/146159.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【ASP.NET】家乡网站设计作业「历史」「人文」「自然」「美食」「高中」

文章目录作业描述结果展示代码MasterPage.master(母版页)首页历史页人文页美食页景观页高中页完整资源链接上学期其中ASP.NET网站设计老师布置的作业&#xff0c;在此记录一下&#xff1b;作业描述 为自己的家乡设计一个网站&#xff1a; 要求&#xff1a; 1.网站主要是展示和…

TYPE-C和USB-C接口有什么区别?

USB-C接口全称为USB Type-C&#xff0c;属于USB 3.0下一代接口&#xff0c;其亮点在于更加纤薄的设计、更快的传输速度&#xff08;最高可达10Gbps&#xff09;、更强的电力传输&#xff08;最高100W&#xff09;&#xff0c;此外USB-C接口还支持双面插入&#xff0c;正反面随便…

【NCC】之三:FFT(DFT)加速协方差的计算

FFT加速计算两个图的协方差文章目录<center> FFT加速计算两个图的协方差1. 傅里叶变换和卷积1.1 卷积定理1.2 空域卷积和频域乘积的复杂度2. opencv中的DFT3. FFT用于NCC4. 测试结果部分代码1. 傅里叶变换和卷积 1.1 卷积定理 图片来源 在空域上的卷积就是上面的动图所展…

再学C语言27:输入和输出——缓冲区

I/O函数&#xff1a;输入/输出函数 I/O函数将信息传输至程序并从程序中传出信息&#xff0c;如printf()、scanf()、getchar()、putchar()等函数 getchar()和putchar()每次输入/输出一个字符 示例代码&#xff1a; #include <stdio.h> int main(void) {char c;// 输入回…

Vivado综合设置之-resource_sharing

-​resource_sharing用于对算数运算&#xff08;加法、减法和乘法&#xff09;实现资源共享&#xff0c;以节约LUT资源&#xff0c;有3个值&#xff1a;auto、off和on&#xff0c;默认是auto。 默认情况下&#xff0c;将resource_sharing设置为auto即可。 本文验证-resource_…

[Leetcode] 将二叉搜索树变平衡

将二叉搜索树变平衡&#xff1a;https://leetcode.cn/problems/balance-a-binary-search-tree/给你一棵二叉搜索树&#xff0c;请你返回一棵 平衡后的二叉搜索树&#xff0c;新生成的树应该与原来的树有着相同的节点值。如果有多种构造方法&#xff0c;请你返回任意一种。如果一…

Codeforces Round #842 (Div. 2)-C. Elemental Decompress

题目&#xff1a; 题目大意&#xff1a; 给定一个数列t&#xff0c;你构造两个数列a和b&#xff0c;使得max(a[i],b[i])t[i] 核心思想&#xff1a; 1、先根据给出的数组进行放置&#xff0c;优先放到a数组中&#xff0c;如果这个数已经在a数组中出现了&#xff0c;再去放到b数…

sentinel的使用

一、sentinel控制台的使用1、sentinel控制台jar包地址&#xff1a;Releases alibaba/Sentinel GitHub账号密码都为sentinel控制台访问地址&#xff1a;http://localhost:80802、sentinel的maven坐标<dependency><groupId>com.alibaba.cloud</groupId><a…

Android基础入门教程——2.2 LinearLayout(线性布局)

总结图片2. weight权重白色占总数量的2份&#xff0c;绿色占总数的1份。<?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.co…

树莓派最新版系统烧写和网络配置

树莓派笔记1.树莓派烧写篇2.树莓派WIFI配置篇3.树莓派ping外网4.树莓派git篇5.参考1.树莓派烧写篇 目前烧写最新版本32位系统(2022-09-22发布的)&#xff0c;默认移除了pi用户&#xff0c;没有用户就无法SSH登录(无屏幕)&#xff0c;建议使用raspberry pi imager烧写工具&…

通过USB转TTL串口下载stm32程序

文章目录前言一、硬件及其接线二、使用步骤1.主芯片STM32F103C8T6开发板2.转串口模块接线3.CH340驱动及安装方法4.CH340驱动及安装方法4.下载测试5.0.91寸OLED 接口演示例程前言 前期我们下载程序都是使用STlink进行下载的&#xff0c;现在给大家提供一种新的程序下载方法&…

5G小基站国产化超五成,美国芯片仅占1%,难怪美国芯片难卖了

日前日媒拆解中国某科技企业的5G小基站&#xff0c;发现它的中国零部件占比达到55%&#xff0c;而来自美国的零部件占比仅为1%&#xff0c;显示出这家企业在去美化取得了重大进展&#xff0c;如此也就能理解为何如今美国芯片难卖了。日媒指出该科技企业的5G小基站国产化零部件占…

动态规划 完全背包问题

目录 LintCode 炼码完全背包问题 【解法一】 【解法二】 完全背包问题 【解法一】 解释&#xff1a; 第一个for循环表示从第一个物品开始遍历 第二个for循环表示逆向 从背包容量为m时开始处理&#xff08;滚动数组&#xff09; 第三个for循环表示装入k个该物品&#xff0c;装…

【前端】Vue项目:旅游App-(9)city:固定tab栏、内容中显示数据

文章目录目标过程与代码Tab一直显示的两种方法方法1&#xff1a;fixed定位方法2&#xff1a;设置height和overflow-y&#xff08;效果不好&#xff09;content显示数据效果总代码city.vue相关参考目标 上一篇获取了服务器中的数据&#xff1a;【前端】Vue项目&#xff1a;旅游…

【数据结构】完全二叉树——啊堆堆堆

一、树概念及结构树的概念树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n > 0&#xff09;个有限节点组成的一个具有层次关系的集合。把它叫做树是因为他看起来像是一颗倒挂起来的树&#xff0c;也就是说它是根朝上&#xff0c;而叶子朝下的。-> 有一个特殊的…

Find My产品|Ember发布支持苹果Find My温控马克杯

在 CES2023 展会上&#xff0c;温控马克杯制造商 Ember 表示&#xff0c;计划在 2023 年 Q2 上市一款支持苹果 Find My 应用的全新 Travel Mug 2 马克杯。 这项新功能将使用户能够在 Find My 应用中追踪 Travel Mug 2 的位置&#xff0c;就像追踪iPhone、iPad、AirPods 或其他…

埃科光电在科创板IPO过会:拟募资11亿元,董宁为实际控制人

近日&#xff0c;上海证券交易所披露的信息显示&#xff0c;合肥埃科光电科技股份有限公司&#xff08;下称“埃科光电”获得科创板上市委会议通过。据贝多财经了解&#xff0c;埃科光电于2022年6月22日在科创板提交招股书&#xff0c;并于12月29日递交招股书&#xff08;上会稿…

图像分割笔记

图像分割笔记 目标&#xff1a; 实现图像中多个物体的分割&#xff0c;多个物体的标注方式为0,1,2,3,0表示背景&#xff0c;1表示一种物体&#xff0c;2表示另一种物体&#xff0c;假设我们现在的分割任务里面有5个目标需要&#xff0c;如肺叶分割&#xff0c;5个肺叶的标注方…

飞书开放平台-全新消息卡片搭建工具

前言你还在为需要手撕 JSON 代码而烦恼吗&#xff1f;消息卡片搭建工具全新升级&#xff0c;为你带来更优雅的卡片创作体验&#xff1a;&#x1f31f; 卡片编辑&#xff1a;纯可视化操作编辑消息卡片&#xff0c;再也不用碰代码&#x1f31f; 我的卡片&#xff1a;一键保存卡片…

Vue3 Composition API

文章目录p15 Vue3 Composition APIMixin全局混入options API的弊端认识Componsition APIsetup函数的参数setup不可以使用thisReactive APIrefreadonlyp16 Composition API(二)toRefscomputedwatchEffect在setup中使用refwatchp15 Vue3 Composition API Mixin 全局混入 、 opti…