CSS特效三：简单的便签效果

最新推荐文章于 2023-03-13 13:27:09 发布

githubcurry

最新推荐文章于 2023-03-13 13:27:09 发布

阅读量1.7k

点赞数 5

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_45277161/article/details/110355214

版权

HTML CSS 过渡效果交互设计网页特效

关键词由CSDN通过智能技术生成

css 专栏收录该内容

28 篇文章 17 订阅

订阅专栏

在这里插入图片描述

今天是来实现一个很实用，很炫酷的便签效果。写一个放到自己的网站上肯定增光不少。实现的效果如下
鼠标放到便签上之前：

在这里插入图片描述

鼠标放上去之后：
在这里插入图片描述

请添加图片描述

实现思路如下：

写好一个div，这个div包含了4个a标签，设置a标签的left: -80px;,这样a标签就会隐藏起来。
然后设置a的hover效果为left: 0;,想更加炫酷的小伙伴也可以加一点transform效果。

最后附上源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>便签</title>
    <style>
        #mySidenav a {
            position: absolute;
            left: -80px;
            transition: 0.3s;
            padding: 15px;
            width: 100px;
            text-decoration: none;
            font-size: 20px;
            color: white;
            border-radius: 0 5px 5px 0;
        }
        
        #mySidenav a:hover {
            left: 0;
        }
        
        #about {
            top: 20px;
            background-color: #4CAF50;
        }
        
        #blog {
            top: 80px;
            background-color: #2196F3;
        }
        
        #projects {
            top: 140px;
            background-color: #f44336;
        }
        
        #contact {
            top: 200px;
            background-color: #555
        }
    </style>
</head>

<body>
    <div id="mySidenav" class="sidenav">
        <a href="#" id="about">About</a>
        <a href="#" id="blog">Blog</a>
        <a href="#" id="projects">Projects</a>
        <a href="#" id="contact">Contact</a>
    </div>

    <div style="margin-left:80px;">
        <h2>便签效果</h2>
        <p>鼠标移动到指定便签显示隐藏内容。</p>
    </div>
</body>

</html>