css+svg实现鼠标悬浮放电闪电按钮效果代码
代码语言：html
所属分类：悬停
代码描述：css+svg实现鼠标悬浮放电闪电按钮效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: rgb(5, 27, 37);
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.buttonHolder{
position: relative;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.electric{
padding: 20px 50px;
border-radius: 100px;
cursor: pointer;
background-color: rgba(106, 123, 252, 0.13);
border: 2px solid rgb(125, 140, 255);
color: white;
position: relative;
filter: blur(0px);
}
#electric2{
position: absolute;
top: 0;
left: 0;
filter: blur(1px);
background-color: rgba(106, 123, 252, 0.414);
border: 2px solid rgb(125, 140, 255);
color: rgb(182, 191, 255);
/* display: none; */
z-index: -1;
}
svg{
position: absolute;
}
.yellow{
width: 110%;
offset-path: 20%;
stroke-dasharray: 300;
stroke-dashoffset: 1000;
animation: dash 1s linear;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
.blue{
width: 110%;
offset-path: 20%;
stroke-dasharray: 400;
stroke-dashoffset: 1000;
animation: dash 1.2s linear;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
#y1{
top: -115%;
left: -5%;
filter: blur(.5px);
}
#y2{
width: 120%;
left: -10%;
top: -155%;
filter: brightness(1);
}
#b1{
left: -5%;
top: -125%;
/* filter: blur(.5px) */
}
#b2{
left: -10%;
top: -165%;
width: 120%
/* filter: blur(.5px) */
}
@keyframes dot1 {
from{
bottom: 0%;
left: 10%;
opacity: 1;
}
to{
bottom: -30%;
left: 0%;
opacity: 0;
}
}
@keyframes dot2 {
from{
top: 0%;
left: 30%;
opacity: 1;
}
to{
top: -30%;
left: 40%;
opacity: 0;
}
}
@keyframes dot3 {
from{
top: 0%;
left: 80%;
opacity: 1;
}
to{
top: -30%;
left: 80%;
opacity: 0;
}
}
@keyframes dot4 {
from{
bottom: 20%;
left: 100%;
opacity: 1;
}
to{
bottom: 30%;
left: 120%;
opacity: 0;
}
}
.part{
content: ' ';
width: 3px;
height: 3px;
border-radius: 5px;
background-color: rgb(183, 226, 255);
z-index: 2;
position: absolute;
filter: blur(1px);
display: none;
}
#part1{
animation: dot1;
transform-origin: center;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-iteration-count: infinite;
}
#part2{
animation: dot2;
transform-origin: center;
animation-duration: 1.6s;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-iteration-count: infinite;
}
#part3{
animation: dot3;
transform-origin: center;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-iteration-count: infinite;
}
#part4{
animation: dot4;
transform-origin: center;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-iteration-count: infinite;
}
.buttonHolder{
width: max-content;
max-height: 20px;
}
.hide{
opacity: 0;
}
.buttonHolder:hover .hide{
opacity: 1;
}
.buttonHolder:hover .part{
display: flex;
}
</style>
</head>
<body>
<div class="buttonHolder">
<button class="electric" id="electric">
<span class="part hide" id="part1"></span>
<span class="part hide" id="part2"></span>
<span class="part hide" id="part3"></span>
<span class="part hide" id="part4"></span>
<!-- yellow -->
<svg id="y1" class="yellow hide" width="415" height="181" viewBox="0 0 415 181" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.2509 30.3446C34.4233 30.3446 37.3438 25.435 43.3741 22.8959C47.3062 21.2403 52.2153 27.6639 54.83 25.6303C56.9648 23.9698 58.295 21.7324 60.8173 20.5859C63.459 19.3851 66.1655 19.7541 68.8317 18.0401C71.5298 16.3056 72.3864 15.9187 75.6204 15.9187C78.8593 15.9187 79.6923 12.6752 82.4091 12.5243C85.3838 12.359 92.3568 11.0685 92.5921 15.0701C92.7642 17.9956 101.291 10.585 102.304 10.8743C106.778 12.1527 106.809 15.9187 112.11 15.9187C113.757 15.9187 116.514 15.711 117.39 14.2215C118.771 11.8735 121.049 10.7436 122.764 12.9486C123.841 14.333 126.016 19.2187 127.856 19.2187C130.8 19.2187 138.052 17.8915 140.066 15.5415C141.24 14.1714 142.391 11.7347 143.979 10.8271C147.072 9.05946 155.518 7.6863 158.782 9.31852C163.215 11.535 162.473 16.9003 168.305 14.8815C170.735 14.0403 172.344 13.4197 174.245 11.8643C176.398 10.1025 180.448 10.2496 182.967 9.12995C187.409 7.15573 194.614 5.56151 198.241 10.0257C199.539 11.6227 201.342 17.9748 203.333 18.4173C207.202 19.277 210.65 16.8454 213.28 14.4101C215.31 12.531 217.801 11.2096 219.88 9.12995C222.093 6.91741 223.404 4.88701 226.669 4.88701C233.632 4.88701 239.504 8.01076 244.018 12.5243C249.239 17.7455 257.919 19.1044 264.667 21.1988C267.318 22.0216 267.605 20.9462 270.136 19.973C273.084 18.8389 276.253 15.6813 278.433 13.3729C281.053 10.5986 282.971 10.8271 286.919 10.8271C289.114 10.8271 291.325 10.7488 293.519 10.8271C295.248 10.8889 296.621 12.43 298.28 12.43C298.946 12.43 300.935 8.2198 301.533 7.62135C303.486 5.66847 306.398 3.73346 309.029 2.81269C315.686 0.482727 323.507 1.61888 326.142 8.46994C327.751 12.653 329.489 17.0584 334.44 16.7672C335.775 16.6887 336.094 12.8361 337.174 11.8643C338.455 10.7111 342.417 11.8095 343.303 12.9486C344.524 14.5193 344.426 18.1374 345.896 19.313C348.421 21.3335 351.198 17.7283 353.109 15.9187C356.378 12.8208 362.423 14.8331 364.989 18.0401C365.87 19.1419 368.347 20.4283 369.656 21.0102C371.46 21.8119 370.534 23.791 371.306 25.2531C372.498 27.512 375.893 29.5686 378.095 30.7218C382.872 33.2244 386.659 32.8904 392.144 32.8904C393.463 32.8904 397.165 32.1732 397.235 33.9276C397.351 36.8282 397.599 40.1991 397.188 43.0735C396.801 45.7854 394.689 47.6716 394.689 50.7107C394.689 53.5394 394.689 56.368 394.689 59.1966C394.689 65.7982 404.284 67.983 408.455 71.7369C411.926 74.8608 413.358 77.6202 413.358 82.5799C413.358 89.0091 412.072 94.179 409.115 99.9288C407.279 103.499 404.859 110.16 401.148 111.809C398.231 113.106 400.399 119.131 400.582 121.144C400.962 125.325 400.629 129.672 400.629 133.872C400.629 138.772 396.335 143.468 392.144 145.564C388.874 147.199 383.667 145.169 380.075 146.413C374.032 148.504 368.264 157.965 365.46 163.573C363.056 168.382 360.941 170.513 355.183 169.466C352.96 169.062 351.457 167.496 349.29 167.014C347.045 166.516 344.363 167.088 342.077 166.967C340.027 166.859 338.269 165.27 336.137 165.27C332.535 165.27 329.396 167.9 325.954 168.664C318.538 170.312 311.971 170.362 304.362 170.362C299.213 170.362 293.637 169.875 289.276 166.967C287.217 165.595 285.094 163.106 282.676 165.27C278.216 169.261 270.451 174.605 264.431 174.605C259.712 174.605 255.33 174.531 250.807 173.709C247.112 173.037 245.209 170.362 241.472 170.362C234.558 170.362 227.643 170.362 220.729 170.362C214.455 170.362 210.739 175.453 204.606 175.453C199.332 175.453 197.686 170.481 191.83 172.53C188.87 173.566 181.58 174.756 179.997 177.527C178.388 180.342 172.259 178.524 170.002 177.622C167.101 176.461 164.495 172.907 161.328 172.907C156.842 172.907 153.255 173.373 149.023 175.029C141.002 178.167 134.238 179.667 127.856 173.285C126.61 172.039 125.884 171.229 124.367 170.362C121.822 168.908 119.685 168.673 117.201 167.627C108.202 163.838 98.5054 170.41 90.895 174.416C87.2017 176.36 78.4157 178.52 75.1961 174.557C73.7277 172.75 72.6403 169.181 70.0574 168.712C67.5016 168.247 64.1344 166.967 61.6187 166.967C59.4853 166.967 58.4768 165.473 57.3286 163.997C54.7378 160.666 50.8537 158.697 46.957 157.444C42.2454 155.93 35.11 154.238 30.221 154.238C24.4007 154.238 25.6318 142.534 24.0451 138.964C23.2967 137.28 22.5901 134.547 21.1222 133.212C18.9533 131.241 13.8629 129.64 11.1277 128.121C8.99684 126.937 8.51404 124.566 6.8848 122.841C5.3733 121.24 1.79327 119.798 1.79327 117.325C1.79327 114.611 3.14113 113.41 4.71619 111.385C6.5075 109.082 6.33194 105.071 5.84764 102.286C4.90863 96.8867 3.49045 91.1803 3.49045 85.88C3.49045 78.9316 14.5221 80.1751 14.5221 75.7441C14.5221 71.0549 12.8249 67.1013 12.8249 62.591C12.8249 58.2022 15.2941 55.4647 17.5393 51.9365C18.6967 50.1176 23.008 46.1694 23.008 44.3463C23.008 42.2249 23.008 40.1034 23.008 37.9819" stroke="#FFF2C4" stroke-width="2" stroke-linecap="round"/>
</svg>
<!-- yellow glow -->
<svg id="y2" class="yellow yellow-glow hide" width="461" height="227" viewBox="0 0 461 227" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_9_65)">
<path d="M50.2509 53.3446C57.4233 53.3446 60.3438 48.435 66.3741 45.8959C70.3062 44.2403 75.2153 50.6639 77.83 48.6303C79.9648 46.9698 81.295 44.7324 83.8173 43.5859C86.459 42.3851 89.1655 42.7541 91.8317 41.0401C94.5298 39.3056 95.3864 38.9187 98.6204 38.9187C101.859 38.9187 102.692 35.6752 105.409 35.5243C108.384 35.359 115.357 34.0685 115.592 38.0701C115.764 40.9956 124.291 33.585 125.304 33.8743C129.778 35.1527 129.809 38.9187 135.11 38.9187C136.757 38.9187 139.514 38.711 140.39 37.2215C141.771 34.8735 144.049 33.7436 145.764 35.9486C146.841 37.333 149.016 42.2187 150.856 42.2187C153.8 42.2187 161.052 40.8915 163.066 38.5415C164.24 37.1714 165.391 34.7347 166.979 33.8271C170.072 32.0595 178.518 30.6863 181.782 32.3185C186.215 34.535 185.473 39.9003 191.305 37.8815C193.735 37.0403 195.344 36.4197 197.245 34.8643C199.398 33.1025 203.448 33.2496 205.967 32.1299C210.409 30.1557 217.614 28.5615 221.241 33.0257C222.539 34.6227 224.342 40.9748 226.333 41.4173C230.202 42.277 233.65 39.8454 236.28 37.4101C238.31 35.531 240.801 34.2096 242.88 32.1299C245.093 29.9174 246.404 27.887 249.669 27.887C256.632 27.887 262.504 31.0108 267.018 35.5243C272.239 40.7455 280.919 42.1044 287.667 44.1988C290.318 45.0216 290.605 43.9462 293.136 42.973C296.084 41.8389 299.253 38.6813 301.433 36.3729C304.053 33.5986 305.971 33.8271 309.919 33.8271C312.114 33.8271 314.325 33.7488 316.519 33.8271C318.248 33.8889 319.621 35.43 321.28 35.43C321.946 35.43 323.935 31.2198 324.533 30.6213C326.486 28.6685 329.398 26.7335 332.029 25.8127C338.686 23.4827 346.507 24.6189 349.142 31.4699C350.751 35.653 352.489 40.0584 357.44 39.7672C358.775 39.6887 359.094 35.8361 360.174 34.8643C361.455 33.7111 365.417 34.8095 366.303 35.9486C367.524 37.5193 367.426 41.1374 368.896 42.313C371.421 44.3335 374.198 40.7283 376.109 38.9187C379.378 35.8208 385.423 37.8331 387.989 41.0401C388.87 42.1419 391.347 43.4283 392.656 44.0102C394.46 44.8119 393.534 46.791 394.306 48.2531C395.498 50.512 398.893 52.5686 401.095 53.7218C405.872 56.2244 409.659 55.8904 415.144 55.8904C416.463 55.8904 420.165 55.1732 420.235 56.9276C420.351 59.8282 420.599 63.1991 420.188 66.0735C419.801 68.7854 417.689 70.6716 417.689 73.7107C417.689 76.5394 417.689 79.368 417.689 82.1966C417.689 88.7982 427.284 90.983 431.455 94.7369C434.926 97.8608 436.358 100.62 436.358 105.58C436.358 112.009 435.072 117.179 432.115 122.929C430.279 126.499 427.859 133.16 424.148 134.809C421.231 136.106 423.399 142.131 423.582 144.144C423.9.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0