CSS实现渐变按钮点击出现悬浮阴影

最新推荐文章于 2023-04-19 16:51:22 发布

luniaWang

最新推荐文章于 2023-04-19 16:51:22 发布

阅读量1.2k

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/luniaWang/article/details/104258816

版权

该博客介绍了如何使用CSS创建一个渐变按钮，并在点击时实现悬浮阴影的动画效果。通过flex布局、背景渐变动画和阴影动画的简单应用，达到视觉上的交互提升。文章列举了关键的CSS代码片段，并提供了参考资源。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述

shadow.html文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Document</title>
</head>
<body>
    <div class="header">今天掀谁的牌子好呢？</div>
    <div class="container">
        <