css3画样式（形状，冒泡框）

最新推荐文章于 2024-07-21 22:10:10 发布

我的青春不再善良

最新推荐文章于 2024-07-21 22:10:10 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/shahuangtiao6640/article/details/78401618

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>鼠标移上去显示tips效果示例</title>
    <style type="text/css">
        .haorooms {
            margin-top: 30px;
            margin-bottom: 80px;
        }

        span {
            position: relative;
            display: inline-block;
        }

            span:hover {
                cursor: pointer;
            }

                span:hover:before {
                    content: attr(data-haorooms);
                    background-color: #2085c5;
                    border-radius: 3px;
                    color: #fff;
                    padding: 10px;
                    position: absolute;
                    left: 0;
                    top: 100%;
                    margin-top: 8px;
                    white-space: pre;
                }

                span:hover:after {
                    content: "";
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    width: 0;
                    height: 0;
                    border-right: 8px solid transparent;
                    border-left: 8px solid transparent;
                    border-bottom: 8px solid #2085c5;
                }

        .csstest {
            position: relative;
            width: 120px;
            height: 30px;
            background-color: #ffd800;
            top: 100px;
            border-radius: 5px;
        }

            .csstest:after {
                position: absolute;
                content: '';
                width: 0px;
                height: 0px;
                left: 45px;
                top: 30px;
                border-width: 10px;
                border-style: solid;
                border-color: #ffd800 transparent transparent transparent;
            }

        .test-div {
            position: relative;
            left: 100px;
            width: 150px;
            height: 36px;
            border: 1px solid black;
            border-radius: 5px;
            background: rgba(245,245,245,1);
        }

            .test-div:before, .test-div:after {
                content: ""; /*:before和:after必带技能*/
                display: block;
                position: absolute;
                top: 8px;
                width: 0;
                height: 0;
                border: 6px solid transparent;
            }

            .test-div:before {
                left: -11px;
                border-right-color: rgba(245,245,245,1);
                z-index: 1;
            }

            .test-div:after {
                left: -12px;
                border-right-color: rgba(0,0,0,1);
                z-index: 0;
            }
    </style>
</head>
<body>
    <div class="haorooms">
        <span data-haorooms="haorooms鼠标效果tips-纯css">haorooms测试</span>
    </div>
    
    <div style="width: 0; height: 0; border: 30px solid red; border-radius: 30px;"></div>
    
    <div style="margin-top: 10px; width: 5px; height: 0; border-width: 30px 20px; border-style: solid; border-color: red transparent;"></div>
    
    <div style="margin-top: 10px; width: 30px; height: 0; border-width: 30px 40px; border-style: solid; border-color: transparent transparent red transparent;"></div>
    
    <div class="csstest"></div>
    <div class="test-div"></div>
</body>
</html>