js使用animation

最新推荐文章于 2024-06-05 10:20:14 发布
最新推荐文章于 2024-06-05 10:20:14 发布
阅读量8.2k 收藏 1
点赞数 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

        <script type="text/javascript">
            function start() {
                document.getElementById("i1").style.animation = "imag1 3s forwards";
                document.getElementById("i2").style.animation = "imag1 3s forwards";
                document.getElementById("i3").style.animation = "imag1 3s forwards";
                document.getElementById("i4").style.animation = "imag1 3s forwards";
                document.getElementById("i5").style.animation = "imag1 3s forwards";
            }

            function start2() {
                document.getElementById("i8").style.animation = "imag2 3s forwards";
                document.getElementById("i9").style.animation = "imag2 3s forwards";
                document.getElementById("i10").style.animation = "imag2 3s forwards";
                document.getElementById("i11").style.animation = "imag2 3s forwards";
                document.getElementById("i12").style.animation = "imag2 3s forwards";
            }

            function stop() {
                history.go(0);
            }
        </script>

        <style type="text/css">
            .body1 {
                width: 1300px;
                height: 750px;
                background: url(img/qq.jpg);
                margin: 0 auto;
            }

            .tb1 {
                margin: 0px auto;
                padding-top: 100px;
            }

            .tr td {}

            #inputtext:hover {
                -webkit-animation: inputt 3s forwards;
            }

            #qqq:hover {
                -webkit-animation: qqq 3s forwards;
            }

            #btn:hover {
                -webkit-animation: btn 3s forwards;
            }

            @-webkit-keyframes imag1 {
                1% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }

            @-webkit-keyframes imag2 {
                from {
                    transform: rotate(360deg);
                }
                to {
                    transform: rotate(0deg);
                }
            }

            @-webkit-keyframes qqq {
                1% {
                    transform: scale(1);
                }
                100% {
                    transform: scale(1.2);
                }
            }

            @-webkit-keyframes btn {
                1% {
                    transform: scale(1);
                    color: white;
                }
                100% {
                    transform: scale(2);
                    color: red;
                }
            }

            @-webkit-keyframes inputt {
                1% {
                    transform: scale(1);
                }
                100% {
                    transform: scale(1.5);
                }
            }
        </style>
    </head>

    <body>
        <div class="body1">
            <img src="img/qqq.jpg" id="qqq" style="position: relative;left: 770px; top: 245px;" />
            <table cellspacing="" cellpadding="7" class="tb1">
                <tr align="center">
                    <td colspan="5"><img style="opacity: 0.5;" src="img/q1.jpg"></td>
                </tr>
                <tr align="center">
                    <td colspan="5"><input type="text" id="inputtext" style="width: 380px;height: 30px;"><input type="button" id="btn" value="百度一下" style="background-color: #3388FF;color: white; height: 36px;width: 80px;"></td>
                </tr>
                <tr align="center">
                    <td colspan="5" height="60px"></td>
                </tr>
                <tr class="tr" id="tr1">
                    <td><img src="img/q3.jpg" class="tr2" id="i1" onmouseenter="start()" onmouseleave="stop()"></td>
                    <td><img src="img/q4.jpg" class="tr2" id="i2"></td>
                    <td><img src="img/q5.jpg" class="tr2" id="i3"></td>
                    <td><img src="img/q6.jpg" class="tr2" id="i4"></td>
                    <td><img src="img/q7.jpg" class="tr2" id="i5"></td>
                </tr>
                <tr class="tr">
                    <td><img src="img/q8.jpg" id="i8" onmouseenter="start2()" onmouseleave="stop()"></td>
                    <td><img src="img/q9.jpg" id="i9"></td>
                    <td><img src="img/q10.jpg" id="i10"></td>
                    <td><img src="img/q11.jpg" id="i11"></td>
                    <td><img src="img/q12.jpg" id="i12"></td>
                </tr>
            </table>
        </div>

    </body>

