前端页面平滑过渡解决方案

最新推荐文章于 2024-05-14 16:27:26 发布

一天只码五十行

最新推荐文章于 2024-05-14 16:27:26 发布

阅读量366

点赞数 8

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_45820271/article/details/138414504

版权

一、问题产生

在使用图片作为页面背景时，无法使用transtion进行平滑过渡，直接切换背景又会降低使用体验。

二、解决方式

使用clip-path对背景图片裁剪配合transtion实现平滑过渡的效果

三、效果展示

网址：ljynet.com

四、实现方式

template中：

    <div
      class="bg"
      :style="{
        background:radial-gradient(rgb(125, 160, 169) 5%, rgb(0, 0, 0) 75%),
        backgroundSize: '200% 200%',
        clipPath:
          theme === 'light'
            ? `circle(0 at 0% 0%`
            : 'circle(120% at 80% 20%)',
      }"
    ></div>