强大的CSS:用纯css模拟下雪的效果

更新日期: 2019-05-01阅读: 3.5k标签: 效果

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥。

技术图片


1.前言

由于公司产品的活动,需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas(还有gif),对比下css3和canvas的优缺点:

动画自由度:canvas胜;
复杂度:canvas胜;
兼容性:canvas胜;
性能:css3胜(requestAnimationFrame和硬件加速)。

由于对于性能有一定的要求,canvas对比css3会有更多的计算量导致性能可能不太好,所以选用css3模拟下雪效果(ps:能用css解决的问题就不用javascript解决哈哈)。


2.原理

本文所采用的是css3的animation。为dom元素添加animation属性就可以模拟动画,例如w3school的例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>animation</title>
  <style>
    .animation{
      width:100px;
      height:100px;
      background:red;
      position:relative;
      animation:mymove 5s infinite;
      -webkit-animation:mymove 5s infinite;
    }
    @keyframes mymove{
      from {
        left:0px;
      }
      to {
        left:200px;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

当然这谁都会,但有个问题是,下雪并不是机械的下落,而是有快有慢、摆动幅度、时间不定,这里的重点是需要构造随机性,理性分析下。

  1. 在浏览器中下雪的起始点随机;
  2. 下雪的速度随机;
  3. 下雪从开始到落到地面的时间随机(延时随机和整个下雪过程的时间随机);
  4. 下雪过程中摇摆随机。

我们可以在css中找到这几点随机性的对应属性:

  1. 起始点:position的左右方位(动画我们一般采用定位,因为可以减少不必要的重排和重绘);
  2. 速度:animation-timing-function(提供了丰富的速度属性);
  3. 时间:animation-duration和animation-delay;
  4. 摇摆:transform: translateX()(在水平方向上的位移)。

可能有人会问,这几个属性并不是随机的呀,并不像Math.random随机函数那样。我们换个思考方向,本文所说的随机是随机雪,并不是随机雪的属性。每个雪的下落时间、下落速度、摆动幅度是固定的,雪与雪之间的下落时间、下落速度、摆动幅度是不同,那么就达到效果了。

意识到这点,就剩下最后一个问题,怎样给每个雪不同的下落时间、下落速度、摆动幅度呢?这里我们使用真正的随机函数Math.random,利用data自定义属性配合Math.random和css的属性匹配规则,就可以确定动画效果了。


3.构造雪形状

3.1 一条线性渐变

技术图片

.linear{
  width: 100px;
  height: 100px;
  background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%);
}

3.2 多条线性渐变画雪花

技术图片

.linear{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: linear-gradient(0, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
    linear-gradient(45deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%),
    linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%);
}


4.构造下雪动画

我用sass写的css来构造动画,其实语言无所谓,重在原理。

4.1 起始点

@for $i from 1 through 100 {
  .animation[data-animation-position='#{$i}'] {
    left: #{$i}vw;
  }
}

这里运用sass的循环函数来创造1到100的匹配class名为animation和属性选择器为[data-animation-position=1~100vw]的值,例如我们想要元素的left为50vw,就直接添加class名data-animation-position=50vw。这里有两点需要说明:

  1. 范围1~100vw:注意单位是vw,我们想要雪花的起始点出现在水平方向的任意位置,而vw是把屏幕等分为100份,100vw就是满屏;
  2. 为什么要把1~100都循环出来:只有这样才能匹配到范围内我们需要的值。

4.2 速度

$timing: (
  linear: linear,
  ease: ease,
  ease-in: ease-in,
  ease-out: ease-out,
  ease-in-out: ease-in-out
);

@each $key, $value in $timing {
  .animation[data-animation-timing='#{$key}'] {
    transition-timing-function: $value;
  }
}

4.3 时间

时间包含动画运动时间和延时时间。

@for $i from 1 through 4 {
  .animation[data-animation-delay='#{$i}'] {
    animation-delay: #{$i}s;
  }
}
@for $i from 4 through 8 {
  .animation[data-animation-duration='#{$i}'] {
    animation-duration: #{$i}s;
  }
}

4.4 摇摆

下雪由两个动画组成,分别是下落fall和摇摆swing,下落的动画是固定的,只有摇摆需要随机,所以我自定义了属性匹配规则,就可以随机摇摆了。

@for $i from 1 through 4 {
  .animation[data-animation-name='#{$i}'] {
    animation-name: fall, swing#{$i};
  }
}
@for $i from 1 through 4 {
  @keyframes swing#{$i}{
    25% {
      transform: translateX(-#{$i * 10}px);
    }
    50% {
      transform: translateX(#{$i * 10}px);
    }
    75%{
      transform: translateX(-#{$i * 10}px);
    }
    100%{
      transform: translateX(#{$i * 10}px);
    }
  }
}


5.随机性

这里用react来演示代码,还是那句话只要理解了原理,语言其实并不太重要。

5.1 雪花元素

<div className='page'>
  {
    Array(10).fill().map((v, i) => (
      <span
        key={i}
        className='animation span'
        data-animation-position={this.position()}
        data-animation-timing={this.timing()}
        data-animation-delay={this.delay()}
        data-animation-duration={this.duration()}
        data-animation-name={this.name()}
      />
    ))
  }
</div>

我们的雪花元素包含几下几个属性值:

  1. data-animation-position:起始位;
  2. data-animation-timing:下雪速度;
  3. data-animation-delay:延时;
  4. data-animation-duration:下雪总时间;
  5. data-animation-name:下落动画和摇摆动画。

5.1 随机范围函数

random(min, max){
  return Math.floor(Math.random() * (max - min + 1) + min)
}

5.2 属性随机赋值

position(){
  return this.random(1, 100)
}
delay(){
  return this.random(1, 4)
}
duration(){
  return this.random(4, 8)
}
name(){
  return this.random(1, 4)
}
timing(){
  return ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'][this.random(0, 4)]
}


原文地址:https://blog.51cto.com/14284898/2388062 
 

链接: https://fly63.com/article/detial/3165

使用 JavaScript 实现分屏视觉效果

今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website。

CSS3的过渡效果,使用transition实现鼠标移入/移出效果

在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。

js如何实现新手引导效果?

js最近有个小伙伴问到了怎么实现新手引导的效果,然后便去网上找了下实现方案。可以通过css的border来实现。

css3 斜切角/斜边的实现方式

设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果。

JavaScript 实现打字机效果,跑马灯效果

这篇文章在不使用任何插件的情况,以最简洁的原生javascript来实现打字机效果和跑马灯效果。打字效果即把一段话一个字一个字的显示出来。

CSS遮罩效果(模糊效果,阴影效果,毛玻璃效果)

一般遮罩加上透明度opacity就是阴影效果。阴影效果和一般遮罩一样,唯一不同的是设置.mask遮罩的背景色用rgba()表示,当然hsla()也是可以的。模糊效果(毛玻璃效果) 通过 filter来实现

纯css实现气泡效果

主要运用的是1.border 组成的直角三角形。2,before 和 after 伪元素 。3,z-index属性;将元素的长宽设置为0,并且将border的3条边设置为透明的,就会出现border颜色的直角三角形

css文字选中效果

文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。

text-fill-color:仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this:看着挺酷炫的还不错 就看了下实现方式。还挺简单的。

Vue 中多个元素、组件的过渡,及列表过渡

多元素之间如何实现过渡动画效果呢?这么写行不行呢?肯定是不行的,因为 Vue 在两个元素进行切换的时候,会尽量复用dom,就是因为这个原因,导致现在动画效果不会出现。如果不让 Vue 复用dom的话,应该怎么做呢?只需要给这两个div不同的key值就行了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!