css实现鼠标移入移出晕影效果

bingzhe_er

2020-09-14 1,143 阅读1分钟

box-shadow实现晕影效果，transition实现过渡效果

box-shadow : _h-shadow v-shadow blur spread color_ inset;

transition : _property duration timing-function delay;_

h-shadow 横向阴影的长度（必须）

v-shadow 纵向阴影的长度（必须）

blur 阴影的模糊长度

spread 阴影的扩散长度

color 阴影的颜色

inset 阴影向内扩散

property 施加效果的属性名字，比如实现颜色渐变，填写background-color

duration 多少秒内完成

timing-function 指定transition效果的转速曲线

delay 定义transition效果开始的时候

鼠标移入后，四周出现晕影，鼠标移出后，晕影消失。

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">   
    <title>Title</title>    
    <style>        
        div{            
            width: 400px;            
            height: 400px;            
            background-color: lightskyblue;            
            transition: box-shadow 0.5s;            
            margin:0px auto;        
         }        
        div:hover{           
        box-shadow: 0px 0px 30px rgba(0,204,204,0.5);        
        }    
    </style>
</head>
<body>    
    <div></div>
</body>
</html>

rgba能够实现模糊晕影颜色边缘；

transition属性加在div样式中即可实现移入移出的过渡效果。