js_animation

最新推荐文章于 2023-11-05 18:22:34 发布
最新推荐文章于 2023-11-05 18:22:34 发布
阅读量856 收藏
点赞数
分类专栏： JavaScript

空格键展示animate.css 动画效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css "/>
        <style type="text/css">
            #big{
                padding-top: 200px;
                width: 1000px;
                /*border: 1px solid red;*/
                margin: 0 auto;
            }
            #big>div{
                width: 100px;
                height:100px;
                /*border: 1px solid black;*/
                float: left;
                margin-right: 5px;
            }
            #myInput{
                z-index: 1000;
                position: absolute;
                top: 60%;
                left: 40%;
                display: inline-block;
                width: 200px;
                height: 100px;
                background: green;
                font-size: 50px;
                font-weight: bolder;
                border-radius: 100px;
                outline: none;
                box-shadow: 5px 5px 20px;
            }
            #myInput:hover{
                background: burlywood;
                color: white;               
            }
            #myInput:active{
                color: black;
            }
        </style>
    </head>
    <body>
        <div id="big">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>


            <p style="clear: both;"></p>
        </div>
        <input type="button" name="" id="myInput" value="刷新" οnclick="newpage()" />

        <script type="text/javascript">

            var divArr = document.querySelectorAll("#big>div");
            var imgAnimateArr = [
            "bounce" ,"flash" ,"pulse" ,"rubberBand" ,"shake" ,"swing" , "tada" ,"wobble" ,"jello" ,"bounceIn" ,
            "bounceInDown" ,"bounceInLeft" ,"bounceInRight" ,"bounceInUp" ,"bounceOut" , "bounceOutDown" ,
            "bounceOutLeft" ,"bounceOutRight" ,"bounceOutUp" , "fadeIn" ,"fadeInDown" ,"fadeInDownBig" ,"fadeInLeft" ,
            "fadeInLeftBig" , "fadeInRight" ,"fadeInRightBig" ,"fadeInUp" ,"fadeInUpBig" ,"fadeOut", "fadeOutDown" ,
            "fadeOutDownBig" ,"fadeOutLeft" ,"fadeOutLeftBig" ,"fadeOutRight" ,"fadeOutRightBig" ,"fadeOutUp" ,
            "fadeOutUpBig" , "flipInX" ,"flipInY" ,"flipOutX" ,"flipOutY" ,"lightSpeedIn" , "lightSpeedOut" ,
            "rotateIn" ,"rotateInDownLeft" ,"rotateInDownRight" , "rotateInUpLeft" ,"rotateInUpRight" ,"rotateOut" ,
            "rotateOutDownLeft" , "rotateOutDownRight" ,"rotateOutUpLeft" ,"rotateOutUpRight" ,"hinge" , "zoomInUp" ,
            "zoomOut" ,"zoomOutDown" ,"zoomOutLeft" ,"zoomOutRight" , "zoomOutUp" ,"slideInDown" ,"slideInLeft" , 
            "slideInRight" ,"slideInUp" ,"slideOutDown" ,"slideOutLeft" ,"slideOutRight" ,"slideOutUp"];

            for(var i = 0; i < divArr.length; i++){
                divArr[i].style.background = randColor();
                var randAnimateNum = Math.floor(Math.random() * (imgAnimateArr.length - 0 + 1) + 0);
                divArr[i].className = "animated " + imgAnimateArr[randAnimateNum];
            }

            function newpage(){
                 window.location.reload();
            }
            function randColor(){
            var r = Math.floor(Math.random() * (250 - 0 + 1) + 0);
            var g = Math.floor(Math.random() * (250 - 0 + 1) + 0);
            var b = Math.floor(Math.random() * (250 - 0 + 1) + 0);
            return "rgb(" + r +"," + g +"," + b +")";               
            }
            var myInput = document.getElementById("myInput");
             document.onkeydown = function(ev){//ev 形参（名字随意），它代表的是本次事件的对象，它里面包含一些这次事件的一些信息
                if(ev.keyCode == "32"){
                    newpage();
                    myInput.style.background = "burlywood";
                    myInput.style.color = "white"
                }
             }
        </script>
    </body>
