用js实现css动画效果_css3 实现动画效果怎样使他无限循环动下去

『壹』 css3 实现动画效果，怎样使他无限循环动下去

主要需要使用 -webkit-animation
如：
-webkit-animation:gogogo 2s infinite linear ;
其中gogogo是自己定义的动画帧，2s是整个动画的秒数，infinite是永久循环 linear是线性变化 (step-end则是无线性变化，直接输出结果)

代码如下：
CSS:

@-webkit-keyframes gogogo {
0%{

-webkit-transform: rotate(0deg);
border:5px solid red;

}
50%{
-webkit-transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100%{
-webkit-transform: rotate(360deg);
background:white;
border:5px solid red;
}

}

.loading{
border:5px solid black;
border-radius:40px;
width: 28px;
height: 188px;
-webkit-animation:gogogo 2s infinite linear ;
margin:100px;

}

『贰』请问用js或者css3怎么能实现元素边框动画效果，如图！

无需js css3直接能搞定材料：3张png （背景框框，两个发光的点点）；布局用定位做css3里面的回animation做动画hover触发动画请问答用js或者css3怎么能实现元素边框动画效果，如图！

『叁』如何使用javaScript控制CSS Animations和Transitions

有时候WEB开发人员认为的动画比JavaScript的动画更难理解。虽然CSS动画有其局限性，但它的性能比大多数JavaScript库更加高效，因为它可以借助硬件加速啊！其效果绝对可以超出我们的预期。

CSS animations和transitions再加上点JavaScript就可以实现硬件加速动画，而且其交互效果比大多数JavaScript库更高效。

So，让我们快点开始吧！小伙伴们都等不及了！

注意：Animations(动画)和Transitions(过渡)是不同的

CSS Transitions(过渡)被应用于元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终需要的值；而CSS Animations(动画)只是在应用时执行之前定义好的操作，它提供更细粒度的控制。

在这篇文章中，我们将分别针对上述内容进行讲解。

控制CSS Transition(过渡)

在编程论坛中，关于transition(过渡)的触发和暂停有无数的疑问。使用JavaScript可以很容易的解决这些疑问。

如何触发元素的transiton(过渡)？切换元素的类名可以触发该元素的transition(过渡)

如何暂停元素的transition(过渡)？在你想要暂停过渡点，用getComputedStyle和getPropertyValue获取该元素相应的CSS属性值，然后设置该元素的对应的CSS属性等于你刚才获取到的CSS属性值。

以下是该方法的一个例子。

<!DOCTYPE html>
<html>
<head>
<title>操作transtition</title>
<style type="text/css">
.box {
margin: 30px;
height: 50px;
width: 50px;
background-color: blue;
}
.box.horizTranslate {
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
margin-left: 50% !important;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h3>Pure Javascript</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
<h3>jQuery</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
<script type="text/javascript">
var boxOne = document.getElementsByClassName('box')[0],
boxTwo = $(".box:eq(1)");
document.getElementsByClassName('toggleButton')[0].onclick = function(){
if(this.innerHTML === 'Play'){
this.innerHTML = 'Pause';
boxOne.classList.add('horizTranslate');
}else{
this.innerHTML = 'Play';
var computedStyle = window.getComputedStyle(boxOne),
marginLeft = computedStyle.getPropertyValue("margin-left");
boxOne.style.marginLeft = marginLeft;
boxOne.classList.remove('horizTranslate');
}
}
$('.toggleButton:eq(1)').on('click',function(){
if($(this).html() === 'Play'){
$(this).html('Pause');
boxTwo.addClass('horizTranslate');
}else{
$(this).html('Play');
var computedStyle = boxTwo.css('margin-left');
boxTwo.css('margin-left',computedStyle);
boxTwo.removeClass('horizTranslate');
}
});
</script>
</body>
</html>
执行效果：http://cdpn.io/GokAm

同样的技术可以用在更高级的方法上。下面的例子也是通过改变类名来触发元素的transition(过渡)，但这次可以跟踪当前的缩放率。
<!DOCTYPE html>
<html>
<head>
<title>操作transtition</title>
<style type="text/css">
.zoomPic {
margin: 30px;
width: 300px;
height: 180px;
background-color: blue;
background-image: url(http://placehold.it/1200x720);
background-repeat:no-repeat;
background-position:50% 50%;
background-size: 300px 180px;

-webkit-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-ms-transition: all 2.5s ease-in-out;
-o-transition: all 2.5s ease-in-out;
transition: all 2.5s ease-in-out;
}
.zoomPic.zoom {
background-size: 1200px 720px !important;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h3>Pure Javascript</h3>
<div class="zoomPic"></div>
<button class='zoom'>Zoom</button>
<button class='pause'>Pause</button>
<button class='zoomout'>Zoom Out</button>

<h3>jQuery</h3>
<div class='zoomPic'></div>
<button class='zoom'>Zoom</button>
<button class='pause'>Pause</button>
<button class='zoomout'>Zoom Out</button>

<script type="text/javascript">
var zoomOne = document.getElementsByClassName('zoomPic')[0],
zoomOneBgSize = window.getComputedStyle(zoomOne).getPropertyValue('background-size'),
zoomTwo = $(".zoomPic:eq(1)"),
zoomTwoBgSize = zoomTwo.css('background-size');
// zoomOne:zoom
document.getElementsByClassName('zoom')[0].onclick = function(){
if(!zoomOne.classList.contains('zoom')){
zoomOne.classList.add('zoom');
}
}
// zoomOne:pause
document.getElementsByClassName('pause')[0].onclick = function(){
var computedStyle = window.getComputedStyle(zoomOne),
backgroundSize = computedStyle.getPropertyValue("background-size");
zoomOne.style.backgroundSize = backgroundSize;
zoomOne.classList.remove('zoom');
}
// zoomOne:zoomout
document.getElementsByClassName('zoomout')[0].onclick = function(){
zoomOne.classList.remove('zoom');
zoomOne.style.backgroundSize = zoomOneBgSize;
}
// zoomTwo:zoom
$('.zoom:eq(1)').on('click',function(){
if(!zoomTwo.hasClass('zoom')){
zoomTwo.addClass('zoom');
}
});
// zoomTwo:pause
$('.pause:eq(1)').on('click',function(){
var computedStyle = zoomTwo.css('background-size');
zoomTwo.css('background-size',computedStyle);
zoomTwo.removeClass('zoom');
});
// zoomTwo:zoomout
$('.zoomout:eq(1)').on('click',function(){
zoomTwo.removeClass('zoom');
zoomTwo.css('background-size',zoomTwoBgSize);
});
</script>
</body>
</html>

转载仅供参考，版权属于原作者。祝你愉快，满意请采纳哦

『肆』 JS 怎么动态设置CSS3动画的样式

引入jquery

然后给你要设置动画的对象增加或者删除css3动画的类就可以了。

如我这里用colorchange这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了

<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>Test</title>
<styletype="text/css">
body{
padding:20px;
background-color:#FFF;
}
.colorchange
{
animation:myfirst5s;
-moz-animation:myfirst5s;/*Firefox*/
-webkit-animation:myfirst5s;/*SafariandChrome*/
-o-animation:myfirst5s;/*Opera*/
}

@keyframesmyfirst
{
from{background:red;}
to{background:yellow;}
}

@-moz-keyframesmyfirst/*Firefox*/
{
from{background:red;}
to{background:yellow;}
}

@-webkit-keyframesmyfirst/*SafariandChrome*/
{
from{background:red;}
to{background:yellow;}
}

@-o-keyframesmyfirst/*Opera*/
{
from{background:red;}
to{background:yellow;}
}
#main{
width:100px;
height:100px;
background:red;
}
#cgbt{
width:100px;
margin:20px000;
text-align:center;
cursor:pointer;
}
#cgbt:hover{
background-color:#2D93CA;
}
</style>
</head>
<body>
<divid="main">
我会变么？
</div>
<divid="cgbt">
点我让上面的变颜色
</div>
<scriptsrc="jquery-3.2.1.min.js"type="application/javascript"></script>
<script>
$(document).ready(function(){
$("#cgbt").click(function(){
$("#main").attr("class","colorchange");
});
});
</script>
</body>
</html>

『伍』 js+css如何实现动画效果

简单的不用js就行

<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf8">
<title>untitled</title>
<linkrel="stylesheet"type="text/css"href="">
<styletype="text/css">
*{
margin:0px;
padding:0px;
}
#a{
position:absolute;
width:50px;
height:50px;
background-color:#f3e9e0;
border-radius:50%;
left:400px;
top:200px;
}
#adiv{
position:absolute;
width:50px;
height:50px;
border-radius:50%;
transition:all0.5s;
left:0px;
top:0px;
}
#a:nth-child(1){
background-color:#c1d4ed;
}
#a:nth-child(2){
background-color:#7d6e69;
}
#a:nth-child(3){
background-color:#dad6d5;
}
#a:nth-child(4){
background-color:#caaa9d;
}
#a:nth-child(5){
background-color:#6bdeff;
}
#a:hover:nth-child(1){
left:150px;
top:-150px;
}
#a:hover:nth-child(2){
left:150px;
top:150px;
}
#a:hover:nth-child(3){
left:300px;
top:-150px;
}
#a:hover:nth-child(4){
left:300px;
top:150px;
}
#a:hover:nth-child(5){
left:450px;
top:0px;
}
</style>
</head>
<body>
<divid='a'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

