纯CSS3实现鼠标移动动画（阴影）

最新推荐文章于 2023-07-11 14:54:35 发布

Mr.王征

最新推荐文章于 2023-07-11 14:54:35 发布

阅读量1.6k

点赞数 3

分类专栏： CSS 文章标签： css动画 css3hover动画

本文链接：https://blog.csdn.net/wangzhneg123/article/details/88184184

版权

CSS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果展示:

源码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS3实现鼠标移动动画（阴影）</title>
</head>
<style>
       #box{
           width: 200px;
           height: 200px;
           margin: 100px;
           background-color: #0ff;
           position: relative;
           box-shadow:0 0  #b8f6ff;
           transition: all 1s;
       }
    #box:hover{
          box-shadow:15px 20px  20px  #b8f6ff;
    }
</style>
<body>
<div id="box"></div>
</body>
</html>