鼠标图标围绕元素特效
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Mouse cursor pointing to cta</title> <style> .cursor { --r: 0deg; position: fixed; left: -10px; top: -10px; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: none; -webkit-transform: translate(var(--x), var(--y)); transform: translate(var(--x), var(--y)); -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); } .cursor svg { display: block; width: 50px; height: 50px; -webkit-transform: rotate(var(--r)); transform: rotate(var(--r)); } .btn { --background: #5628EE; --shadow: rgba(84, 40, 238, .16); --y: 0; display: table; text-align: center; padding: 12px 24px; border-radius: 4px; color: #fff; background: var(--background); text-decoration: none; font-weight: 500; font-size: 16px; line-height: 23px; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 4px 12px var(--shadow); -webkit-transform: translateY(var(--y)); transform: translateY(var(--y)); transition: box-shadow .3s ease, -webkit-transform .3s ease; transition: box-shadow .3s ease, transform .3s ease; transition: box-shadow .3s ease, transform .3s ease, -webkit-transform .3s ease; } .btn:hover { --y: -2px; box-shadow: 0 8px 16px var(--shadow); } .btn:active { --y: 1px; box-shadow: 0 4px 8px var(--shadow); } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; font-family: Roboto,Arial; display: flex; justify-content: center; align-items: center; background: #F5F9FF; } body .dribbble { position: fixed; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0