js+css实现文字菜单悬浮blob点跟随效果代码
代码语言:html
所属分类:菜单导航
代码描述:js+css实现文字菜单悬浮blob点跟随效果代码
代码标签: js css 文字 菜单 悬浮 blob 点 跟随
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:900");
body {
overflow: hidden;
margin: 0;
}
* {
box-sizing: border-box;
}
#cursorBlob {
width: 50px;
height: 50px;
background: linear-gradient(120deg, #FF1744, #E040FB, #2979FF, #00E5FF, #76FF03);
background-size: 1600% 1600%;
position: absolute;
mix-blend-mode: difference;
pointer-events: none;
z-index: 1;
transition: 0.3s linear;
animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;
}
@keyframes blobRadius {
0%, 100% {
border-radius: 43% 77% 80% 40%/40% 40% 80% 80%;
}
20% {
border-radius: 47% 73% 61% 59%/47% 75% 45% 73%;
}
40% {
border-radius: 46% 74% 74% 46%/74% 58% 62% 46%;
}
60% {
border-radius: 47% 73% 61% 59%/40% 40% 80% 80%;
}
80% {
border-radius: 50% 70% 52% 68%/51% 61% 5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0