欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2024-01-23 22:08:58
...

效果展示:

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

源码展示：

<!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>

 

上一篇： JSP | 使用Statement、ResultSet对象操作数据库

下一篇： 简述Shiro验证过程

推荐阅读