专栏首页彭湖湾的编程世界CSS动效集锦,视觉魔法的碰撞与融合(三)

CSS动效集锦,视觉魔法的碰撞与融合(三)

本文讲述的原理和相关demo

  • 扇形DIV的使用——实现雷达扫描图
  • DIV环形布局—实现loading圈
  • 动画的向量合成—实现抛物线动画
  • 无限滚动动画—实现跑马灯效果
  • perspective和transform的运用——实现卡片翻转

话不多说,请看。

扇形DIV的使用——实现雷达扫描图

在一些杀毒或文件扫描类的软件上,我们可能会看到一些雷达扫描的UI样式,例如下图所示

如果我们要通过CSS该如何去实现话,我们的想法一般是先画个扇形,然后给它加上渐变。

实现渐变的方式很简单,但我们该如何实现一个扇形呢?

我们可以通过一些技巧实现这一点,请看:

没错,我们可以通过skew函数,将黄色的div倾斜,然后溢出部分通过overflow:hidden遮住就可以了。

  • 锐角扇形:deg<0,向右边倾斜,即可得到锐角扇形
  • 钝角扇形:deg>0, 向左边倾斜,即可得到钝角扇形

代码如下

// CSS代码
@keyframes rotateAnimate {
  from {
    transform: rotate(0deg) skew(-30deg)
  }
 
  to {
    transform: rotate(360deg) skew(-30deg)
  }
}
 
.fan-wrapper {
  overflow: hidden;
  position: relative;
  margin: 100px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: red;
}
 
.fan {
  position: absolute;
  right: 0;
  animation: rotateAnimate 2s linear infinite;
  /* 这一行很重要,设置左下角为旋转点 */
  transform-origin: 0% 100%;
  width: 100px;
  height: 100px;
  background: blue;
}
 // HTML代码    
 <div class="fan-wrapper">
  <div class="fan"></div>
</div>

实现效果如下图所示

(因为篇幅有限,渐变就不加了2333)

DIV环形布局—实现loading圈

loading加载条是常见的一种UI组件,如下图所示

而要实现它,就需要考虑怎么把一堆小圆等距地布局在一个“大圆”的边框上,也就是DIV的环形布局的问题。

当然我们可以通过暴力测量解决,但很麻烦且不优雅,而且如果小圆的数量变化的话要重新测一遍。

我的解决办法如下:

第一步:根据圆的数量计算相邻圆和圆心形成的夹角

例如假设我们需要排列8个圆,那么夹角为360度 / 8 = 45度。图示如下,每个数字代表以该位置为圆心放一个小圆

第二步:以外部DIV左下角为原点,批量计算小圆圆心的横纵坐标

批量算出所有圆的相对坐标,我们以编号8的圆为例,假设半径R和X轴的逆时针夹角为θ,则有以下等式

(cos/sin可能有正负,而等式同样成立)

第三步,外部div相对定位,内部小圆绝对定位,并且将步骤二中计算的X/Y作为小圆的bottom和left去设置

这一步也是批量完成,下图以编号8的圆为例

代码

CSS/HTML代码如下:

我们在一个父div内部放8个子div。父div相对定位,而子div绝对定位

// CSS代码
.circles {
  position: relative;
  margin: 50px;
  width: 200px;
  height: 200px;
}
 
.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: black;
}
 // HTML
<div class="circles">
  <div class="circle circle1"></div>
  <div class="circle circle2"></div>
  <div class="circle circle3"></div>
  <div class="circle circle4"></div>
  <div class="circle circle5"></div>
  <div class="circle circle6"></div>
  <div class="circle circle7"></div>
  <div class="circle circle8"></div>
</div>

JS代码如下

第一步:编写calcXYs方法: 以外部DIV左下角为原点,批量计算小圆圆心的横纵坐标

/**
 * R:大圆半径,2*R = 外部正方形的边长
 * r:在大圆边上等距排列的小圆的半径
 * counts: 圆的数量
 * 返回值:
 *  [
 *    [x1,y1],
 *    [x2,y2],
 *    ...
 *  ]
 */