</html>


键盘事件

//1.onkeydown  键盘事件  按下去一直有
	document.onkeydown = function(ev){//ev 形参（名字随意），
	//它代表的是本次事件的对象，它里面包含一些这次事件的一些信息
		console.log(ev);
	}
	//2.onkeypress 能识别大写,不能识别 ctrl alt shift 上 下 左 右 等特殊按键
	//3.onkeyup
	document.onkeyup = function(ev){
		console.log(ev.Key);
	}
----------
例子：键盘控制Div移动
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<script>
document.οnkeydοwn=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');

    if(oEvent.keyCode==37)
    {
        oDiv.style.left=oDiv.offsetLeft-10+'px';
    }
    else if(oEvent.keyCode==39)
    {

        oDiv.style.left=oDiv.offsetLeft+10+'px';
    }
};
</script>

轮播图

<style type="text/css">
	#main{
		width: 300px;
		height: 200px;	
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}
	#contanier{
		/*width: 1200px;*/
		height: 200px;
		position: absolute;		
		transition: all 0.5s ease ; 	
		left: 0;	
	}
	#contanier>div{
		float: left;
		width: 300px;
		height: 200px;			
		font-size: 50px;
		text-align: center;
		line-height: 200px;				
	}
	#contanier>div:nth-child(1){
		background: gray;
	}
	#contanier>div:nth-child(2){
		background: darkblue;
	}
	#contanier>div:nth-child(3){
		background: firebrick;
	}
	#contanier>div:nth-child(4){
		background: antiquewhite;
	}
	#btn{
		width: 200px;
		height: 50px;
		margin: 0 auto;
		text-align: center;
	}
	#btn>input{
		width: 80px;
		height: 45px;
		display: inline-block;
		background: green;
		font-size: 14px;
		outline: none;
	}
</style>
</head>
<body>
<div id="btn">
	<input type="button" value="上一张" id="lastBtn"/>
	<input type="button" value="下一张" id="nextBtn"/>
</div>

<!--可视区域div-->
<div id="main">
	<!--装轮播图里所有图片的DIV-->
	<div id="contanier">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
</div>

<script type="text/javascript">
	var  theContainerDiv = document.querySelectorAll("#contanier")[0];
	var  imgArr = document.querySelectorAll("#contanier>div");			
	var lastBtn = document.getElementById("lastBtn");
	var nextBtn = document.getElementById("nextBtn");			
	theContainerDiv.style.width = imgArr[0].offsetWidth * imgArr.length + "px";
	var index = 0;
	lastBtn.onclick = function(){
		if(index == 0){
			index = 3;
		}else{
			index--;
		}				
		theContainerDiv.style.left = -index * imgArr[0].offsetWidth + "px";

	};
	nextBtn.onclick = function(){
		if(index  == imgArr.length -1){
			index  = 0;
		}else{
			index++;
		}
		console.log(index);
		theContainerDiv.style.left = -index * imgArr[0].offsetWidth + "px";
	}			
</script>

移动的小球

<style type="text/css">
		html,body{
			width: 100%;
			height: 100%;
			background: burlywood;
		}
		#div_1{
		width: 100px;
		height: 100px;
		background: green;
		position: absolute;  /*动画就是让他absolute,然后改变偏移量实现JS动画*/
		border-radius: 50px;
	}
