利用CSS3渐变实现唯美背景图

SS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。接下来奉上几张图片来一睹CSS3 渐变的魔法吧~

以上三幅背景图由纯CSS实现
如有雷同,纯属巧合
废话不多说,直接上代码

1、图1:

2、图2:

3、图3:

代码就是上述这些了,还不相信的童鞋可以动手试一试哦.
虽然有的比较繁琐.但是,其实大部分都是重复的.
最后,元旦期间童鞋们别忘记敲代码噢~~~

更多精彩，请关注小码哥订阅号

计思路

定位动画我们在之前已经实现了。那么这里只要考虑如何实现放大动画，最后将两者结合起来就好。从后端拿到的返回值是一个固定长度的数组，所以这里还是用 div 利用 flex 布局将图片平铺展示，利用 CSS transform 进行位置移动和缩放。

接下来就是如何计算出每个 div 的位移。DOM 元素的位移主要关注左上角顶点的位移。针对这个需求可以画出如下草图。外层 div 为 container，内层 div 为 inner。

从上图可以看到，每个 div 的位移即 center.left - inner.left, center.top - inner.top. container 的中心点:

const containerCenterX=containerRect.left + containerRect.width / 2;
const containerCenterY=containerRect.top + containerRect.height / 2;

inner 移动的偏移量：

// 让 inner 移到 container 的正中间
const offsetX=containerCenterX - itemRect.width / 2 - itemRect.left;
const offsetY=containerCenterY - itemRect.height / 2 - itemRect.top;

最后将方位动画的 div 叠在 inner 上面即可。

代码实现和 Demo 演示

梳理清思路之后，就可以实现代码了。Demo 已经放在 CodeSandbox 上了。其中最主要的还是位移计算的逻辑。下面是Demo地址，也可以在我的博客上看到 Demo。 Demo 地址：codesandbox.io/p/devbox/si…

布局部分代码：

  <div class="container" ref="container">
    <div
      v-for="(image, index) in imageList"
      :key="index"
      class="wrapper"
      ref="imageElList"
      :style="{ opacity: image.active ? 1 : 0.6 }"
      @click="toggleActiveImage(index)"
    >
      <img :src="image.src" class="image" />
      <direction
        ref="directionElList"
        class="direction"
        :style="{ display: image.active ? 'block' : 'none' }"
        :pinPosition="selectedDirection"
      />
    </div>
  </div>

数据结构部分：

export const imageDemos=[
  {
    name: "image-1",
    src: "https://images.adsttc.com/media/images/564c/8b23/e58e/ce4d/7300/01c1/newsletter/01.jpg?1447856922",
    active: false,
  },
  {
    name: "image-2",
    src: "https://i.pinimg.com/550x/65/a9/10/65a91018534fc59b675150fc432ccc41.jpg",
    active: false,
  },
  {
    name: "image-3",
    src: "https://1.bp.blogspot.com/-PcYuV8FVZmQ/VXWy7y-QjDI/AAAAAAABewE/La-BpNsCsY0/s1600/mapa-grande1.jpg",
    active: false,
  },
  {
    name: "image-4",
    src: "https://image2.sina.com.cn/gm/zhuanqu/sephiroth/rwjs/fomalhaut_b.gif",
    active: false,
  },
  {
    name: "image-5",
    src: "https://gd-hbimg.huaban.com/f0c7a577ed51f171967cbd3c1b21e90361b6924b1594b7-yrOBDd",
    active: false,
  },
];

偏移量计算部分代码：

const showActiveImage=(imageEl)=> {
  const containerEl=container.value;

  const containerRect=containerEl!.getBoundingClientRect();
  const itemRect=imageEl!.getBoundingClientRect();

  const containerCenterX=containerRect.left + containerRect.width / 2;
  const containerCenterY=containerRect.top + containerRect.height / 2;

  const offsetX=containerCenterX - itemRect.width / 2 - itemRect.left;
  const offsetY=containerCenterY - itemRect.height / 2 - itemRect.top;

  imageEl!.style.transform=`translate(${offsetX}px, ${offsetY}px) scale(1.2)`;
  imageEl!.style.zIndex=100;
};

拓展

这次的需求也可以用于展示动画。比如产品展示或者局部细节的展示。根据不同的需求结合不同的动画，可以让我们的页面变得更加酷炫。

.particles-bg

地址：https://github.com/lindelof/particles-bg

效果：

2.particles-bg-vue

地址：https://github.com/lindelof/awesome-web-effect

这是一个基于VUE的粒子动画组件。

3.jquery.ripples

地址：https://github.com/sirxemic/jquery.ripples

jQuery Ripples 插件向HTML添加一层水元素将波纹光标与WebGL的互动。您可以使用这种效果,让你的静态CSS背景图像更多的互动。

4.MorphingBackgroundShapes

地址：https://github.com/codrops/MorphingBackgroundShapes

这是一个很具装饰性的网站背景效果，当用户在滚动到某一页面后此背景的SVG图形将随着变形和移动。

5. SegmentEffect

地址：https://github.com/codrops/SegmentEffect

背景分割装饰特效。

6.jQuery.BgSwitcher

地址：https://github.com/rewish/jquery-bgswitcher

jQuery.BgSwitcher实现背景图像切换效果。

7.BackgroundScaleHoverEffect

地址：https://github.com/codrops/BackgroundScaleHoverEffect

使用 CSSclip paths 重现背景缩放悬停特效。

8.ImageGridMotionEffect

地址：https://github.com/codrops/ImageGridMotionEffect

为背景网格的图像提供运动悬停特效。

9.jquery.adaptive-backgrounds.js

地址：https://github.com/briangonzalez/jquery.adaptive-backgrounds.js

adaptive-background.js是一款jQuery插件，可以根据div，img标签里图片的边框颜色来动态调整父标签的背景颜色，有点类似iTunes的专辑详情的效果.

10.fixed-background-effect

地址：https://codyhouse.co/demo/fixed-background-effect/index.html#0

整屏滚动背景悬浮效果。

11.jquery-warpdrive-plugin

地址：https://github.com/NiklasKnaack/jquery-warpdrive-plugin

query-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件。这个星空背景特效可通过配置参数进行灵活的配置，可用鼠标进行互动。

12.RainEffect

使用WebGL在不同场景下的一些实验性降雨和水滴效应。

人才们的 【三连】 就是小智不断分享的最大动力，如果本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢大家的观看。

作者：lindelof 译者：前端小智来源:github

原文：https://github.com/lindelof/awesome-web-effect

在线咨询

上一篇：超简单！快速把网站生成 EXE 可执行程序
下一篇：javaweb的问卷调查系统

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商