【自学前端笔记2】按钮悬停时展开的css效果

行之道人

已于 2024-02-22 13:48:41 修改

阅读量379

点赞数 6

文章标签：前端笔记 css html

于 2024-02-22 13:43:10 首次发布

本文链接：https://blog.csdn.net/xingzhidaoren/article/details/136231413

版权

废话不多说，先看效果

在这里插入图片描述

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>demo</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
        <!-- <script src="js/jquery.easing.1.3.js"></script> -->
	</head>
    <style>
        html, body{
            min-height: 600px;
            min-width: 1000px;
            margin: 0;
        }
        
        .p2_zhankai {
            position: relative;
            width: 30px;
            height: 30px;
            background-color: white;
            border-radius: 30px;
            transition: width 0.5s, height 0.5s,background-color 0.5s,border 0.5s;
            overflow: hidden;
            border: 2px solid black;
            margin-top: 20px;
        }

        .p2_zhankai:hover {
            width: 100px;
            height: 30px;
            border-radius: 30px;
            background-color: #2F72ED;
            border: 2px solid #2F72ED;
            cursor: pointer;
        }

        .p2_icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 25px;
            height: 25px;

        }
        .p2_icon img{
            width: 100%;
            height: 100%;
        }

        .p2_zhankai:hover .p2_icon {
            transform: translate(25px,-50%); 
            transition: transform 0.5s;
        }
        .p2_zhankai:not(:hover) .p2_icon {
            transform: translate(-50%, -50%);
            transition: transform 0.5s;
        }
        .p2_zhankai:hover img {
            content: url(./img2/切右1.png);
        }
        .p2_zhankai:hover > span {
            opacity: 1;
            transition: opacity 0.5s;
            transform: translateX(-50%);
        }

        .p2_zhankai span {
            color: white;
            letter-spacing: 0.1em;
            opacity: 0;
            font-size: 14px;
            font-weight: 500;
            line-height: 30px;
            margin-left: 10px;
            transition: opacity 0.5s, transform 0.5s;
        }
    </style>
	<body>
        <div class="p2_zhankai">
            <span>了解更多</span>
            <div class="p2_icon"><img src="img2/切右2.png"></div>
        </div>
	</body>

</html>