</style>
</head>
<body>
<div id="div_1"></div>
<script type="text/javascript">
	//标签.style.left 只能赋值
	//标签.style.offsetLeft 只能取值
	//1.匀速运动			
	var speed = 5;
	var speed1 = 1;
	var myD = document.getElementById("div_1");
	var w = document.body.clientWidth;
	var h = document.body.clientHeight;			
	var timer = setInterval(function(){					
		//left 左边距 offsetleft 左偏移量
		myD.style.left = myD.offsetLeft + speed +"px";
		myD.style.top = myD.offsetTop + speed1 +"px";
		//右边界 || 左边界
		if(myD.offsetLeft >=(w - myD.offsetWidth) || myD.offsetLeft <= 0){
			speed = -speed;
		}
		//下边界 || 上边界
		if(myD.offsetTop >=(h - myD.offsetHeight) || myD.offsetTop <=0){
			speed1 = -speed1;
		}
		myD.style.background =  randColor();				
	},10);
	
	function randColor(){
		var r = Math.floor(Math.random() * (250 - 0 + 1) + 0);
		var g = Math.floor(Math.random() * (250 - 0 + 1) + 0);
		var b = Math.floor(Math.random() * (250 - 0 + 1) + 0);
	    return "rgb(" + r +"," + g +"," + b +")";				
	}			
</script>

缓冲运动

<style type="text/css">
	#div_1{
		width: 100px;
		height: 100px;
		background: green;
		border-radius: 50px;
		position: absolute;
	}
	#end_line{
		width: 20px;
		height: 1000px;
		background: lightskyblue;
		position: absolute;
		left: 1200px;
	}
</style>
</head>
<body>
<a href="http://www.runoob.com/jsref/jsref-obj-math.html">菜鸟Math</a>
<div id="div_1"></div>
<div id="end_line"></div>
<script type="text/javascript">
	var div1 = document.getElementById("div_1");
	var endLine = document.getElementById("end_line");
	var speed = 0;				
	var t =	setInterval(function(){
	  var line = endLine.offsetLeft - div1.offsetWidth - div1.offsetLeft ;  //+12小数误差
	  //把距离的值缩小13倍，变成速度
	  var speed = Math.floor(line / 8);  
	  div1.style.left = div1.offsetLeft + speed + "px";
	  //当速度
	  if(speed < 1){
	   clearInterval(t);
	   div1.style.left = endLine.offsetLeft - div1.offsetWidth + "px"; //强制等于最终位置					
	   }				
	},50);
</script>

图片滚动

<style>
	* {
		margin: 0;
		padding: 0;
	}
	
	#div1 {
		width: 720px;
		height: 108px;
		margin: 100px auto;
		position: relative;
		background: red;
		overflow: hidden;
	}
	
	#div1 ul {
		position: absolute;
		left: 0;
		top: 0;
	}
	
	#div1 ul li {
		float: left;
		width: 178px;
		height: 108px;
		list-style: none;
	}
	
</style>
<script>
	window.onload = function() {
		var oDiv = document.getElementById('div1');
		var oUl = oDiv.getElementsByTagName('ul')[0];
		var aLi = oUl.getElementsByTagName('li');
		var speed = 2;
		oUl.innerHTML += oUl.innerHTML;
		oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; //8张图片的宽度

		function move() {
			//当ul左方距离<ul本身长度一半时      重置
			if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
				oUl.style.left = '0';
			}
			if(oUl.offsetLeft > 0) {
				oUl.style.left = -oUl.offsetWidth / 2 + 'px';
			}

			oUl.style.left = oUl.offsetLeft + speed + 'px';
		}
		var timer = setInterval(move, 30);
		oDiv.onmouseover = function() {
			clearInterval(timer);
		};
		oDiv.onmouseout = function() {
			timer = setInterval(move, 30);
		};
		document.getElementsByTagName('a')[0].onmouseover = function() {
			speed = -2;
		};
		document.getElementsByTagName('a')[1].onmouseover = function() {
			speed = 2;
		};
	}
</script>
</head>

<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>

<div id="div1">
	<ul>
		<li><img src="img/1.jpg" /></li>
		<li><img src="img/2.jpg" /></li>
		<li><img src="img/3.jpg" /></li>
		<li><img src="img/34.jpg" /></li>
	</ul>
</div>
</body>

键Div 移动

