Anime.js实现页面复现

最新推荐文章于 2024-03-19 09:32:44 发布
最新推荐文章于 2024-03-19 09:32:44 发布
阅读量386 收藏 9
点赞数 3
分类专栏： 笔记 文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53325717/article/details/136781001
版权

html页

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <section>
        <img src="./starts.png" id="stars">
        <img src="./moom.png" id="moom">
        <img src="./hmb.png" id="mb1" >
        <h2 id="text">me<span>JS</span></h2>
        <a href="#" id="btn">Play</a>
        <img src="./mountains_front.png" id="mountains_front">
    </section>
    <script src="./anime.min.js"></script>
    <script>
        var animation = anime.timeline({
            autoplay:false
        });

        animation
        .add({
            targets:'#btn',
            top:'100px',
            duration:500,
            easing:'easeInOutSine'
        })

        .add({
            targets:'#stars',
            top:'0px',
            duration:500,
            easing:'easeInOutSine'
        })

        .add({
            targets:'#mb1',
            bottom:'0px',
            duration:1000,
            easing:'easeInOutSine'
        })

        .add({
            targets:'#moom',
            bottom:'0px',
            duration:1000,
            easing:'easeInOutSine'
        }) 

        .add({
            targets:'#mountains_front',
            bottom:'0px',
            duration:1000,
            easing:'easeInOutSine'
        })

        .add({
            targets:'#text ',
            marginRight:0,
            duration:1000,
            easing:'easeInOutSine'
        })

        
        document.querySelector('#btn').onclick = animation.play;

    </script>
</body>

</html>

css

@import './css.css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap';
/* @import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap'); */
* 
{
    margin: 0;
    /* width: 100%; */
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}


body {
    display:flex;
    justify-content:center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(#2b1055,#7597de);
}
section{
   position: relative; 
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;

}
section img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}
section img#moom{
    top:-100%;
    mix-blend-mode: screen;
}
section img#stars{
    top: -100%;
    object-fit: cover;
    height: 100%;
}
section img#mb1{
    bottom: -150%;
    top: initial;

}
section img#mountains_front{
    bottom: -100%;
    top: initial;
    z-index: l000;
}
#text{
    position: absolute;
    color: #fff;
    font-size: 8vw;
    font-weight: 200;
    margin-right: -3000px;

}
#text span{
    font-weight: 700;

}
#btn{
    position: absolute;
    top: 50%;
    left: 50%;
    text-decoration: none;
    transform: translate(-50%,-50%);
    margin-top: 80px;
    padding: 8px 50px;
    background-color:  #fff;
    border-radius: 40px;
    color: #2b1055;
    font-size: 1.4em;
    display: inline-block;
    z-index: 10000;
}

import 的样式

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTucXtAKPY.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTufntAKPY.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTucHtA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

素材链接

https://www.123pan.com/s/9QRqVv-8QlY.html
用Adobe_Illustrator打开图层

在这里插入图片描述