function calcXYs(R, r, counts) {
  // 当前度数
  let deg = 0;
  // 单位度数,两小圆和圆心的夹角
  const pDeg = 360 / counts;
  // 存放返回结果
  const arr = [];
  for (let i = 0; i < counts; i++) {
    // 度数以单位度数递增
    deg = pDeg * i;
    // Math.sin接收的参数以 π 为单位,需要根据360度 = 2π进行转化
    const proportion = Math.PI / 180;
    // 以外部DIV左下角为原点,计算小圆圆心的横纵坐标
    let Y = R + R * Math.sin(proportion * deg);
    let X = R + R * Math.cos(proportion * deg);
    // 存放结果
    arr.push([X, Y, deg]);
  }
  return arr;
}

第二步:编写resizeCircles方法: 根据上一步的结果:调整绝对定位的小圆的位置

/**
 * R,r,counts:含义同上
 * selector: 获取所有小圆的标志符
 * 作用:根据上一步的坐标计算结果,调整绝对定位的小圆的位置
 */
function resizeCircles(selector, R, r, counts) {
  // 获取所有小圆NodeList的选择器
  let list = document.querySelectorAll(selector);
  //调用calcXYs方法
  const XYs = calcXYs(R, r, counts);
  // 遍历每个小圆的XY坐标
  for (let i = 0; i < list.length; i++) {
    const [X, Y] = XYs[i];
    const e = list[i];
    // 修改小圆距离外部DIV底部和左边的距离
    e.style.left = X + "px";
    e.style.bottom = Y + "px";
  }
}

最后我们只需要调用resizeCircles方法就可以啦

resizeCircles(".circle", 60, 20, 8);

实现效果如下

让loading图标动起来

好,现在布局完成了,那我们该怎么去让这个loading图标“动起来”呢?

  1. 给每个圆设置animation实现明暗变化,例如可以设置黑色的背景色然后动态变化opacity
  2. animation属性可以设置delay实现动画延迟播放,我们依次给圆设置等距的delay,例如1s,2s,3s...
  3. 给animation属性设置alternate,表示往复播放,设置infinite,表示无限循环播放
@keyframes k {
  from {
    opacity: 1;
  }
 
  to {
    opacity: 0;
  }
}
.circle1 {
  animation: k 1s ease 0s alternate infinite;
}
 
.circle2 {
  animation: k 1s ease 0.2s alternate infinite;
}
 
.circle3 {
  animation: k 1s ease 0.4s alternate infinite;
}
// circle4 ~ circle8同理,delay以0.2s递增

Demo

动画的向量合成—实现抛物线动画

在饿了么,或者淘宝天猫之类的购物外卖相关的APP里,我们可能会看到类似于下面这种的抛物线的动画。

如果要实现这种平抛效果,需要一点基础的高中物理知识。

平抛运动由水平方向的两种运动合成而得到

  • 水平方向: 匀速直线运动
  • 垂直方向:初速度为0的匀加速直线运动

如下所示

如果我们通过图像捕捉的方式就可理解的更清楚了,从下面的图可以看到:

水平方向的速度是不变的,而垂直方向的速度是不断加快的

好,下面终于可以讲下CSS的实现思路了

CSS实现原理

  1. 设置两个div:外层div和内层div
  2. 外层div设置横向匀速运动的动画
  3. 内层div设置纵向的匀加速直线运动的动画,加速过程可以用cubic-bezier设置

cubic-bezier又叫做贝塞尔曲线,它可接收四个参数,来规定动画的速度变化过程,使用方法如下

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

我们可以通过下面这个官方网站去设置速度变化曲线,然后获取生成的四个参数

https://cubic-bezier.com/

具体代码如下:

 // HTML
<div id="outer">
  <div id="inner"></div>
</div>
<button id='btn'>抛物线效果</button>

// CSS
#outer {
  transition: all 1.5s linear;
}
 
#inner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: red;
  transition: all 1.5s cubic-bezier(.54, .11, .95, .68);
}
 