<style>
#div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;}
</style>
<script>
var timer=null;
function startMove()
{
    var oDiv=document.getElementById('div1');   
    clearInterval(timer);
    //随着鼠标的点击次数的增多，删除以前的定时器，只增加一个新的定时器
    timer=setInterval(function ()
    {
        var speed=1;
        if(oDiv.offsetLeft>=300){
            clearInterval(timer);
        }else{
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始运动" οnclick="startMove()" />
<div id="div1">
</div>
</body>

侧面滑动：移入展现；移出消失

<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
//right:-20px   居右  外负数  内正数
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>
<script>
window.οnlοad=function ()
{
    var oDiv=document.getElementById('div1');   
    oDiv.οnmοuseοver=function (){
        startMove(0);
    };
    oDiv.οnmοuseοut=function () {
        startMove(-150);
    };
};
var timer=null;
function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');   
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;        
        if(oDiv.offsetLeft>iTarget){
            speed=-10;
        }else{
            speed=10;
        }
        if(oDiv.offsetLeft==iTarget) {
            clearInterval(timer);
        }else{
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    }, 30);
}
</script>
</head>
<body>
<div id="div1">
    <span>分享到</span>
</div>
</body>

淡入淡出

<style>
#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
window.οnlοad=function ()
{
    var oDiv=document.getElementById('div1');
    oDiv.οnmοuseοver=function (){
        startMove(100);
    };
    oDiv.οnmοuseοut=function (){
        startMove(30);
    };
};
var alpha=30;
var timer=null;

function startMove(iTarget){
    var oDiv=document.getElementById('div1');
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;
        if(alpha<iTarget){
            speed=10;
        }else{
            speed=-10;
        }
        if(alpha==iTarget){
            clearInterval(timer);
        } else{
            alpha+=speed;
            oDiv.style.filter='alpha(opacity:'+alpha+')';
            oDiv.style.opacity=alpha/100;
        }
    }, 30);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>

右侧悬浮框

<!DOCTYPE HTML>
<style>
#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}

<script>
window.οnscrοll=function ()
{
    var oDiv=document.getElementById('div1');   
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  
    startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
};

var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');   
    clearInterval(timer);
    timer=setInterval(function ()
    {
        var speed=(iTarget-oDiv.offsetTop)/8;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if(oDiv.offsetTop==iTarget){
            clearInterval(timer);
        }else{
            document.title=iTarget;
            document.getElementById('txt1').value=oDiv.offsetTop;
            oDiv.style.top=oDiv.offsetTop+speed+'px';
        }
    }, 30);
}
</script>
</head>
<body style="height:16000px;">
<input type="text" id="txt1" style="position:fixed; right:0; top:0;" />
<div id="div1"></div>
</body>
</html>

新建标签并添加删除

<style type="text/css">
	div{
		width: 50px;
		height: 50px;
		background: green;
	}
	
</style>
</head>
<body>
<script type="text/javascript">
	//新建标签
	var theD = document.createElement("div")	;
	var input1 = document.createElement("input");
	var button1 =document.createElement("button");
	var theHr1 =document.createElement("hr");
	
	//添加
	document.body.appendChild(theD);
	document.body.appendChild(input1);
	document.body.appendChild(button1);
	document.body.appendChild(theHr1);

	//删除
	//document.body.removeChild(theD);
	//扩展：后添加的标签在下面
</script>

产生字母

