开发工具与关键技术：DW和css
作者：陈锦通
撰写时间：2019年2月21日星期四
我用css写的动画是可以暂停和播放的要怎么去使用它呢，请看下图的代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
@keyframes zhuang {
0%{
background: #626262;
}
10%{
background: #232323;
}
20%{
background: #6F2C2D;
}
30%{
background:#229753;
}
40%{
background: #1B8287;
}
50%{
background: #532AAA;
}
60%{
background: #A61719;
}
70%{
background: #8B0406;
}
80%{
background: #973537;
}
90%{
background: #5B090A;
}
100%{
background: #228330;
}
}
.div1{
width: 100px;
height: 100px;
animation: zhuang 15s infinite paused;
transition: 4s;
}
.div1:hover{
animation: zhuang 15s infinite;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
图中的第一个animation里面的paused是指动画暂停，我在伪类中把paused给去除调了。
下面是效果：
当把鼠标放上去的时候
把鼠标移开的时候样式不变。再把鼠标移上去的时候会接着上次变化执行下去。
8612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