随风万里无云
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
anime.min.js
04-07
www.animejs.cn 制作所有强大的动画的js 非常 6 推荐大家学习一下 强烈推荐！！！
【Anime.js】——JavaScript动画库：Anime.js——学习笔记
热门推荐
qq_50497708的博客
12-14 1万+
官网定义：anime.js 是一个简便的JS动画库，用法简单而且适用范围广，涵盖CSS，DOM，SVG还有JS的对象，各种带数值属性的东西都可以动起来。
【Animejs教程】一个绝赞易用的动画库 Animejs，一个绝好的threejs动画辅助库
qq_42760477的博客
06-12 3337
前端动画库 animejs 使用教程
探索 `anime.js`：一款强大的JavaScript动画库
最新发布
gitblog_00076的博客
03-19 679
探索 anime.js：一款强大的JavaScript动画库 项目地址:https://gitcode.com/juliangarnier/anime 在前端开发中，创建引人入胜、动态丰富的用户体验往往需要强大的动画工具。今天我们要介绍的是一个轻量级但功能强大的JavaScript动画库——anime.js。它由Julien Garnier精心打造，旨在简化Web上的动画制作，无论你是新手还是经...
JavaScript动画库：Anime.js
weixin_41897680的博客
08-07 6206
JavaScript动画库：Anime.js
animejs动画插件实现点击动态效果
ICode联盟
12-24 133
下载地址dd:
anime.js 实现带有描边动画效果的复选框（推荐）
10-18
anime.js是一个灵活的轻型JavaScript动画库。这篇文章主要介绍了anime.js 实现带有描边动画效果的复选框 ,需要的朋友可以参考下
18款anime.js文字动画特效
06-24
18款anime.js文字动画特效是一款通过前后导航按钮切换文字时，切换不同的文字动画特效。
anime.js鼠标点击网页背景酷炫动画特效特效代码
03-20
anime.js酷炫网页背景动画特效，鼠标点击弹出气泡动画，非常的动感漂亮。
anime.js的学习小结
qq_32109661的博客
12-10 3548
1、关于anime.js的引入 $ npm install animejs # OR $ bower install animejs import anime from 'animejs' 或者直接引用anime.js文件 &lt;!-- 本地下载引入js文件 --&gt; &lt;script src="anime.min.js"&gt;&lt;/script&gt; &lt;!-...
使用Anime.js的基于JavaScript的动画，第1部分：目标和属性
代码教主
06-16 1201
Anime.js是一个基于JavaScript的轻量级动画库。 您可以使用它来设置网页上不同CSS属性，SVG或DOM属性的动画。 该库使您可以控制动画的各个方面，并提供了许多方法来指定要定位的元素或要设置动画的属性。 您可以完全控制动画的播放顺序或不同元素的动画彼此之间如何同步。 该库支持所有现代浏览器，包括IE10 +。 在本教程系列中，您将学习Anime.js的所有功能，以便可以...
anime.js 动画_Anime.js –轻量级JavaScript动画库
cune1359的博客
07-01 790
网络动画已经走了很长一段路。 开发人员不仅可以使用CSS / SVG / JS组合制作任何动画，而且还提供了数十个免费库以节省时间。 我的最爱之一是Anime.js ，这是一个完全免费的开源JavaScript动画库 。 这个库可以做到 。 它基于JavaScript构建，但也非常依赖CSS动画 。 您可以通过DOM定位单个页面元素，甚至可以定位自定义SVG 。 另请参阅： 8个可...
12个强大的 JavaScript 动画库，可帮助你提升用户体验
xuxian的博客
09-12 207
动画，是吸引你客户注意的好方法之一。在项目开发中，我们可以通过创造有趣的动画来为我们的项目增加视觉感与用户体验，同时，也为我们的网站增添了独特的美感，而且还提高了用户参与度并创造了令人难忘的第一印象。
animejs动画库使用指南---【学习总结】
2302_76361520的博客
09-21 346
【代码】animejs动画库使用指南---【学习总结】
animejs走马灯_anime.js 简单入门教程
weixin_33945759的博客
12-31 1106
anime.js是一个强大的用来制作动画的javascript库，虽然功能没有GASP(greensock)强大，但胜在它足够轻便，gzip压缩完只有9kb左右，麻雀虽小，却五脏俱全。下面就来看看如何使用anime.js来编写动画效果。先在github下载好anime.js，然后在页面引入它。弹球效果引入anime.js后，就可以开始来编写动画效果。首先来编写一个弹球的动画效果，先来使用anime...
Anime.js，一款灵活强大的 JavaScript 动画库
繁华落尽
11-29 235
Anime.js是一款轻量级的JavaScript动画库，专注于为Web开发者提供简单直观的动画解决方案。与其他动画库相比，Anime.js具有出色的性能和强大的功能，同时提供了友好的API，使得即便是初学者也能轻松上手。通过这篇入门指南，希望你对Anime.js有了初步的了解。当你在项目中需要引入一些生动有趣的动画效果时，Anime.js将成为你的得力助手。不仅仅是功能强大，更是友好易用，是每位Web开发者值得尝试的工具之一。
animejs走马灯_Anime.js 轻量的 JavaScript 动画库 - 文章
weixin_39716088的博客
12-31 299
Anime.js (/ˈæn.ə.meɪ/) 是一个轻量的 JavaScript 动画库， 拥有简单而强大的 API。可对 CSS 属性、 SVG、 DOM 和 JavaScript 对象进行动画。anime.js 的内置交错系统使复杂的动画和重叠动画变得简单。它可以用于时间和属性，可以动画在多个 CSS 在单个 HTML 元素上同时使用不同的时序转换属性，使用完整的内置回调和控制功能，同步播放，...
使用Anime.js的基于JavaScript的动画，第3部分：值，时间轴和播放
代码教主
06-17 1284
在Anime.js系列的上一教程中，您了解了用于控制应如何对不同目标元素进行动画处理的各种参数。 您还学习了如何使用函数参数逐渐更改元素的延迟或持续时间。 在本教程中，我们将更进一步，学习如何使用常规数字，基于函数的值和关键帧来指定属性值本身。 您还将学习如何使用时间轴顺序播放动画。 指定属性值 Anime.js允许您为目标元素的可设置动画的属性指定最终值或最终值。 动画的初始值或起始...
用Anime.js给我写一个html具有连续动作的动态的火柴人
07-17
当然，我可以使用Anime.js来为你创建一个具有连续动作的动态火柴人动画。请确保已经在HTML文件中引入了Anime.js库，然后可以使用以下代码： ```html <!DOCTYPE html> 火柴人动画 #canvas { width: 400px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值