css实现用户图像悬浮出现齿轮效果代码
代码语言:html
所属分类:悬停
代码描述:css实现用户图像悬浮出现齿轮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --transition: all .35s ease-in-out; } svg { fill: url(#avatar); stroke-width: 20px; } svg { filter: grayscale(1); transition: var(--transition); } circle { stroke: rgba(250, 162, 0, 0.5); stroke-dasharray: 0; transform: rotate(5deg); transform-origin: center; transition: var(--transition); } svg:hover { filter: grayscale(0); } svg:hover circle { stroke: #faa200; stroke-dasharray: 10 20; transform: rotate(0); transform-origin: center; } /* DEMO STYLES .........完整代码请登录后点击上方下载按钮下载查看
网友评论0