Javier Cárdenas Asked: 2020-06-22 18:26:04 +0800 CST 2020-06-22 18:26:04 +0800 CST 2020-06-22 18:26:04 +0800 CST 悬停图标上的圆圈背后效果 772 想知道给图标加圆圈的效果是怎么实现的,还有gmail里面的这个例子: 我明白我必须在图标内使用“焦点”事件;但是,我不确定是否需要创建一个额外的图标(周围有圆圈)或者只是用 css 可以实现这种效果。 javascript 4 Answers Voted Best Answer Samir Llorente 2020-06-22T19:24:56+08:002020-06-22T19:24:56+08:00 如果这很容易,当鼠标经过它时停止效果将是“悬停”,焦点是通过单击或某些键引起关注的地方。对于圆圈,它是为图标添加一个“填充”,并给它一个 50% 的“边界半径”。它看起来像这样: div{ padding: 5px; background-color: #ddd; } div i{ height: 30px; width: 30px; text-align: center; padding: 10px; margin: 0px 5px; color: #555; font-size: 28px; } div i:hover{ border-radius: 50%; color: #fff; background-color: #333; } <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous"> <div> <i class="fas fa-clipboard-check"></i> <i class="fas fa-user"></i> <i class="fas fa-cog"></i> <div> Saul Axel Martinez Ortiz 2020-06-22T18:40:14+08:002020-06-22T18:40:14+08:00 假设您有一个透明的图像,您可以执行以下操作: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Efecto circulo</title> <style> .imagen { width: 100px; border-radius: 50%; transition: background .4s; } .imagen:hover { background: #DDD; } </style> </head> <body> <img class="imagen" src="https://cdn3.iconfinder.com/data/icons/common-3/100/opacity-512.png" alt="Imagen con opacidad"> </body> </html> 在此示例中,图像的背景通过以下方式设置为圆形: border-radius: 50%; 唯一缺少的是当用户将鼠标放在背景上时更改背景的颜色: .imagen:hover { background: cualquier-color-que-quieras; } Luis Burgos 2020-04-26T09:56:33+08:002020-04-26T09:56:33+08:00 我在悬停时为背景添加了效果,Transition: background 0.8s; div{ padding: 5px; background-color: #ddd; } div i{ border-radius:50%; height: 30px; width: 30px; text-align: center; padding: 10px; margin: 0px 5px; color: #555; font-size: 28px; transition: background .4s; } div i:hover{ border-radius: 50%; color: #fff; background-color: #333; transition: background .4s; } <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous"> <div> <i class="fas fa-clipboard-check"></i> <i class="fas fa-user"></i> <i class="fas fa-cog"></i> <div> Luis Burgos 2020-04-26T10:03:19+08:002020-04-26T10:03:19+08:00 我修改了平面中的颜色并在我看来悬停,它看起来更好,但您可以根据自己的样式自定义它我给您留下一个链接,您可以在其中找到十六进制 (#C4C1C1) 或 rgb(193,193,193) 的颜色代码:https: // htmlcolorcodes.com/es/ 问候程序员朋友,上帝保佑你。 div{ padding: 5px; background-color: #ddd; } div i{ border-radius:50%; height: 30px; width: 30px; text-align: center; padding: 10px; margin: 0px 5px; color: #777; font-size: 28px; transition: background .4s; } div i:hover{ border-radius: 50%; color: #333; background-color: #C4C1C1; transition: background .4s; } <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous"> <div> <i class="fas fa-clipboard-check"></i> <i class="fas fa-user"></i> <i class="fas fa-cog"></i> <div>
如果这很容易,当鼠标经过它时停止效果将是“悬停”,焦点是通过单击或某些键引起关注的地方。对于圆圈,它是为图标添加一个“填充”,并给它一个 50% 的“边界半径”。它看起来像这样:
假设您有一个透明的图像,您可以执行以下操作:
在此示例中,图像的背景通过以下方式设置为圆形:
唯一缺少的是当用户将鼠标放在背景上时更改背景的颜色:
我在悬停时为背景添加了效果,Transition: background 0.8s;
我修改了平面中的颜色并在我看来悬停,它看起来更好,但您可以根据自己的样式自定义它我给您留下一个链接,您可以在其中找到十六进制 (#C4C1C1) 或 rgb(193,193,193) 的颜色代码:https: // htmlcolorcodes.com/es/ 问候程序员朋友,上帝保佑你。