</html>
Future_Master_L
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js--动画
weixin_46505015的博客
07-21 942
1、在Vue中实现一个简单的小动画 <style> @keyframes leftToRight { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 0% {
animaction，判断动画执行结束，js添加动画的@keyframes
Cat_LIKE_Mouse的博客
04-18 700
var anim = document.querySelector('div') anim.addEventListener('animationend',function(e){ //动画执行完毕 执行 console.log(e)//当前动画的属性 console.log(e.animationName) //当前动画的名字； }) js添加动画的@keyframes var style = document.styleSheets[0]; style.inse..
分享12个强大的 JavaScript 动画库，让你的项目更炫酷
最新发布
前端达人
06-05 488
动画效果，可以快速吸引访客注意力。通过创造性的对象运动和流畅的页面过渡，您不仅可以为您的网站增添独特的美感，还可以增强用户参与度并创造令人难忘的第一印象。在今天这篇文章中，我们跟你分享12个强大的 JavaScript 库，从而让创建动画变得简单。像滚动动画、手写动画、SPA页面过渡、打字动画、彩色动画、SVG动画……它们功能无穷。01、Anime.js地址：https://animejs.co...
JavaScript动画库：Anime.js
weixin_41897680的博客
08-07 6645
JavaScript动画库：Anime.js
js动画效果和运动轨迹
m0_61096949的博客
07-05 1245
因为图形的轨迹等通常情况下是在css的style标签下修改的，所以这里也是使用的这种方法。.f表示f类选择器，.f>div表示该类选择器所在标签，所包含的所有的div标签。在定时器可以来修改图形的运动轨迹，在修改运动轨迹之前需要获取到该图形的id值，，后面括号里面添入比1小的值为缩小，比1大为增大，等于1则缩放为原来的形状。，这里y是一个数值类型，而px用单引号为字符串类型，所以这里。注意：边框是占有一定大小的，轮廓是不占有大小的。，比1小则所以，比1大则放大，等于1则不透明。思想：这里实现圆周远动，
CSS动画（css、js动画库：各种动画效果）
weixin_46011290的博客
04-17 448
③使用：安装 Animate.css 后，将类与任何动画名称一起添加到元素中（不要忘记前缀！，驱动的悬停效果的集合，可应用于链接、按钮、徽标、SVG、特色图像等。是一个现成的跨浏览器动画库，非常适合强调、主页、滑块和注意力引导提示。②在mian.js里引入，这样不管在哪个页面都可以直接使用；），看你需要哪种动画直接加在前缀后就实现动画了；第一种方法：文字从上到下显示动画；，版本3开源，版本4收费；
animation.js
05-16
这个是轮播必要使用的动画函数，将动画函数封装有助于节省代码，而且可以快速的开发项目，完成项目的动画需求
javascript-animation:使用Java动画
05-07
"javascript-animation:使用Java动画"这个项目旨在教我们如何利用JavaScript来实现各种吸引人的动画效果。在网页设计中，JavaScript动画不仅能够提升用户界面的视觉吸引力，还能使交互变得更加流畅自然。 首先，让...
js-animation
05-28
在这个"js-animation"教程中，我们将深入探讨JavaScript在实现动画效果中的应用，尤其是与HTML5 Canvas结合时的强大功能。 首先，我们来理解动画的本质。动画实际上是一种通过快速连续播放一系列微小变化的静态图像...
JS-Animation
05-05
JavaScript动画（JS Animation）是利用JavaScript编程语言实现的动态效果技术。在网页设计中，JavaScript动画可以增强用户体验，提供互动性和视觉吸引力。本教程将深入探讨JavaScript如何创建各种动画效果。 1. **...
使用animation翻页动画效果
03-11
本主题将深入探讨如何使用`animation`类动画效果来实现手机页面的翻页效果，这是一种常见的视觉过渡手段，使得用户在浏览内容时感觉更加自然和舒适。 一、动画基础 在计算机图形学中，动画是通过连续展示一系列...
animation:非常简单的JS动画
06-26
Animation( null, {duration: 1300}) .done(function() { var style = window.getComputedStyle( vanilla, null ) var o = {}; this.each(["height", "width", "left", "top"], function( index, name ) { o...
JS-Ufo-Animation
04-22
我开始尝试直接在React中直接构建该应用程序，但是之前我几乎没有使用过React，因此我最终变成了一个基本的Javascript应用程序，以首先学习如何制作绘图和动画。 一旦项目已经按照我的期望进行了工作，我就尝试再次...
Animation-with-js
05-31
"Animation-with-js"项目显然是一个关于如何使用JavaScript创建动画的学习实践。在这个项目中，开发者可能会遇到几个关键概念和技术，我们将逐一探讨。 首先，HTML（超文本标记语言）是构建网页的基础，它定义了...
triangle-animation-JS
06-12
##Technologies 使用 Javascript ##Use 和 Editing 要使用该应用程序，请克隆存储库。 在项目文件夹的顶层，单击 index.html 并在您的 Web 浏览器中打开它。 注意：要查看 CSS 动画，请使用 google chrome 浏览器。...
animation基本用法（css方式和原始js方式）
热门推荐
库建华的博客
01-11 1万+
浏览器支持： Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。 Safari 和 Chrome 支持替代的 -webkit-animation 属性。（仅支持现代浏览器） 定义： animation 属性是一个简写属性，用于设置六个动画属性： animation-nameanimation-duration（
JS学习（11）----animation
晨识草的博客
07-23 1655
1.在js中修改css样式事件可以在三种情况下发生，分别是： （1）在页面加载的时候 （2）在input区内容改变的时候 （3）点击 下面的栗子是（1）和（3）的结合，注意表达式中添加了style，另外需要注意的是在css中属性名称采用的格式是-（横杆），但是在js中使用的是骆驼式命名法。 index.html<!DOCTYPE html> <html lang="en"> <head>
anime.js 动画_用Anime.js动画化DOM
culi4814的博客
08-31 1301
anime.js 动画 If you’re looking for a fast and lightweight animation library, Anime.js by Julian Garnier is an option you’d like to consider. 如果您正在寻找快速且轻便的动画库，那么Julian Garnier的Anime.js是您想要考虑的选择。 Th...
js添加animation
06-10
要在JavaScript中添加动画，您可以使用CSS动画。您可以通过JavaScript获取要添加动画的元素并将CSS类添加到该元素。例如，以下是一个使用JavaScript添加CSS动画的示例代码： HTML： ``` <div id="my-element">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值