网站特效鼠标停留的图片抖动 效果代码-网站教程
前言
给那些打算给自己网站增加色彩的网站一个不错的功能,这段CSS+html代码可以让鼠标移动到图片上产生抖动特效
效果
![图片[1]-子比主题美化合集-小钙论坛-网盘资源分享](https://xiaogay.cn/wp-content/uploads/2023/01/55b84f21afef.png)
教程:
- 每当你添加一张图片打算使他抖动时,将该代码添加到自定义html里即可
注: 自定义html属于 古腾堡的一个区块,如果不使用古腾堡,使用经典编辑器直接在代码添加即可。
<link rel="stylesheet" type="text/css" href="https://www.wpon.cn/cssjc/doudong2.css">
<img class="wpon" src="https://www.atbkw.cn/wp-content/uploads/2021/12/aa6029c2e4e3.png" />
- 如果怕上面css文件失效,把上面的替换成你的CSS就行了
- CSS代码
/*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)}
}
网站添加樱花飘落特效 js代码-网站教程
网站添加梅花飘落特效 js代码-网站教程
效果:
![图片[3]-子比主题美化合集-小钙论坛-网盘资源分享](https://xiaogay.cn/wp-content/uploads/2023/01/87efc934ac1e-1024x301.gif)
使用教程:
按照自己的网站放置
<script src='https://api.vvhan.com/api/meihua'></script>
网站底部导航代码 -网站教程
使用教程:
根据自己的网站放置代码
代码如下:
<style type="text/css"> * {margin:0px; padiing:0px;} .login_alert{position:fixed;bottom:0px;left:0px;width:100%;z-index:9999;} .login_alert_close{position:absolute;top:-10px;right:0px;z-index:1;cursor:pointer;} .login_alert_box{width:100%;text-align:center; background-color:rgba(61, 61, 61, 0.6); height:60px;} .login_alert_box div{cursor:default; font-family:'微软雅黑'; color:#66CCFF; font-size:26px; font-weight:bold; line-height:80px;} .login_alert_box div a{text-decoration:none;display:inline-block;padding:5px 20px; font-size:20px; color:#000; background-color:#00CC99; border- radius:4px; line-height:26px;} .login_alert_box div span{font-size:18px;} .login_alert{animation:show_alert_left 1.6s;-webkit-animation:show_alert_left 1.6s;-moz-animation:show_alert_left 1.6s;} .login_alert_box{background-color:rgba(0,0,0,0.6);height:60px;} .login_alert_box:hover{background-color:rgba(0,0,0,0.8);} .login_alert_box div{color:#66CCFF;font-size:26px;line-height:60px;} .login_alert_box div a{font-size:20px;line-height:26px;border-radius:4px;} @keyframes show_alert_left{ from{left:-100%;} to{left:0px;} } @-webkit-keyframes show_alert_left{ from{left:-100%;} to{left:0px;} } @-moz-keyframes show_alert_left{ from{left:-100%;} to{left:0px;} } </style> </head> <body style="height:1000px;"> <div class="login_alert" id="login_alert" > <div class="login_alert_close" onClick="closeAlert()"> <a href="/"></a></div> <div class="login_alert_box"> <div> <a style="color: #000000;background-color:#ADFF2F;" <a href="填写链接"rel="nofollow">小钙网</a> <span></span> <a style="color: #000000;background-color:#ADFF2F;" <a href="http://wpa.qq.com/msgrd?v=3&uin=329033053&site=qq&menu=yes"rel="nofollow">联系客服</a> <span></span> </div> </div>
网站挂上春节灯笼 的代码-网站教程
前言
中国灯笼又统称为灯彩,是一种古老的汉族传统工艺品。起源于2100多年前的西汉时期,每年的农历正月十五元宵节前后,人们都挂起象征团圆意义的红灯笼,来营造一种喜庆的氛围。我们给网站也挂上春节灯笼的代码。
效果
![图片[4]-子比主题美化合集-小钙论坛-网盘资源分享](https://xiaogay.cn/wp-content/uploads/2023/01/86e3c537f89d.gif)
教程
使用教程:
放在网站头部<body>下面就好了
代码如下:
<!--春节代码-->
<div class="meiha"></div>
<style>
/** 梅花树 **/
.meiha {
position: fixed;
top: 0;
right: 0;
z-index: 999;
width: 350px;/** PNG图宽度 **/
height: 231px;/** PNG图高度 **/
pointer-events: none;
background: url('https://s2.ax1x.com/2020/01/21/1kBpid.png');
}
</style>
<!-- 灯笼1 -->
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">节</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<!-- 灯笼2 -->
<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">春</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<style>
.deng-box {
position: fixed;
top: -40px;
right: -20px;
z-index: 9999;
pointer-events: none;
}
.deng-box1 {
position: fixed;
top: -30px;
right: 10px;
z-index: 9999;
pointer-events: none;
}
.deng-box1 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 10px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-b {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -2px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}
.shui-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.deng:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
font-size: 3.2rem;
color: #dc8f03;
font-weight: bold;
line-height: 85px;
text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
background: transparent !important;
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg)
}
50% {
-moz-transform: rotate(10deg)
}
100% {
-moz-transform: rotate(-10deg)
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg)
}
50% {
-webkit-transform: rotate(10deg)
}
100% {
-webkit-transform: rotate(-10deg)
}
}
</style>
网站流光渐变文字公告 美化代码-网站教程
效果

教程
网站教程:根据自己的网站放置代码
代码如下:
<img width="100%" alt="彩色滚动条" src="http://tva2.sinaimg.com/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif" />
<style> #nr{ font-size:20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%,
#ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%,
#00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear; } @keyframes
masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100%, 0; } } </style> <div style="background-color:#333;border-radius: 25px;box-shadow:
0px 0px 5px #f200ff;padding:5px;margin-top: 10px;margin-bottom:0px;"> <marquee> <b id="nr">公告:这个是一条公告</b> </marquee> </div>
网站鼠标点击爆炸特效 代码-网站教程
效果
![图片[5]-子比主题美化合集-小钙论坛-网盘资源分享](https://xiaogay.cn/wp-content/uploads/2023/01/700b0524d26e.gif)
教程
<script type="text/javascript" src="https://haremu.com/wp-content/themes/Siren/OwO/meme.js"></script>
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="https://cdn.boo
tcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="https://haremu.com/wp-content/themes/Siren/js/fireworks.js"></script>
实现网站全局变灰 代码-网站教程
前言
网站全体变灰主要在用于全国悼念日
效果
![图片[6]-子比主题美化合集-小钙论坛-网盘资源分享](https://xiaogay.cn/wp-content/uploads/2023/01/d44cdf2083d3-1024x431.png)
教程
代码
有两种代码可以实现
第一种
/*网站整体灰白*/
body {
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
}
第二种
html{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
教程
放在你主题的CSS代码里面就可以了
© 版权声明
THE END
喜欢就支持一下吧
相关推荐
评论 抢沙发

欢迎您留下宝贵的见解!
暂无评论内容