js实现鼠标跟随悬浮箭头旋转动画效果代码
代码语言:html
所属分类:悬停
代码描述:js实现鼠标跟随悬浮箭头旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .cursor { font-size: 2rem; transform-origin: 50% 50%; width: 1em; margin: 1em; } html, body { height: 100%; width: 100%; display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; background: darkslateblue; } body { padding: 2em; } .cursor { font-size: 0; height: 1.25rem; width: 1rem; background: peachpuff; position: relative; margin: 1rem 3rem; } .cursor:before { content: ""; display: block; border: 15px solid black; border-color: transparent transparent peachpuff transparent; position: absolute; top: 0%; left: 50%; transform: translate(-50%, -99%); } .cursor:nth-of-type(4n) { background: coral; } .cursor:nth-of-type(4n):before { border-color: transparent transparent coral transparent; } .cursor:nth-of-type(4n + 1) { background: turquoise; } .cursor:nth-of-type(4n + 1):before { border-color: transparent transparent turquoise transparent; } .cursor:nth-of-type(4n + 2) { background: cornsilk; } .cursor:nth-of-type(4n + 2):before { border-color: transparent transparent cornsilk transparent; } button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 2rem; padding: 0.5em; background: mediumpurple; color: #fff; border: 2px solid lavender; border-radius: 4px; cursor: pointer; } footer { position: absolute; bottom: 0; right: 0; padding: 1em; } footer, footer a { color: #fff; } </style> </head> <body> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor">⬆️</div> <div class="cursor".........完整代码请登录后点击上方下载按钮下载查看
网友评论0