<style type="text/css">
body{
	width: 100%;
	height: 900px;
	background: burlywood;
}
div{
	width: 100px;
	height: 100px;				
	position: absolute;
	font-size: 24px;
	line-height: 100px;
	text-align: center;
}			
</style>
</head>
<body>	
<script type="text/javascript">
//需求：每间隔一定时间，横向随机位置，随机产生一个字母 A65  a97 只有大写			
setInterval(function(){
	//1.隔一定时间添加标签
	var myDiv = document.createElement("div");
	var lDistance = Math.random() * (document.body.clientWidth - myDiv.offsetWidth);  //产生div的左边距随机数			 
	//3.产生字母的随机数
	var letterASC = Math.floor(Math.random() * (90 - 65 + 1) + 65); 
	//将随机数字转换成字母 ****************
    var randWord = String.fromCharCode(letterASC);		
    myDiv.style.color = randColor();
    myDiv.style.background = randColor();
    //2.给每个标签增值
	myDiv.style.left = lDistance + "px"; //div的位置
	document.body.appendChild(myDiv);
	myDiv.innerHTML = randWord;
	
	animateDown(myDiv);
	deleteDiv(myDiv);
	
},1000);
	//4.封装掉落效果动画
	function animateDown(obj){
		//obj 代表标签					
		setInterval(function(){
			obj.style.top = obj.offsetTop + 2 + "px";
		},20);
	}
	function deleteDiv(obj){
		setInterval(function(){
			if(obj.offsetTop > document.body.clientHeight - obj.offsetHeight){
				obj.style.display = "none";
			}
		},1000);
		
	}
	function randColor(){
		var r = Math.floor(Math.random() * (250 - 0 + 1) + 0);
		var g = Math.floor(Math.random() * (250 - 0 + 1) + 0);
		var b = Math.floor(Math.random() * (250 - 0 + 1) + 0);
	    return "rgb(" + r +"," + g +"," + b +")";				
	}		
</script>

雪花飘落 height:100%

//1.创建雪花
function createXue(){
    setInterval(function(){
        var myP = document.createElement("span");
        myP.style.fontSize = "30px";
        myP.innerHTML = "❄️";
        myP.style.position = "absolute";
        myP.style.top = -20 + "px";
        myP.style.zIndex = 5000;
        var cliW = document.body.clientWidth;
        var cha = cliW - myP.offsetWidth;
        myP.style.left = Math.floor(Math.random() * cha) + "px";
        document.body.appendChild(myP);
        downXue(myP);
        disappear(myP);                 
    },100);
}
createXue();
//2.雪花掉落动画
function downXue(obj){
    var speed = 5;
    setInterval(function(){
        obj.style.top = obj.offsetTop + speed + "px";
    },20);              
}
function disappear(obj){
    setInterval(function(){
        if(obj.offsetTop >= document.body.clientHeight - obj.offsetHeight -100){
            //obj.style.display = "none";
            document.body.removeChild(obj);
        }                   
    },10)               
}

测边栏滚动

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<head>
<style>
#testDiv1 {
    width: 225px;
    height: 97px;
    position: absolute;
    right: 0;
    background: green;
}
</style>
<title>上下滑动侧边栏</title>
<script type="text/javascript">
window.onload = window.onscroll = function() {
    var sDiv = document.getElementById('testDiv1');
    var varTop = document.documentElement.scrollTop || document.body.scrollTop;
    var t = varTop + (document.documentElement.clientHeight - sDiv.offsetHeight) / 2;
    //让速度发生变化
    startMove(parseInt(t), 7);
}
var varTimer = null;
function startMove(destination, speed) {
    var sDiv = document.getElementById('testDiv1');
    clearInterval(varTimer);
    varTimer = setInterval(function() {
        //div一开始离目标的距离除以speed  div移动的速度  div距离越近  速度越小
        var varSpeed = (destination - sDiv.offsetTop) / speed;
        //Round是四舍五入 ceil向上取整。。floor向下取整
        varSpeed = varSpeed > 0 ? Math.ceil(varSpeed) : Math.floor(varSpeed);
        //到达目的地  清除定时器
        if(sDiv.offsetTop == destination) {
            clearInterval(varTimer);
        } else {
            //移动
            sDiv.style.top = sDiv.offsetTop + varSpeed + 'px';
        }
    }, 30);
}
</script>
</head>
<body style="height:3000px;">
<div id="testDiv1"></div>
</body>
</html>

图片切换

