技术教程-共计288篇
苏谪仙
鼠标停留图片抖动效果代码[WP教程]
首页>>技术教程>>正文
本篇文章更新于 2022-03-22 23:53:16
本篇文章更新于 2022-03-22

文章前言/本文介绍

这个是在一个大佬博客里面看到的 然后觉得效果还是不错就分享出来了 因为我不知道大佬们的站访问量高不高 所以这里就不给大家引用我网站的CSS了 需要你们自己在网站目录创建css文件代码丢进去 代码我已经以文件的格式打包在下面可以直接点击下载 然后替换代码文件里的对应css文件网址即可！

文章解说/文章教程

这个其实非常简单 因为我们的主题都会有自定义HTML区块 直接把代码放进去即可。

<link rel="stylesheet" type="text/css" href="CSS地址 请使用https或者http开头">
<img class="wpon" src="https://s3.bmp.ovh/imgs/2022/02/446a6cce4ff22d94.png" />

网站截图/效果截图

鼠标停留图片抖动效果代码[WP教程]

代码

/*WordPress图片抖动*/
.wpon:hover {
    -webkit-animation-name: wpon-slow;
    -ms-animation-name: wpon-slow;
    animation-name: wpon-slow;
    -webkit-animation-duration: 5s;
    -ms-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running text-align:center
    }
     
    @-webkit-keyframes wpon-slow {
    0%{-webkit-transform:translate(0,0) rotate(0)}
    2%{-webkit-transform:translate(-1px,3px) rotate(1.5deg)}
    4%{-webkit-transform:translate(2.3px,0) rotate(-.5deg)}
    6%{-webkit-transform:translate(3px,3px) rotate(-3.5deg)}
    8%{-webkit-transform:translate(-2.3px,-2px) rotate(-1.5deg)}
    10%{-webkit-transform:translate(3px,0) rotate(-2.5deg)}
    12%{-webkit-transform:translate(-2.3px,-2px) rotate(-3.5deg)}
    14%{-webkit-transform:translate(3px,2.3px) rotate(2.5deg)}
    16%{-webkit-transform:translate(3px,-3px) rotate(-1.5deg)}
    18%{-webkit-transform:translate(2.3px,-2.3px) rotate(-3.5deg)}
    20%{-webkit-transform:translate(2px,1px) rotate(-.5deg)}
    22%{-webkit-transform:translate(2.3px,3px) rotate(-2.5deg)}
    24%{-webkit-transform:translate(-3px,-1px) rotate(2.5deg)}
    26%{-webkit-transform:translate(2.3px,-2.3px) rotate(.5deg)}
    28%{-webkit-transform:translate(2.3px,-2.3px) rotate(-3.5deg)}
    30%{-webkit-transform:translate(-1.3px,-2.3px) rotate(-1.5deg)}
    32%{-webkit-transform:translate(-1px,0) rotate(2.5deg)}
    34%{-webkit-transform:translate(2.3px,1.3px) rotate(-.5deg)}
    36%{-webkit-transform:translate(1.3px,2.3px) rotate(1.5deg)}
    38%{-webkit-transform:translate(1.3px,-2.3px) rotate(1.5deg)}
    40%{-webkit-transform:translate(-3px,-1px) rotate(-.5deg)}
    42%{-webkit-transform:translate(-3px,1.3px) rotate(-.5deg)}
    44%{-webkit-transform:translate(-2.3px,2px) rotate(.5deg)}
    46%{-webkit-transform:translate(-2.3px,-1.3px) rotate(-.5deg)}
    48%{-webkit-transform:translate(1px,2.3px) rotate(1.5deg)}
    50%{-webkit-transform:translate(2.3px,2.3px) rotate(1.5deg)}
    52%{-webkit-transform:translate(-3px,2.3px) rotate(.5deg)}
    54%{-webkit-transform:translate(2.3px,-3px) rotate(-2.5deg)}
    56%{-webkit-transform:translate(1.3px,-2.3px) rotate(-2.5deg)}
    58%{-webkit-transform:translate(-1.3px,-2.3px) rotate(.5deg)}
    60%{-webkit-transform:translate(1.3px,2.3px) rotate(-.5deg)}
    62%{-webkit-transform:translate(0,0) rotate(-1.5deg)}
    64%{-webkit-transform:translate(-2.3px,-2.3px) rotate(-3.5deg)}
    66%{-webkit-transform:translate(2.3px,-2.3px) rotate(.5deg)}
    68%{-webkit-transform:translate(0,-2.3px) rotate(-2.5deg)}
    70%{-webkit-transform:translate(-2.3px,1px) rotate(1.5deg)}
    72%{-webkit-transform:translate(-2.3px,2.3px) rotate(2.5deg)}
    74%{-webkit-transform:translate(1.3px,-2.3px) rotate(-.5deg)}
    76%{-webkit-transform:translate(3px,1px) rotate(-.5deg)}
    78%{-webkit-transform:translate(-1px,3px) rotate(2.5deg)}
    80%{-webkit-transform:translate(2px,2.3px) rotate(2.5deg)}
    82%{-webkit-transform:translate(-2.3px,-2.3px) rotate(-.5deg)}
    84%{-webkit-transform:translate(-3px,3px) rotate(-2.5deg)}
    86%{-webkit-transform:translate(3px,2px) rotate(-2.5deg)}
    88%{-webkit-transform:translate(-3px,2px) rotate(-1.5deg)}
    90%{-webkit-transform:translate(-2.3px,-2.3px) rotate(-3.5deg)}
    92%{-webkit-transform:translate(-3px,2.3px) rotate(2.5deg)}
    94%{-webkit-transform:translate(-2.3px,-2.3px) rotate(-3.5deg)}
    96%{-webkit-transform:translate(-2px,1.3px) rotate(-3.5deg)}
    98%{-webkit-transform:translate(1.3px,1px) rotate(-.5deg)}
    }
    
    @-ms-keyframes wpon-slow{
    0%{-ms-transform:translate(0,0) rotate(0)}
    2%{-ms-transform:translate(-2.3px,1px) rotate(-1.5deg)}
    4%{-ms-transform:translate(-2.3px,-1px) rotate(-3.5deg)}
    6%{-ms-transform:translate(2.3px,1.3px) rotate(-1.5deg)}
    8%{-ms-transform:translate(-2px,-2.3px) rotate(-1.5deg)}
    10%{-ms-transform:translate(-2.3px,-2px) rotate(-.5deg)}
    12%{-ms-transform:translate(-3px,2.3px) rotate(-2.5deg)}
    14%{-ms-transform:translate(2.3px,3px) rotate(-1.5deg)}
    16%{-ms-transform:translate(1.3px,1.3px) rotate(1.5deg)}
    18%{-ms-transform:translate(3px,-1.3px) rotate(-3.5deg)}
    20%{-ms-transform:translate(-2.3px,2px) rotate(-3.5deg)}
    22%{-ms-transform:translate(3px,-2.3px) rotate(-1.5deg)}
    24%{-ms-transform:translate(-1px,-2.3px) rotate(2.5deg)}
    26%{-ms-transform:translate(2.3px,2.3px) rotate(-.5deg)}
    28%{-ms-transform:translate(2.3px,-2.3px) rotate(-3.5deg)}
    30%{-ms-transform:translate(2.3px,-2.3px) rotate(-.5deg)}
    32%{-ms-transform:translate(2.3px,1.3px) rotate(1.5deg)}
    34%{-ms-transform:translate(2px,-2.3px) rotate(2.5deg)}
    36%{-ms-transform:translate(-2.3px,-2.3px) rotate(2.5deg)}
    38%{-ms-transform:translate(-3px,-2.3px) rotate(.5deg)}
    40%{-ms-transform:translate(2.3px,2.3px) rotate(-2.5deg)}
    42%{-ms-transform:translate(3px,-3px) rotate(.5deg)}
    44%{-ms-transform:translate(3px,3px) rotate(-3.5deg)}
    46%{-ms-transform:translate(-1.3px,2.3px) rotate(1.5deg)}
    48%{-ms-transform:translate(-2.3px,-3px) rotate(-2.5deg)}
    50%{-ms-transform:translate(3px,-1px) rotate(-3.5deg)}
    52%{-ms-transform:translate(-3px,-2.3px) rotate(2.5deg)}
    54%{-ms-transform:translate(2.3px,0) rotate(2.5deg)}
    56%{-ms-transform:translate(-3px,-1px) rotate(-.5deg)}
    58%{-ms-transform:translate(0,-2.3px) rotate(-3.5deg)}
    60%{-ms-transform:translate(-2.3px,1.3px) rotate(2.5deg)}
    62%{-ms-transform:translate(2.3px,3px) rotate(.5deg)}
    64%{-ms-transform:translate(-2.3px,-2.3px) rotate(-1.5deg)}
    66%{-ms-transform:translate(-1px,-2.3px) rotate(-.5deg)}
    68%{-ms-transform:translate(-2.3px,-2.3px) rotate(-2.5deg)}
    70%{-ms-transform:translate(-2.3px,-3px) rotate(-1.5deg)}
    72%{-ms-transform:translate(-1.3px,-2px) rotate(-2.5deg)}
    74%{-ms-transform:translate(-3px,1px) rotate(-.5deg)}
    76%{-ms-transform:translate(-2.3px,2.3px) rotate(2.5deg)}
    78%{-ms-transform:translate(2.3px,1.3px) rotate(-3.5deg)}
    80%{-ms-transform:translate(-2.3px,-2.3px) rotate(-.5deg)}
    82%{-ms-transform:translate(1.3px,-2.3px) rotate(1.5deg)}
    84%{-ms-transform:translate(2px,3px) rotate(1.5deg)}
    86%{-ms-transform:translate(3px,1.3px) rotate(2.5deg)}
    88%{-ms-transform:translate(-3px,-1px) rotate(-1.5deg)}
    90%{-ms-transform:translate(-1px,-2.3px) rotate(1.5deg)}
    92%{-ms-transform:translate(3px,-2.3px) rotate(-3.5deg)}
    94%{-ms-transform:translate(2.3px,-2.3px) rotate(-2.5deg)}
    96%{-ms-transform:translate(2.3px,-3px) rotate(2.5deg)}
    98%{-ms-transform:translate(3px,0) rotate(-3.5deg)}
    }
    
    @keyframes wpon-slow{
    0%{transform:translate(0,0) rotate(0)}
    2%{transform:translate(-2.3px,-3px) rotate(2.5deg)}
    4%{transform:translate(2px,-2.3px) rotate(-.5deg)}
    6%{transform:translate(2px,-3px) rotate(2.5deg)}
    8%{transform:translate(0,3px) rotate(.5deg)}
    10%{transform:translate(2px,1.3px) rotate(.5deg)}
    12%{transform:translate(3px,0) rotate(.5deg)}
    14%{transform:translate(2.3px,2.3px) rotate(-3.5deg)}
    16%{transform:translate(-2.3px,0) rotate(-.5deg)}
    18%{transform:translate(1px,2px) rotate(-1.5deg)}
    20%{transform:translate(-3px,-1px) rotate(-3.5deg)}
    22%{transform:translate(3px,2.3px) rotate(2.5deg)}
    24%{transform:translate(-2.3px,-2.3px) rotate(-2.5deg)}
    26%{transform:translate(0,2.3px) rotate(-1.5deg)}
    28%{transform:translate(-2.3px,2.3px) rotate(2.5deg)}
    30%{transform:translate(3px,-2.3px) rotate(-1.5deg)}
    32%{transform:translate(0,-3px) rotate(-.5deg)}
    34%{transform:translate(2.3px,2.3px) rotate(-.5deg)}
    36%{transform:translate(-2.3px,2.3px) rotate(.5deg)}
    38%{transform:translate(3px,-2.3px) rotate(-.5deg)}
    40%{transform:translate(3px,0) rotate(.5deg)}
    42%{transform:translate(0,-1.3px) rotate(1.5deg)}
    44%{transform:translate(3px,-1.3px) rotate(-.5deg)}
    46%{transform:translate(1px,-2.3px) rotate(-2.5deg)}
    48%{transform:translate(2.3px,-1px) rotate(2.5deg)}
    50%{transform:translate(-3px,-2.3px) rotate(2.5deg)}
    52%{transform:translate(2px,1.3px) rotate(-3.5deg)}
    54%{transform:translate(1px,-2.3px) rotate(-.5deg)}
    56%{transform:translate(-2px,-2.3px) rotate(-.5deg)}
    58%{transform:translate(-2.3px,-2.3px) rotate(2.5deg)}
    60%{transform:translate(3px,2.3px) rotate(-3.5deg)}
    62%{transform:translate(2.3px,-2.3px) rotate(-3.5deg)}
    64%{transform:translate(-3px,3px) rotate(-.5deg)}
    66%{transform:translate(1px,-2px) rotate(.5deg)}
    68%{transform:translate(-2.3px,2.3px) rotate(1.5deg)}
    70%{transform:translate(-3px,3px) rotate(-1.5deg)}
    72%{transform:translate(-2.3px,-1.3px) rotate(2.5deg)}
    74%{transform:translate(0,-2.3px) rotate(1.5deg)}
    76%{transform:translate(-1.3px,-3px) rotate(.5deg)}
    78%{transform:translate(-1.3px,2.3px) rotate(-3.5deg)}
    80%{transform:translate(2.3px,2.3px) rotate(-3.5deg)}
    82%{transform:translate(-1px,-2.3px) rotate(-1.5deg)}
    84%{transform:translate(2px,-2.3px) rotate(.5deg)}
    86%{transform:translate(2.3px,-3px) rotate(-1.5deg)}
    88%{transform:translate(2.3px,-2.3px) rotate(1.5deg)}
    90%{transform:translate(1px,-2.3px) rotate(2.5deg)}
    92%{transform:translate(-3px,-1px) rotate(-1.5deg)}
    94%{transform:translate(-2.3px,-1px) rotate(.5deg)}
    96%{transform:translate(-2.3px,2.3px) rotate(1.5deg)}
    98%{transform:translate(2.3px,2.3px) rotate(-.5deg)}
    }

No related posts.

历史上的今天
02月
21
技术教程

如何将网站的404页面设置为公益页面？[404公益]

2022-2-21 10:59:53

技术教程

Android 和 IOS 平台签名证书生成指南

2022-2-26 19:56:13

重要说明

本站资源大多来自网络，如有侵犯你的权益请联系管理员或给邮箱发送邮件zhouqiuqiu123@foxmail.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

如果遇到评论可下载的文章，评论后刷新页面点击“对应的蓝字按钮”即可跳转到下载页面！本站资源少部分采用7z压缩，为防止有人压缩软件不支持7z格式，7z解压，建议下载7-zip（点击下载），zip、rar解压，建议下载WinRAR（点击下载）。

敏而好学，不耻下问。——孔子