首页 > 其他分享 >模拟春雪漫天飘的动画效果（前端）

模拟春雪漫天飘的动画效果（前端）

时间：2023-06-10 12:02:49浏览次数：45  
标签：translate3d 动画 春雪 漫天 move transform frames animation webkit

一、实现思路

  • DIV布局的使用
  • 整体背景radial-gradient属性的使用
  • 夜空rotate属性的使用
  • 雪花radial-gradient属性的使用
  • 雪花移动动画animation属性的使用
  • 雪花移动过程中translate3d属性的使用

二、部分HTML代码

因为雪花的元素是相同的，只是移动的起点，移动过程，移动的终点不同，所以HTML元素大致相同，这里我们就不把所有的元素都粘贴过来了，稍后会粘贴出所有源代码，你可以拿到源代码放到自己的网页里，即可看到漫天飘雪的场景啦。

<div class="container">
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  ......
  <!-- 此处重复此处越多，效果越好 -->
</div>

三、夜空的背景

夜空为了绚烂一些，肯定不是能是纯黑色，需要做一定的过渡效果，雪花飘落才会更完美，这里用到了background-image: radial-gradient  等CSS属性。

body {
  background-image: radial-gradient(#021027, #000000);
}
 
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(180deg);
}

四、雪花的样式

雪花虽然HTML元素相同，但表现形式却不同。他有自己的大小，明暗，移动轨迹，等等，越随机，才能越表现的真实而完美。

.circle-container .circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background-image: radial-gradient(#99ffff, #99ffff 10%, rgba(153, 255, 255, 0) 56%);
  -webkit-animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
          animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
}
 
@-webkit-keyframes scale-frames {
  0% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
  50% {
    -webkit-transform: scale3d(2.2, 2.2, 1);
            transform: scale3d(2.2, 2.2, 1);
  }
  100% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
}

五、粒子飞升效果

可能在第3步，大家看到了 transform: rotate(180deg); 的代码设置，这是做了另外的考虑。满天飞雪的场景，其实如果旋转屏幕，可以做为那种地面上有某种粒子，逐渐向上飞升的效果，也是非常棒的。喜欢的小伙伴可以试一下。

模拟春雪漫天飘的动画效果（前端）_ci

六、HTML完整源代码

下面把完整源代码放出来，需要的小伙伴可以直接COPY过去，放到自己网页上就可以看到满天飞雪的效果啦。

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<title>漫天飘雪</title>
 
<link rel="stylesheet" href="./style.css">
 
</head>
<body>
 
<div class="container">
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
</div>
 
 
</body></html>

七、css完整源代码

html,
body {
  width: 100%;
  height: 100%;
  padding:0;margin:0;
}
 
body {
  background-image: radial-gradient(#021027, #000000);
}
 
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(180deg);
}
 
