您的位置:易学堂>代码教程>CSS图片抖动和JS点击特效

CSS图片抖动和JS点击特效

正文

CSS图片抖动效果代码,放在网站主要CSS文件中即可 如:style.css,之前emlog博客中常添加这个效果

img:hover {
-webkit-animation:sucaijiayuan 1s .1s ease both;
-moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes sucaijiayuan {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.8) rotate(-2deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(2deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-2deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}

JS鼠标点击特效代码,如:富强、民主···,可自定义内容,可直接加在footer中

<script type="text/javascript">
        var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
});
</script>

结语

以上代码也可以直接加在</body>之前,都是一些简单 又有趣的代码,值得分享!

转载请注明本文标题和链接:《CSS图片抖动和JS点击特效

相关推荐

网友评论抢沙发

路人甲 表情
Ctrl+Enter快速提交