js实现可配置的鼠标点击生成星星跟随动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现可配置的鼠标点击生成星星跟随动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap"); .star { transform-style: preserve-3d; width: 1px; height: 1px; position: absolute; color: red; pointer-events: none; } .star:before { position: absolute; content: "✦"; color: inherit; inset: 0; text-shadow: 0 0 1em #fff5; } body { margin: 0; min-height: 100vh; font-family: "Montserrat", sans-serif; color: #F9F6EF; display: grid; place-content: center; background-image: radial-gradient(circle at 50% 50%, #2f3040, #1f2020); } .chooser { display: grid; grid-template-columns: 1fr 1fr 1fr; } .chooser label { text-align: center; transition: 0.4s ease; border: 1px solid #AEE1CD20; padding: 0.5em 1em; cursor: pointer; } .chooser input[type=radio] { display: none; } .chooser input[type=radio]:checked + label { color: #FFE681; border: 1px inset #AEE1CD90; } .chooser input[type=radio]:not(:checked) + label:hover { color: #D1CDDA; box-shadow: inset 1px 1px #F9F6EF40; background-color: #1f202050; } .chooser input[type=radio]:not(:checked) + label:active { box-shadow: inset -1px -1px #F9F6EF40; } </style> </head> <body > <h1>Move your mouse around</h1> <div class="chooser"> <input type="radio" checked="" value="1" name="trailside" id="r1"/> <label for="r1">Gravity On</label> <input type="radio" value="-1" name="trailside" id="r2"/> <label for="r2">No Gravity</label> <input type="radio" value="0" name="trailside" id="r3"/> <label for="r3">Fade Away</label> </div> <script > let fallDirection = 1; document. querySelectorAll('input[name="trailside"]'). forEach( r => { r.addEventListener( 'c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0