.circle-container {
  position: absolute;
  -webkit-transform: translateY(-10vh);
          transform: translateY(-10vh);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.circle-container .circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background-image: radial-gradient(#99ffff, #99ffff 10%, rgba(153, 255, 255, 0) 56%);
  -webkit-animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
          animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
}
 
@-webkit-keyframes scale-frames {
  0% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
  50% {
    -webkit-transform: scale3d(2.2, 2.2, 1);
            transform: scale3d(2.2, 2.2, 1);
  }
  100% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
}
@keyframes scale-frames {
  0% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
  50% {
    -webkit-transform: scale3d(2.2, 2.2, 1);
            transform: scale3d(2.2, 2.2, 1);
  }
  100% {
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  }
}
.circle-container:nth-child(1) {
  width: 10px;
  height: 10px;
  -webkit-animation-name: move-frames-1;
          animation-name: move-frames-1;
  -webkit-animation-duration: 8441ms;
          animation-duration: 8441ms;
  -webkit-animation-delay: 4544ms;
          animation-delay: 4544ms;
}
@-webkit-keyframes move-frames-1 {
  from {
    -webkit-transform: translate3d(50vw, 102vh, 0);
            transform: translate3d(50vw, 102vh, 0);
  }
  to {
    -webkit-transform: translate3d(2vw, -117vh, 0);
            transform: translate3d(2vw, -117vh, 0);
  }
}
@keyframes move-frames-1 {
  from {
    -webkit-transform: translate3d(50vw, 102vh, 0);
            transform: translate3d(50vw, 102vh, 0);
  }
  to {
    -webkit-transform: translate3d(2vw, -117vh, 0);
            transform: translate3d(2vw, -117vh, 0);
  }
}
.circle-container:nth-child(1) .circle {
  -webkit-animation-delay: 3734ms;
          animation-delay: 3734ms;
}
.circle-container:nth-child(2) {
  width: 10px;
  height: 10px;
  -webkit-animation-name: move-frames-2;
          animation-name: move-frames-2;
  -webkit-animation-duration: 9921ms;
          animation-duration: 9921ms;
  -webkit-animation-delay: 5982ms;
          animation-delay: 5982ms;
}
@-webkit-keyframes move-frames-2 {
  from {
    -webkit-transform: translate3d(89vw, 108vh, 0);
            transform: translate3d(89vw, 108vh, 0);
  }
  to {
    -webkit-transform: translate3d(72vw, -123vh, 0);
            transform: translate3d(72vw, -123vh, 0);
  }
}
@keyframes move-frames-2 {
  from {
    -webkit-transform: translate3d(89vw, 108vh, 0);
            transform: translate3d(89vw, 108vh, 0);
  }
  to {
    -webkit-transform: translate3d(72vw, -123vh, 0);
            transform: translate3d(72vw, -123vh, 0);
  }
}
.circle-container:nth-child(2) .circle {
  -webkit-animation-delay: 2516ms;
          animation-delay: 2516ms;
}
.circle-container:nth-child(3) {
  width: 3px;
  height: 3px;
  -webkit-animation-name: move-frames-3;
          animation-name: move-frames-3;
  -webkit-animation-duration: 10427ms;
          animation-duration: 10427ms;
  -webkit-animation-delay: 3649ms;
          animation-delay: 3649ms;
}
@-webkit-keyframes move-frames-3 {
  from {
    -webkit-transform: translate3d(85vw, 107vh, 0);
            transform: translate3d(85vw, 107vh, 0);
  }
  to {
    -webkit-transform: translate3d(30vw, -133vh, 0);
            transform: translate3d(30vw, -133vh, 0);
  }
}
@keyframes move-frames-3 {
  from {
    -webkit-transform: translate3d(85vw, 107vh, 0);
            transform: translate3d(85vw, 107vh, 0);
  }
  to {
    -webkit-transform: translate3d(30vw, -133vh, 0);
            transform: translate3d(30vw, -133vh, 0);
  }
}
.circle-container:nth-child(3) .circle {
  -webkit-animation-delay: 731ms;
          animation-delay: 731ms;
}
.circle-container:nth-child(4) {
  width: 6px;
  height: 6px;
  -webkit-animation-name: move-frames-4;
          animation-name: move-frames-4;
  -webkit-animation-duration: 10951ms;
          animation-duration: 10951ms;
  -webkit-animation-delay: 8909ms;
          animation-delay: 8909ms;
}
@-webkit-keyframes move-frames-4 {
  from {
    -webkit-transform: translate3d(50vw, 104vh, 0);
            transform: translate3d(50vw, 104vh, 0);
  }
  to {
    -webkit-transform: translate3d(74vw, -122vh, 0);
            transform: translate3d(74vw, -122vh, 0);
  }
}
@keyframes move-frames-4 {
  from {
    -webkit-transform: translate3d(50vw, 104vh, 0);
            transform: translate3d(50vw, 104vh, 0);
  }
  to {
    -webkit-transform: translate3d(74vw, -122vh, 0);
            transform: translate3d(74vw, -122vh, 0);
  }
}
.circle-container:nth-child(4) .circle {
  -webkit-animation-delay: 2526ms;
          animation-delay: 2526ms;
}
.circle-container:nth-child(5) {
  width: 5px;
  height: 5px;
  -webkit-animation-name: move-frames-5;
          animation-name: move-frames-5;
  -webkit-animation-duration: 7642ms;
          animation-duration: 7642ms;
  -webkit-animation-delay: 2502ms;
          animation-delay: 2502ms;
}
@-webkit-keyframes move-frames-5 {
  from {
    -webkit-transform: translate3d(9vw, 108vh, 0);
            transform: translate3d(9vw, 108vh, 0);
  }
  to {
    -webkit-transform: translate3d(39vw, -126vh, 0);
            transform: translate3d(39vw, -126vh, 0);
  }
}
@keyframes move-frames-5 {
  from {
    -webkit-transform: translate3d(9vw, 108vh, 0);
            transform: translate3d(9vw, 108vh, 0);
  }
  to {
    -webkit-transform: translate3d(39vw, -126vh, 0);
            transform: translate3d(39vw, -126vh, 0);
  }
}
.circle-container:nth-child(5) .circle {
  -webkit-animation-delay: 2755ms;
          animation-delay: 2755ms;
}
.circle-container:nth-child(6) {
  width: 6px;
  height: 6px;
  -webkit-animation-name: move-frames-6;
          animation-name: move-frames-6;
  -webkit-animation-duration: 8439ms;
          animation-duration: 8439ms;
  -webkit-animation-delay: 455ms;
          animation-delay: 455ms;
}
@-webkit-keyframes move-frames-6 {
  from {
    -webkit-transform: translate3d(29vw, 101vh, 0);
            transform: translate3d(29vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(21vw, -109vh, 0);
            transform: translate3d(21vw, -109vh, 0);
  }
}
@keyframes move-frames-6 {
  from {
    -webkit-transform: translate3d(29vw, 101vh, 0);
            transform: translate3d(29vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(21vw, -109vh, 0);
            transform: translate3d(21vw, -109vh, 0);
  }
}
.circle-container:nth-child(6) .circle {
  -webkit-animation-delay: 3506ms;
          animation-delay: 3506ms;
}
.circle-container:nth-child(7) {
  width: 8px;
  height: 8px;
  -webkit-animation-name: move-frames-7;
          animation-name: move-frames-7;
  -webkit-animation-duration: 7539ms;
          animation-duration: 7539ms;
  -webkit-animation-delay: 3595ms;
          animation-delay: 3595ms;
}
@-webkit-keyframes move-frames-7 {
  from {
    -webkit-transform: translate3d(11vw, 101vh, 0);
            transform: translate3d(11vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(31vw, -125vh, 0);
            transform: translate3d(31vw, -125vh, 0);
  }
}
@keyframes move-frames-7 {
  from {
    -webkit-transform: translate3d(11vw, 101vh, 0);
            transform: translate3d(11vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(31vw, -125vh, 0);
            transform: translate3d(31vw, -125vh, 0);
  }
}
.circle-container:nth-child(7) .circle {
  -webkit-animation-delay: 749ms;
          animation-delay: 749ms;
}
.circle-container:nth-child(8) {
  width: 4px;
  height: 4px;
  -webkit-animation-name: move-frames-8;
          animation-name: move-frames-8;
  -webkit-animation-duration: 7480ms;
          animation-duration: 7480ms;
  -webkit-animation-delay: 2680ms;
          animation-delay: 2680ms;
}
@-webkit-keyframes move-frames-8 {
  from {
    -webkit-transform: translate3d(15vw, 101vh, 0);
            transform: translate3d(15vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(88vw, -111vh, 0);
            transform: translate3d(88vw, -111vh, 0);
  }
}
@keyframes move-frames-8 {
  from {
    -webkit-transform: translate3d(15vw, 101vh, 0);
            transform: translate3d(15vw, 101vh, 0);
  }
  to {
    -webkit-transform: translate3d(88vw, -111vh, 0);
            transform: translate3d(88vw, -111vh, 0);
  }
}
.circle-container:nth-child(8) .circle {
  -webkit-animation-delay: 1888ms;
          animation-delay: 1888ms;
}
.circle-container:nth-child(9) {
  width: 2px;
  height: 2px;
  -webkit-animation-name: move-frames-9;
          animation-name: move-frames-9;
  -webkit-animation-duration: 9087ms;
          animation-duration: 9087ms;
  -webkit-animation-delay: 9461ms;
          animation-delay: 9461ms;
}
@-webkit-keyframes move-frames-9 {
  from {
    -webkit-transform: translate3d(100vw, 107vh, 0);
            transform: translate3d(100vw, 107vh, 0);
  }
  to {
    -webkit-transform: translate3d(40vw, -130vh, 0);
            transform: translate3d(40vw, -130vh, 0);
  }
}
@keyframes move-frames-9 {
  from {
    -webkit-transform: translate3d(100vw, 107vh, 0);
            transform: translate3d(100vw, 107vh, 0);
  }
  to {
    -webkit-transform: translate3d(40vw, -130vh, 0);
            transform: translate3d(40vw, -130vh, 0);
  }
}
.circle-container:nth-child(9) .circle {
  -webkit-animation-delay: 1721ms;
          animation-delay: 1721ms;
}
.circle-container:nth-child(10) {
  width: 8px;
  height: 8px;
  -webkit-animation-name: move-frames-10;
          animation-name: move-frames-10;
  -webkit-animation-duration: 9860ms;
          animation-duration: 9860ms;
  -webkit-animation-delay: 8969ms;
          animation-delay: 8969ms;
}
@-webkit-keyframes move-frames-10 {
  from {
    -webkit-transform: translate3d(74vw, 110vh, 0);
            transform: translate3d(74vw, 110vh, 0);
  }
  to {
    -webkit-transform: translate3d(30vw, -127vh, 0);
            transform: translate3d(30vw, -127vh, 0);
  }
}
@keyframes move-frames-10 {
  from {
    -webkit-transform: translate3d(74vw, 110vh, 0);
            transform: translate3d(74vw, 110vh, 0);
  }
  to {
    -webkit-transform: translate3d(30vw, -127vh, 0);
            transform: translate3d(30vw, -127vh, 0);
  }
}
.circle-container:nth-child(10) .circle {
  -webkit-animation-delay: 1801ms;
          animation-delay: 1801ms;
}
.circle-container:nth-child(11) {
  width: 1px;
  height: 1px;
  -webkit-animation-name: move-frames-11;
          animation-name: move-frames-11;
  -webkit-animation-duration: 9292ms;
          animation-duration: 9292ms;
  -webkit-animation-delay: 9812ms;
          animation-delay: 9812ms;
}

标签：translate3d,动画,春雪,漫天,move,transform,frames,animation,webkit
From： https://blog.51cto.com/u_15997490/6454350

相关文章

  • Python保存任意长度的matplotlib动画为GIF动图
    任务描述：使用Python+matplotlib绘制散点图动画模拟随机游走的布朗运动，每个散点符号表示一个分子，每个散点符号都有不同的预期停靠位置，当随机游走到停靠位置之后不再运动，最后把完整动画保存为GIF动图。由于每个分子的运动都是随机的，无法确定什么时候才能到达预期的终点，所以整个动画的......
  • 下拉菜单缓慢展开收起的动画过渡效果,vue2 CSS
    需求：点击下拉菜单按钮，显示子菜单并有过渡效果过渡效果：缓慢展开收起环境：vue2CSS分析：子菜单的高度有没有固定，如果子菜单的高度固定，可以设置高的变化添加过渡效果。如果高度不固定设置最大高度的变化添加过渡效果图片展示：展开状态收起状态 实现代码：<template><div>......
  • 直播源码开发，使用动画设置ProgressBar进度
    直播源码开发，使用动画设置ProgressBar进度布局文件： <?xmlversion="1.0"encoding="utf-8"?><LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:app="http://schemas.android.com/apk/res-auto"  ......
  • 专业角色动画制作-Character Animator 2023 win中文
    CharacterAnimator2023是Adobe公司推出的一款专业角色动画制作软件，它的主要功能是将用户的实时动作转换为角色动画，能够快速创建高质量的动画作品。→→↓↓载CharacterAnimator2023win 一、界面介绍CharacterAnimator2023的界面非常简洁，分为三个主要部分：舞台、面板和......
  • QT中的动画类（QPropertyAnimation）
    (文章目录)前言QPropertyAnimation是QT中的一个动画类，用于对目标对象的属性进行动画效果展示。该类继承自QAbstractAnimation类，使用起来非常方便和灵活。一、QPropertyAnimation类介绍QPropertyAnimation可以对任何QObject的子类的属性进行动画的展示，只要该属性是可写的，即存在......
  • Wpf(Storyboard)动画简单实例
    Wpf(Storyboard)动画简单实例动画的三种变换方式RotateTransform：旋转变换变化值：CenterX围绕转的圆心横坐标      CenterY纵坐标       Angle旋转角度（角度正负表示方向） ScaleTransform：缩放变换变化值：ScaleX横向放大倍数 ScaleY纵向（负值时翻转）  TranslateTransform......
  • [Animations] 快速上手 iOS10 属性动画
    概述今天要说的UIViewPropertyAnimator,是iOS10新的API详细基础动画,核心动画到自定义转场动画其实都不是什么新东西了,所以我也是草草看一遍就能够读个大概,但今天要说的UIViewPropertyAnimator,是iOS10新的API,其他的好处我还不太清楚,但抽象动画逻辑和监控......
  • 让一张图片从模糊慢慢变清晰动画过程
    importjava.io.IOException;importjava.io.InputStream;importandroid.app.Activity;importandroid.content.Context;importandroid.content.res.AssetManager;importandroid.graphics.Bitmap;importandroid.graphics.BitmapFactory;importandroid.os.Bundle;......
  • 使用ActivityOptions做Activity切换动画
    不知道大家有没有注意到startActivity(Intent,Bundle)，那么ActivityOptions就是这个Bundle的原型，负责Activity跳转时的动画。publicvoidonClick(Viewview){Intentintent=newIntent(this,SecondActivity.class);ActivityOptionsoptions=Act......
  • CreateJS 动画 EaselJS 动画
    本节将介绍创建图形动画,精灵表位图动画,DOM元素动画.例子1图形动画<!DOCTYPEhtml><html><head> <metacharset="gbk"> <scripttype="text/javascript"src="easeljs-0.6.0.min.js"></script></head><body> &l......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99