#img_0{
    display: block;
    }
    #img_1{
        display: none;
    }
    #img_2{
        display: none;
    }
    .active{
        background: yellow;
    }

    <input type="button" id="btn1" value="第一张" class="active"/>
    <input type="button" id="btn2" value="第二章"/>
    <input type="button" id="btn3" value="第三章"/><br/>
    <img src="0.jpeg" id="img_0"/>
    <img src="1.jpeg" id="img_1"/>
    <img src="2.jpeg" id="img_2"/><br/>
    <script type="text/javascript">
        var inputArr = document.getElementsByTagName("input"); 
        //获取document下的所有input 标签，返回的是一个数组（即使只有一个元素）
        var imgArr = document.getElementsByTagName("img");
        for(var i = 0; i < inputArr.length; i++){
        inputArr[i].ind = i;  
         //给按钮对象扩展一个ind属性,然后每个按钮就可以用ind的属性保留自己的序号
            inputArr[i].onclick = function(){
                for(var j = 0; j < inputArr.length; j++){
                    imgArr[j].style.display = "none";//全部隐藏     
                    inputArr[j].className = "";
                }                       
                imgArr[this.ind].style.display = "block";//对当前对象的引用
                inputArr[this.ind].className = "active";
            }                   
        }       
    </script>

选项卡

<style>
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; 
background:#CCC; border:1px solid #999; display:none;}
</style>
<script>
window.οnlοad=function ()
{
    var oDiv=document.getElementById('div1');
    var aBtn=oDiv.getElementsByTagName('input');
    var aDiv=oDiv.getElementsByTagName('div');

    for(var i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].οnclick=function ()
        {
            for(var i=0;i<aBtn.length;i++)
            {
                aBtn[i].className='';
                aDiv[i].style.display='none';
            }
            this.className='active';
            //alert(this.index);
            aDiv[this.index].style.display='block';
        };
    }
};
</script>

<div id="div1">
    <input class="active" type="button" value="教育" />
    <input type="button" value="培训" />
    <input type="button" value="招生" />
    <input type="button" value="出国" />
    <div style="display:block;">1111</div>
    <div>2222</div>
    <div>333</div>
    <div>4444</div>
</div>


