svg+css实现三维立体悬浮播放按钮动画效果代码
代码语言:html
所属分类:悬停
代码描述:svg+css实现三维立体悬浮播放按钮动画效果代码
代码标签: svg css 三维 立体 悬浮 播放 按钮 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { position: absolute; display: flex; inset: 0; align-items: center; justify-content: center; background-color: #000000; } .glowMe, .glowAll { opacity: 0; transition: opacity 300ms linear 0s; } svg { width: 30vw; height: 30vw; cursor: pointer; } svg:hover .glowMe { opacity: 0.5; } svg:hover .glowAll { opacity: 1; } .buttonTop { fill: #5f309b; transition: fill 300ms linear 0s; } svg:hover .buttonTop { fill: #a661ff; } .buttonSides { fill: #371b5b; transition: fill 300ms linear 0s; } svg:hover .buttonSides { fill: #763ac2; } svg:focus { outline: none; } svg:focus .buttonTop, svg:focus .playSides { stroke: white; stroke-width: 2px; } svg:focus .playSides { stroke-width: 1px; } svg:active .buttonTop { fill: #c79cff; } svg:nth-of-type(1) { transform: translate(37%, -35%); } svg:nth-of-type(3) { transform: translate(-37%, 35%); } </style> </head> <body > <svg width="25%" height="25%" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" tabindex="0"> <rect class="buttonSides" x="5.04999" y="51" width="90.62" height="8" fill="#763AC2" /> <rect class="buttonSides" width="57" height="57" rx="8" transform="matrix(0.866025 -0.5 0.866025 0.5 1 59)" fill="#763AC2" /> <g clip-path="url(#clip0_106_11)"> <rect class="buttonTop" width="57" height="57" rx="8" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" fill="#A661FF" /> <path class="buttonSides playSides" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" fill="#763AC2" /> <g class="glowAll" filter=&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0