热搜：前端 nest neovim nvim

手把手教你怎么使用CSS3实现动画效果(代码分享)

lxf2023-05-29 16:30:01

其他回答《手把手教你怎么使用CSS3实现动画效果（代码分享）》中，给大家介绍一下如何使用css3动态效果设定工作经验。下边本文为大家介绍如何使用css3给照片加上渐变效果，小伙伴们一起来看看一下。

手把手教你怎么使用CSS3实现动画效果(代码分享)

刚接触css3渐变色要在很久以前了，感觉这东西很有趣哈，跟玩 PS 一样，能做出许多华美的物品。

浏览器支持状况

IEFFChromeSafariOperaiOSAndroidAndroid Chrome
6-9(no)2-3.5(no)4-9(一部分-webkit-)3.1-3.2(no)-3.2-4.3(一部分)2.1-3.0(-webkit-)10-25(-webkit-)
10 3.6-15(-webkit-)10-25(-webkit-)4-5(一部分)5-6.1(-webkit-)-5 4-4.3(-webkit-)26
-15 25 5-615 -4.4 -

线性渐变 linear-gradient

应用词法

linear-gradient([ [ [| to [top | bottom] || [left | right] ],]?[,] );

下列编码都能够运作，实施的结论一样

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

能够界定视角，开始方位，色调，及其色调占有率

demo

<div style="width: 200px; height: 200px;"></div>
<style>
  div {
    background: linear-gradient(
      to right,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
    );
  }
</style>

手把手教你怎么使用CSS3实现动画效果(代码分享)

添充试线性渐变 repeating-linear-gradient

使用方法和 linear-gradient 类似，本身就是渐变色的一个添充。能够具体到清晰度，例如实现一个荧光色

<div class="g"></div>
<style>
  .g {
    background: repeating-linear-gradient(
      -45deg,
      transprent,
      transprent 25px,
      #fff 25px,
      #fff50px
    );
  }
</style>

手把手教你怎么使用CSS3实现动画效果(代码分享)

径向渐变 radial-gradient

应用词法

radial-gradient( [ circle ||][ at]? , | [ ellipse || [|]{2}][ at]? , | [ [ circle | ellipse ] ||][ at]? , | at,[ ,]  )

下列执行命令结论一样

radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);

能通过 length 来快速查找外形的部位closest-side 渐变色边缘样子与器皿间距渐变色定位点近期的一边相交（环形）或者至少与间距渐变色定位点近期的竖直和能力边相交（椭圆形）。

closest-corner 渐变色边缘样子与器皿间距渐变色定位点近期的一个角交叉。

farthest-side 与 closest-side 反过来，边沿样子与器皿间距渐变色定位点最远的一边相交（或最远的竖直和能力边）。

farthest-corner 渐变色边缘样子与器皿间距渐变色定位点最远的一个角交叉。

能通过 at 来迅速制订圆心的位置circle at left top圆心点在左上方

  • circle at right top圆心点在右上方

  • circle at left bottom 圆心点在左下方

  • circle at right bottom 圆心点在右下方

  • circle at center | at 50% 圆心点在中间

编码实例

<style>
  div {
    width: 200px;
    height: 100px;
    margin-top: 10px;
    border: 1px solid #ddd;
  }
  .g1 {
    background: radial-gradient(circle at center, #f00, #ff0, #080);
  }
  .g2 {
    background: radial-gradient(circle closest-side, #f00, #ff0, #080);
  }
  .g3 {
    background: radial-gradient(farthest-side, #f00 20%, #ff0 50%, #080 80%);
  }
  .g4 {
    background: radial-gradient(at top right, #f00, #ff0, #080);
  }
  .g5 {
    background: radial-gradient(farthest-side at top right, #f00, #ff0, #080);
  }
  .g6 {
    background: radial-gradient(
        farthest-side at top right,
        #f00,
        #ff0,
        #080,
        transparent
      ), radial-gradient(60px at top left, #f00, #ff0, #080);
  }
</style>
<div class="g1"></div>
<div class="g2"></div>
<div class="g3"></div>
<div class="g4"></div>
<div class="g5"></div>
<div class="g6"></div>

获得如下所示

手把手教你怎么使用CSS3实现动画效果(代码分享)

添充式径向渐变repeating-radial-gradient

这个跟 repeating-linear-gradient 应用类似，便是对渐变色的添充。

编码实例

<style>
  div {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    float: left;
    margin: 10px;
  }
  .g1 {
    background: repeating-radial-gradient(circle, #f00 0, #ff0 10%, #f00 15%);
  }
  .g2 {
    background: repeating-radial-gradient(
      at top left,
      #f00,
      #ff0 10%,
      #080 15%,
      #ff0 20%,
      #f00 25%
    );
  }
  .g3 {
    background: repeating-radial-gradient(
      circle closest-corner at 20px 50px,
      #f00,
      #ff0 10%,
      #080 20%,
      #ff0 30%,
      #f00 40%
    );
  }
</style>

<div class="g1"></div>
<div class="g2"></div>
<div class="g3"></div>

获得如下所示

手把手教你怎么使用CSS3实现动画效果(代码分享)

运用渐变色能做出许多实际效果

编码实例

<style>
  @keyframes up {
    0% {
      top: 100%;
    }
    100% {
      top: -100px;
    }
  }
  .blister {
    position: absolute;
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 50%;
    // left: 300px;
    overflow: hidden;
    animation: up 20s linear infinite;
    bottom: -100%;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    &:hover {
      animation-play-state: paused;
    }
    &::before {
      content: "";
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      box-shadow: 0 0 20px #fff inset;
      position: absolute;
      border-radius: 50%;
    }
    .light {
      border-radius: 50%;
      width: 75px;
      height: 54px;
      transform: rotate(140deg);
      top: -24px;
      position: absolute;
      left: -18px;
      display: block;
      background: radial-gradient(farthest-side, #fff, rgba(255, 255, 255, 0));
    }
    .light2 {
      width: 24px;
      height: 15px;
      position: absolute;
      bottom: 9px;
      right: 15px;
      transform: rotate(-25deg);
      border-radius: 50%;
      display: block;
      background: radial-gradient(farthest-side, #fff, rgba(255, 255, 255, 0));
    }
  }
</style>
<span class="blister">
  <span class="light"></span>
  <span class="light2"></span>
</span>

如下图所示，能做一个好看的汽泡

手把手教你怎么使用CSS3实现动画效果(代码分享)

然后用上一篇文章的animation使他运动起来。

看结果点这里 https://k-ui.cn 动漫延迟时间，得等会才可以展现。

强烈推荐学习培训：CSS3视频教学

以上就是关于教你如何应用css3给照片加上渐变效果（编码详细说明）的具体内容，大量欢迎关注AdminJS其他类似文章！

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

相关专题