小风儿
关注
专栏目录
animation:非常简单的JS动画
06-26
动画片 非常简单的JS动画 // e.g.: http://jsfiddle.net/88y41282/1/ var vanilla = document.getElementById("vanilla"); Animation( null, {duration: 1300}) .done(function() { var style = window.getComputedStyle( vanilla, null ) var o = {}; this.each(["height", "width", "left", "top"], function( index, name ) { o[name] = +style .getPropertyValue( name ) .slice(
10-animation
冰霜的博客
08-31 442
动画 ​ 由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作 -过渡和动画之间的异同 1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以
JavaScript--＞应用animate()函数实现灯笼浮动动画（多个动画同时调用）
最新发布
qq_73975532的博客
11-05 1809
JavaScript应用animate()函数封装css动画（多个动画同时调用）
js动画animation的属性及效果
JYB2106056288的博客
12-11 4326
彻底弄懂animation属性效果 一般来说给一个元素加上animation,加在他的css上就好， 常用的动画属性有： animation-name:test 动画名称，唯一标识，与@keyframes相对接，必选属性； animation-duration:5s 动画的单次生效时间,不包含animation-delay在内，必选 示例： animation-interation-count:2, animation-delay:5s, animation-duration:10s anima
通过 js 给元素添加动画样式animation属性 ,以及 perspective 属性探究
shaoyahu的博客
11-29 6783
使用 js 给元素添加动画 , 同时探究C3属性 perspective
javascript_animation:在 javascript 中尝试动画
07-04
10. **WebGL和Three.js**：对于3D动画，WebGL提供了一种在浏览器中直接绘制3D图形的方式，而Three.js则是一个基于WebGL的JavaScript库，简化了3D动画的开发。 以上就是JavaScript动画的主要知识点，从基础原理到...
千锋html5教程：01_js_animation_原理_匀速-1_html_
10-04
【标题】"千锋html5教程：01_js_animation_原理_匀速-1_html_" 涉及的知识点主要集中在HTML基础以及JavaScript动画的原理和实现上，特别是如何使用JavaScript来创建匀速动画效果。在HTML5中，增强的交互性和动态功能...
RN_Animation
02-11
本文将深入探讨RN_Animation的核心概念、工作原理以及实际应用，帮助你掌握如何在JavaScript中实现React Native的动画效果。 1. **基本概念** RN_Animation基于Facebook的Animated库，它提供了一种声明式的方式来...
d3js_animation_video:使用 PhantomJS、D3、imagemagick 和 ffmpeg 从 D3 动画创建视频（或只是 gif）
06-11
d3js_animation_video 使用 PhantomJS、D3、imagemagick 和 ffmpeg 从 D3 动画创建视频（或只是 gif） 这是使用 PhantomJS 为 D3 提供完整 DOM 并允许我们从 D3 处理的 svg 标签编写 svg 文件的概念证明。...
hongxin.rar_Animation
09-20
"hongxin.rar_Animation"这个压缩包显然包含了与动画相关的资源，让我们来深入探讨一下动画技术及其相关知识点。 首先，我们可以从“www.pudn.com.txt”这个文件名推测，这可能是一个链接或说明文档，通常在分享...
animation.js
05-16
这个是轮播必要使用的动画函数，将动画函数封装有助于节省代码，而且可以快速的开发项目，完成项目的动画需求
在网页中用JS设置了animation没有效果(可能的原因及解决方案)
wockky的博客
04-22 6879
不得不说有时候写网页做效果，一个一个分开效果都出得来 , 合在一起就是死活出不来效果 , 下面分享一下我刚刚找到JS设置animation出不来效果的原因.上面就是我总结出来的一些可能会出错的地方,以及一些解决的办法,因为我也是刚开始学习的萌新,所以肯定还有很多没有注意到的地方,欢迎大家补充、提问。这句的意思是在窗体加载完毕以后运行 , 如果把元素获取的代码写到这块以外的地方就会出现元素为null的显示就会找不到操作对象。2.用JS设置属性的时候写法不对 , 开始的时候我用。这两种写法都是错误的。
原生js的animate()方法详解
WanweI897的博客
09-22 4696
Element 接口的 animate() 方法是创建一个新的 Animation 的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的 Animation 对象实例。同时通过Element.getAnimations() 方法可获取元素所有的Animation实例。
【Animejs教程】一个绝赞易用的动画库 Animejs，一个绝好的threejs动画辅助库
qq_42760477的博客
06-12 4881
前端动画库 animejs 使用教程
js使用animation
weixin_40321535的博客
11-30 8310
<!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/javasc
js动画(animate)简单引擎
weixin_33704591的博客
12-04 1098
用惯了jquery的同学,相信都很欣赏其动画引擎。确实相对比较完善！如果，如果想像力足够丰富的话，相信可以做出超出想像的效果。当然，跟2d库比起来，还是相差相当一段距离。jquery压根也不是专门为动画而设计的。模拟真实世界方面，还是不足的。但在web世界里还是游刃有余的。动画其实一直是flash的专属领地(web区哉)。只是它常常沦为黑客攻击的漏洞所在，而且要装插件，有时候文件实在太大，而且性耗...
动画效果的使用
weixin_52655964的博客
08-26 658
和过渡不同，动画是需要定义规则的，并且可以有多个关键帧，而且动画可以实现自动播放，多次播放的效果。选择器 {animation: 动画规则名 动画时长 动画曲线 动画延迟时间 动画次数 动画方向 动画填充模式 动画的状态;}想要实现一个动画，我们必须先创建动画的规则@keyframs 自定义名字 {}在规则中，有对应的写法@keyframs 自定义名字 {0% {}n% {}100% {}}n代表的是数字，可以有很多个。在百分比后面的大括号中，我们需要写对应的样式。...
JavaScript(JS) 实现动画(Animation)
亮亮的专栏
09-21 3601
JavaScript(JS) 可以创建一个复杂的动画效果，例如，烟花、淡入淡出效果、物体运动等，JavaScript 可用于根据由逻辑方程或函数确定的某种模式在页面周围移动多个 DOM 元素，本文主要介绍JavaScript(JS) 实现动画(Animation)效果。 原文地址：JavaScript(JS) 实现动画(Animation) ...
animaction，判断动画执行结束，js添加动画的@keyframes
Cat_LIKE_Mouse的博客
04-18 728
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..
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、付费专栏及课程。

余额充值