CSS动画onClick

小编典典

CSS动画onClick

css

如何获得CSS动画和JavaScript onClick一起玩？我目前有：

.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration:3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  }
  to {
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}

如何申请onClick？

阅读 330

2020-05-16

共1个答案

小编典典

您确定只在Webkit上显示页面吗？这是通过野生动物园传递的代码。(id='img')单击按钮后图像将旋转。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration:3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  }
  to {
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}
</style>
<script type="text/javascript">
  function ani(){
    document.getElementById('img').className ='classname';
  }
</script>
<title>Untitled Document</title>
</head>

<body>
<input name="" type="button" onclick="ani()" />
<img id="img" src="clogo.png" width="328" height="328" />
</body>
</html>

2020-05-16