61,116
社区成员
发帖
与我相关
我的任务
分享如何用js设置@keyframe的动态参数
正常@keyfram的使用
.class{
animation-name:person-slow;
animation-duration:5s ;
animation-iteration-count:infinite ;
animation-timing-function: linear;
}
@keyframes person-slow{
0%{width:10px;}
25%{width: 20px;}
50%{width: 30px;}
75%{width: 40px;}
100%{width:10px;}
}
意思是让class这个容器宽度在5s内的变化
但每一次的变化宽度都已经写死了，这样兼容性不是和好，在不同大小窗口打开，样式很难看，我想让宽度可窗口成比例，是动态参数（例如将@keyframes person-slow中的参数一次设置为widthX*0.1，widthX*0.2，widthX*0.3，widthX*0.4,widthX*0.1），这样参数的值就不是固定的了，可以随着容器宽度（widthX）进行放缩，应该如何实现？？？
再次谢谢各位热爱前段、热爱动漫的大牛了！
.class{
animation-name:person-slow;
animation-duration:5s ;
animation-iteration-count:infinite ;
animation-timing-function: linear;
}
@keyframes person-slow{
0%{width:10px;}
25%{width: 20px;}
50%{width: 30px;}
75%{width: 40px;}
100%{width:10px;}
}
意思是让class这个容器宽度在5s内的变化
但每一次的变化宽度都已经写死了，这样兼容性不是和好，在不同大小窗口打开，样式很难看，我想让宽度可窗口成比例，是动态参数（例如将@keyframes person-slow中的参数一次设置为widthX*0.1，widthX*0.2，widthX*0.3，widthX*0.4,widthX*0.1），这样参数的值就不是固定的了，可以随着容器宽度（widthX）进行放缩，应该如何实现？？？
再次谢谢各位热爱前段、热爱动漫的大牛了！
...全文
请发表友善的回复…
发表回复
eric_uugames 2016-02-02
- 打赏
- 举报
首先，获得CSSRule
var cssRule;
// Returns a reference to the specified CSS rule(s).
function getRule() {
var rule;
var ss = document.styleSheets;
for (var i = 0; i < ss.length; ++i) {
// loop through all the rules!
for (var x = 0; x < ss[i].cssRules.length; ++x) {
rule = ss[i].cssRules[x];
if (rule.name == "enterPiece" && rule.type == CSSRule.KEYFRAMES_RULE) {
cssRule = rule;
}
}
}
}
然后就简单了, 大致如下这些东东.
cssRule.deleteRule("0");
cssRule.deleteRule("1");
cssRule.appendRule("0% { transform: translateY(-150px) " + scale +"; opacity: 0; }");
cssRule.appendRule("100% { transform: translateY(0px) " + scale + "; opacity: 1; }");
KK3K2005 2016-01-29
- 打赏
- 举报
改成百分比设置
这样你可以吧需求改成用js设置外部容器的宽度
KK3K2005 2016-01-29
- 打赏
- 举报
另外你搜索下 cssRules