鼠标伸到球上自动扩散移动

『陆』如何用js使得一个已经结束的css的animation动画重新执行一遍

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
.box{width:400px;height:400px;background-color:red;}
.animation{
animation:rotate2sbothlinear;
}
@keyframesrotate{
form{
transform:rotate(0deg)
}
to{transform:rotate(360deg)}
}
</style>
</head>
<body>


<divclass="box">
box
</div>

<script>
document.addEventListener('DOMContentLoaded',function(){
varbox=document.querySelector('.box');
box.classList.add('animation');
box.addEventListener('animationend',function(e){
varself=this
self.classList.remove('animation')
setTimeout(function(){
self.classList.add('animation')
},1)
})
})
</script>

</body>
</html>

动画播放结束的事件是animationend

如果你只是要无限循环的话，不用javascript，css animation这样写

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
.box{width:400px;height:400px;background-color:red;}
.animation{
animation:rotate2sbothlinearinfinite;
}
@keyframesrotate{
form{
transform:rotate(0deg)
}
to{transform:rotate(360deg)}
}
</style>
</head>
<body>


<divclass="boxanimation">
box
</div>


</body>
</html>

『柒』使用CSS替代JS实现几种常见的特效

可以代替JavaScript的css特效有很多，比如说通过伪类:hover、:actived等实现触发效果，动画效果可以用animation属性，对图像处理可以transform、filter等

『捌』怎样用js或者css来实现这种效果

<html>
<head>
<style>
</style>

<body>
<canvasid="emmm"width="233"height="233"></canvas>
</body>
<script>
varcanvas=document.getElementById('emmm');
varctx=canvas.getContext('2d');
img=newImage();
img.src="http://s6.sinaimg.cn/mw690/006xDASvzy73Xzra5sV55&690";
img.onload=function(){
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation="destination-atop";
//canvas重叠属性
//http://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp
ctx.font="bold50px微软雅黑";
ctx.fillStyle="rgba(0,0,0,0);";
ctx.fillText("哈哈",50,100);
}
</script>
</head>
</html>
//哇一个问题发了两遍看我能不能水两个采纳

导航:首页 > 编程语言 > 用js实现css动画效果

用js实现css动画效果

与用js实现css动画效果相关的资料

友情链接