环绕圆形图像的光晕,CSS处于悬停状态
我想在圆形图像周围有一个辉光效果,我让它看起来像一个圆形,但它实际上是一个方形图像,带有透明像素,使它看起来像一个圆形 有没有一种简单有效的方法可以用CSS来实现这一点?我尝试过box shadow,但它似乎无法正常工作。这应该会对您有所帮助 .盒子阴影{ -网络工具包盒阴影:0px 0px 8px 5px黑色; -moz盒阴影:0px 0px 8px 2px浅绿色; 盒影:0px 0px 8px 2px浅蓝色; } 发光框中的文本。环绕圆形图像的光晕,CSS处于悬停状态,css,Css,我想在圆形图像周围有一个辉光效果,我让它看起来像一个圆形,但它实际上是一个方形图像,带有透明像素,使它看起来像一个圆形 有没有一种简单有效的方法可以用CSS来实现这一点?我尝试过box shadow,但它似乎无法正常工作。这应该会对您有所帮助 .盒子阴影{ -网络工具包盒阴影:0px 0px 8px 5px黑色; -moz盒阴影:0px 0px 8px 2px浅绿色; 盒影:0px 0px 8px 2px浅蓝色; } 发光框中的文本。 您可以使用方框阴影和CSS动画来执行类似的操作 img{
您可以使用方框阴影和CSS动画来执行类似的操作 img{ 利润率:30像素; 边界半径:50%; 盒影:0px 0px 9px 4px 747DE8; 动画:辉光1.5s线性无限交替; } @关键帧发光{ 到{ 盒影:0px 0px 30px 20px 535FED; } }
您需要结合使用border radius:属性和:hover伪类来获得所需的效果 基本上,将图像边界半径设置为50%——这将使图像成为一个完美的圆。使用:hover psuedo类可以设置mouse:hover事件的样式 HTML: 在小提琴中可以看到: -旁注-box shadow:property的前两个0使其在box shadow中没有偏移。这使它看起来发光 编辑
在看到@NENAD的答案后,我可能误解了人们对发光效果的要求 寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码。看见
<img src="https://aedesnoyers.files.wordpress.com/2011/12/night11.jpg" class="round-hover" />
.round-hover {
height: 200px; /*Resize for Fiddle*/
width: 200px;
border-radius: 50%;
}
.round-hover:hover{
/* thank you @Morgan Clark */
-webkit-box-shadow: 0px 0px 8px 5px black;
-moz-box-shadow: 0px 0px 8px 2px light green;
box-shadow: 0px 0px 8px 2px light blue;
}