اجرای یک افکت css هنگام کلیک روی دکمه

CSS

توسط microsoftman در 6 سال پیش
0 861 2 6 سال پیش
microsoftmanreza-irdev
0

سلام دوستان عزیز سوالم از عنوان موضوع مشخصه میخوام وقتی روی دکمه یا تصویری کلیک میکنم یه افکت css اجرا بشه این کار امکان پذیر هست؟

0

سلام بفرما عزیز البته این کد css روی کروم کار میکنه فقط برای مثال گذاشتم که نحوه استفاده رو بدونید خودتون میتونید تغییرش بدید

<!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(0px);
}
to {
-webkit-transform: rotate(3240deg) scale(5) skew(0deg) translate(0px);
}
}
</style>
  <script type="text/javascript">
        function ani(){
            document.getElementById('img').className ='classname';
        }
  </script>
<title>Untitled Document</title>
</head>

<body>
<p>&nbsp;</p>
<p>
  <input name="" value="Run Effect" type="button" onclick="ani()" /> 
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center"><img id="img" src="http://www.softafzar.net/customavatars/avatar119_1.gif" width="70" height="70" /></p>
</body>
</html>
0

خیلی ممنونم دقیقا همینو میخواستم :44:

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید