您现在的位置是：主页 > 网站建设 > 代码漏洞修复 > 代码漏洞修复
js代码实现波浪点击按键特效
网络
2021-02-22
【代码漏洞修复】
人已围观
简介 在代码漏洞修复栏目，旭说分享一些js代码，利用原生js实现波浪点击效果，没有用到任何插件，直接插入到页面当中就行了，可以随意改变按钮位置。同时也可以根据自身需求改变波浪颜色和
在代码漏洞修复栏目，旭说分享一些js代码，利用原生js实现波浪点击效果，没有用到任何插件，直接插入到页面当中就行了，可以随意改变按钮位置。同时也可以根据自身需求改变波浪颜色和图形。
使用方法
在页面引入相关CSS样式
* {
padding: 0;
margin: 0 auto;
}
body,
html {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
body {
background: #f0f0f0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
main {
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
letter-spacing: 0.2em;
font-size: 30px;
cursor: pointer;
position: relative;
overflow: hidden;
background: white;
color: rgb(143, 141, 141);
}
main div {
border-radius: 50%;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.342);
position: absolute;
animation: bian 0.5s linear both 1;
} @keyframes bian {
0% {
opacity: 1;
transform: scale(1)
}
100% {
opacity: 0;
transform: scale(8)
}
}
|
JS代码：
//阻止鼠标右键的点击
document.oncontextmenu = new Function("event.returnValue=false");
document.onselectstart = new Function("event.returnValue=false");
document.onkeydown = function (e) {
console.log(e.keyCode)
if (e.keyCode == 83 || e.keyCode == 123) {
e.preventDefault();
}
}
document.oncontextmenu = function (evt) {
evt.preventDefault();
}
document.onselectstart = function (evt) {
evt.preventDefault();
};
|
关键词：js代码(13)
- 上一篇：JS代码可拖拽排列网格图片布局特效
- 下一篇：js代码实现瀑布流效果特效插件
{dede表结束 -->
{dede:pagelist listsize='5为5条一页 -->