.outer-active {
  transform: translateX(300px);
}
 
.inner-active {
  transform: translateY(300px) scale(0.3);
}
JS
document.getElementById("btn").onclick = function() {
  document.getElementById("outer").classList.add("outer-active");
  document.getElementById("inner").classList.add("inner-active");
};

效果如下

无限滚动动画—实现跑马灯效果

当文本过长时候,我们可能需要做成跑马灯效果,然后无限滚动播放。

因为marquee这个HTML元素被废弃了,所以一般情况下我们需要手动通过动画去实现跑马灯

实现图示如下,注意开始位置和结束位置是不可见的

// HTML
<div class="marquee">
  <p>ABCDEFGHIJKLMN</p>
</div>
// CSS
@keyframes marquee {
  from {
    transform: translateX(-200px)
  }
 
  to {
    transform: translateX(200px)
  }
}
 
.marquee {
  overflow: hidden;
  margin: 100px;
  width: 200px;
}
 
.marquee p {
  animation: marquee 3s linear infinite;
}

结果

perspective和transform的运用——实现卡片翻转

卡片翻转三要素

  • transform: rotateY(x deg) 翻转卡片
  • backface-visibility:hidden 翻转后隐藏背面,重要!必须要加
  • perspective:增加透视和立体效果
// HTML
<div id="img-wrapper">
  <img src='./timg.jpg' id='img1' class="img disable-img1" />
  <img src='./timg2.jpg' id='img2' class="img" />
</div>
 
// CSS
#img-wrapper {
  perspective: 1200px;
  position: relative;
  height: 479px;
}
 
#img1,
#img2 {
  position: absolute;
  transition: all 1s linear;
  backface-visibility: hidden;
}
 
#img1 {
  transform: rotateY(-180deg);
}
 
#img-wrapper:hover #img1 {
  transform: rotateY(-360deg);
}
 
#img-wrapper:hover #img2 {
  transform: rotateY(-180deg);
}

结果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 谈谈出入React框架踩过的坑

    1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop value ...

    外婆的彭湖湾
  • 【CSS】CSS特效集锦,视觉魔法的碰撞与融合(一)

    在本文中我讲述了7种CSS的特效,它们也许看起来并不惊艳,但是我认为却足够传达本文的理念:编写一些特殊的CSS样式的时候需要不拘于常理,要用特殊的认识角度看待标...

    外婆的彭湖湾
  • 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

    一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度。(一般情况下参考元素 == 父级元素,这里写成参考...

    外婆的彭湖湾
  • CSS3 3D转换

      x轴:水平向右 注意: x 右边是正值,左边是负值   y轴:垂直向下 注意: y 下面是正值,上面是负值   z轴:垂直屏幕 ...

    梨涡浅笑
  • CSS3实现3D水晶立方体效果

    前段时间写过一篇《CSS3实现美美哒的图片倒影效果》,里面最后一步,“我们使倒影倾斜一个角度,让整个倒影效果更具有立体效果”,不知道大家有没有联想到用倾斜,我们...

    Javanx
  • 纯CSS制作多扇区饼图和环形图

    近期在做一个小程序的时候,需要显示重要位置显示几个饼图。遇到这种情况,第一想法就是上网搜索各种小程序支持的图表控件。最终也选择了小程序版本的EChart...

    无忧无忌
  • H5C3综合案例

      1>给body添加 透视效果 perspective: 1000px;   2>给section 添加 大小,一定不要忘记添加 3d呈现效果控制里面的6个...

    梨涡浅笑
  • 2045: 双亲数

    2045: 双亲数 Time Limit: 10 Sec  Memory Limit: 259 MB Submit: 659  Solved: 302 [Sub...

    HansBug
  • Laravel展示产品-CRUD之show

      上一篇讲了Laravel创建产品-CRUD之Create and Store,现在我们来做产品展示模块,用到是show,①首先我们先修改controller...

    ytkah
  • jQuery第十三篇 内容选择器(:empty :parent :contains(text) :has(selector)

    用户7873631

扫码关注云+社区

领取腾讯云代金券