本文目录一览：
如何使用js捕获css3动画
CSS Animation Store
这个主意是通过一个简单的接口来访问CSS动画，实际上之前的Morf.js和CSSA中都有这样的处理，大部分代码已经有了，只需要整整，按照Chris所建议的接口风格写下来
从GitHub下载CSS Animation Store
下面是CSS Animation Store的基本接口（关于代码如何工作的信息），将代码放在标签之前，会创建一个全局的对象 CSSAnimations，这个对象包含所有当前可以使用的CSS动画
比如，获取名称为”spin”的动画，你可以按下面的代码：
var spin = CSSAnimations.spin;
参数spin是一个KeyframeAnimation实例，有下面的属性和函数：
keyframes – KeyframeRule 集合
original – 原始对象 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型
getKeyframeTexts() – 返回所有keyframe文本集合, e.g. [‘0%’, ‘50%’, ‘100%’]
getKeyframe(text) – 返回指定文字的 KeyframeRule 对象, e.g. getKeyframe(‘0%’)
setKeyframe(text, css) – 设置新的CSS, e.g.setKeyframe(‘10%’, {background: ‘red’, ‘font-size’: ‘2em’})
可以看出，KeyframeRule提供了一些方法和函数，是对 WebKitCSSKeyframeRule 和MozCSSKeyframeRule （注意是frame不是frames）的封装，具有下面的属性和方法
css – 该keyframe的css内容, e.g. {background: ‘red’, ‘font-size’: ‘2em’}
keyText – 该帧的名称, e.g. 10%
original – 原始对象 WebKitCSSKeyframeRule 或者MozCSSKeyframeRule
示例
获取动画中的所有帧
var spin = CSSAnimations.spin;
for(var i=0; ispin.keyframes.length; i++)
console.log(spin.keyframes[i].css);
修改动画中的某一帧
var spin = CSSAnimations.spin;
spin.setKeyframe(‘10%’, {background: ‘red’, ‘font-size’: ‘2em’});
反馈
给我博客或者GitHub留言，让我知道你的想法，我还开放了修改和增加的权限
使用原生JavaScript访问和创建CSS动画
如果你不想使用CSS Animation Store，或者只是想知道它的实现原理，可以参看下面的介绍
访问CSS动画
可以通过CSSOM访问keyframe动画，下面是我CSSA中的代码，用于访问指定的CSS动画
JS 怎么动态设置CSS3动画的样式
引入jquery
然后给你要设置动画的对象增加或者删除css3动画的类就可以了。
如我这里用colorchange这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了
!DOCTYPE html
html
head lang=”en”
meta charset=”UTF-8″
titleTest/title
style type=”text/css”
body{
padding: 20px;
background-color:#FFF;
}
.colorchange
{
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
#main{
width:100px;
height:100px;
background:red;
}
#cgbt{
width: 100px;
margin: 20px 0 0 0;
text-align: center;
cursor: pointer;
}
#cgbt:hover{
background-color: #2D93CA;
}
/style
/head
body
div id=”main”
我会变么？
/div
div id=”cgbt”
点我让上面的变颜色
/div
script src=”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触发css3动画
你用CSS3的方式预先写好动画样式，不调用这个class,前端中设置鼠标经过增加一个class，这样鼠标指向的时候就有CSS3的动画，鼠标离开去除样式动画结束
如何用JS和CSS3制作炫酷的弹窗效果
首先回忆一下弹窗的实现，一般我们分为两层，弹出窗口层（popus）和遮罩层（mask）,通常情况下我习惯就这两元素全部设成fixed定位，具体和absolute区别一试便知。对于mask层自不用多少，我们如下给他设置属性,让他铺满整个屏幕。
.mask{position:fixed;top:0px;bottom:0px;left:0px;right:0px;background-color:#000;opacity:0.6;filter:alpha(opacity=60)}
popus层则要稍微麻烦点儿，这里我们有两种实现方法
1.已知大小的弹窗，如下，主要通过top,left与负的margin来实现。
.popus{width:300px;height:200px;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-100px;background-color:#000}
2.未知弹窗大小，则通过js获取弹窗层的width与height，然后在进行如上设置，在此不多述。
3.在支持css3的情况下，我们不需要知道弹窗的宽高，便可进行如下设置
.popus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}
主要通过translate属性来设置，偏移的值百分比是相对于本身的宽高，因此从原理上来说跟第一种写法有异曲同工之妙，不过使用却更方便。
言归正传，下面我们回归到正题，即让元素实现ps中高斯模糊的效果。
这里引出一个css属性：filter，注意这里的filter并不是ie中的filter，filter有很多值，感兴趣的可以点击这里，作者讲的非常详细。我们今天只讲其中的一个blur，首先看下面的预览图
ps:目前来说该属性只支持webkit浏览器，所以我们直接使用了css3属性，效果也需要在webkit浏览器中查看
是不是很神奇，其中起作用的代码就这一行 -webkit-filter:blur(8px) ，后面的像素值即代表模糊程度，当然在日常项目中，我们还可以加一些动画，使页面更加的生动，本案例完整代码如下：
div class=’bg’
img src=’bg.jpg’ /
/div
div class=’popus’
效果是不是要好过纯色加透明呢
div
div class=’left btn ‘确实不错/div
div class=’right btn’也就那样/div
/div
/div
css：
*{padding:0px;margin:0px}
img{width:100%;margin:0px auto;display:block}
.bg.blur{-webkit-filter:blur(8px)}
.popus{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:”微软雅黑”;padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,0.6);border-radius:18px;text-align:center;padding:30px 0px;box-shadow:0px 0px 10px rgba(0,0,0,0.4);display:none}
.popus div{width:220px;margin:10px auto}
.popus div.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus div.btn.right{float:right;color:#666}
js：
$(‘.bg’).on(‘click’,function(){
console.log(98)
$(this).addClass(‘blur’);
$(‘.popus’).show();
})
$(‘.btn’).on(‘click’,function(){
$(‘.bg’).removeClass(‘blur’);
$(‘.popus’).hide();
})
这样是不是就完了？很明显不是，看控制台
当我们弹出窗口外，肯定要禁止掉我们其他层的点击事件，但是我们发现目前我们虽然将其他层模糊化了，但是并没有禁止掉相应的事件，当然解决办法也很简单，我们可以加一层没有背景颜色的遮罩层，覆盖在页面上，这样我们每次点击作用在遮罩层上，自然不会触发底层的事件了。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/186509.html
微信扫一扫 
支付宝扫一扫 