前端之js动画-47

拼搏现实的明天。 2021-12-19 15:49 211阅读 0赞

[前端之js动画-47][js_-47]

# JS动画 #

## 一、JS结合CSS实现动画 ##

#### 1、通过事件修改指定的样式，形成过渡的第二状态 ####

<style>    #div {        width: 200px;        height: 200px;        background: red;        transition: .2s;   } </style> <div id="div"></div> <script>    div.onclick = function() {        this.style.width = '400px';   } </script>

#### 2、通过事件修改指定的类名，形成过渡的第二状态 ####

<style>    .div {        width: 200px;        height: 200px;        background: red;        transition: .2s;   }    .div.active {        transform: scale(1.2);   } </style> <div id="div" class="div"></div> <script>    div.onclick = function() {        var t_name = "active"        var c_name = this.className;        if (!c_name.match(t_name)) {            this.className += " " + t_name;       } else {            this.className = c_name.replace(" " + t_name, "");       }   } </script>

## 二、JS通过定时器实现动画 ##

*  轮播图

posted on 2018-12-27 21:18 [漫天飞雪世情难却][Link 1] 阅读( ...) 评论( ...)   [编辑][Link 2] 收藏

转载于:https://www.cnblogs.com/jokezl/articles/10187433.html

[js_-47]: https://www.cnblogs.com/jokezl/articles/10187433.html
[Link 1]: https://www.cnblogs.com/jokezl/
[Link 2]: https://i.cnblogs.com/EditArticles.aspx?postid=10187433

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 python基础一 day47 前端

[1700204-20190904142500148-1806503136.png][] ![1700204-20190904152808364-1237337...

太过爱你忘了你带给我的痛/ 2024年04月20日 10:58/ 0 赞/ 74 阅读

相关前端之JS

JavaScript概述　　ECMAScript和JavaScript的关系　　　　1996年11月，JavaScript的创造者--Netscape公司，决定将J

柔情只为你懂/ 2023年08月17日 15:25/ 0 赞/ 142 阅读

相关 Roson的Qt之旅#47 QML序列动画SequentialAnimation

1.继承关系父类：Animation 子类：无 2.详细说明 SequentialAnimation和ParallelAnimation类型允许多个动画一起运

短命女/ 2022年09月14日 11:09/ 0 赞/ 163 阅读

相关 jQuery前端简历动画js特效

[下载地址][Link 1]jQuery前端简历动画特效，将可以做的事情做到简历里来动态呈现，特色是自动打字 ![1630441044.png][] dd: [Link

桃扇骨/ 2022年09月09日 12:47/ 0 赞/ 205 阅读

相关 CSS前端动画

CSS动画（animation）结构： @keyframes test { / from或者0% /

旧城等待，/ 2022年09月04日 09:45/ 0 赞/ 178 阅读

相关前端面试之JS

javascript部分 > （1）：简要的描述JavaScript 中的作用域链 > 任何一段JavaScript代码都对应一个作用域链，作用域链中存放一系列对象，代码

ゞ浴缸里的玫瑰/ 2022年06月03日 10:55/ 0 赞/ 214 阅读

相关 JS之简单导航栏动画

> 实现思路：通过js动态添加css和删除css以及设置过渡时间 1:index.html <!DOCTYPE html> <html lang="en

冷不防/ 2022年05月10日 00:33/ 0 赞/ 250 阅读

相关前端动画交互

一、简介 Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动

墨蓝/ 2022年02月13日 07:25/ 0 赞/ 260 阅读

相关前端之js动画-47

[前端之js动画-47][js_-47] JS动画一、JS结合CSS实现动画 1、通过事件修改指定的样式，形成过渡的第二状态 <style>

拼搏现实的明天。/ 2021年12月19日 15:49/ 0 赞/ 212 阅读

相关前端动画渲染引擎pixi.js系列（10）骨骼动画实现之DragonBones

在介绍骨骼动画之前，我先介绍一下DragonBones，它的中文名是龙骨，是一套由Egret团队制作的独立的骨骼动画编辑器，我们PIXI播放骨骼动画所需的图片和JSON数据都是

r囧r小猫/ 2021年09月12日 07:14/ 0 赞/ 1321 阅读