css3 h5显示气温图

CSS3和HTML5的出现极大地改变了网页开发的方式，让我们能够创造出更加精美、丰富的效果和功能。其中，用CSS3展现气温图是一种非常有趣的实践。

    .temp-chart {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 80%;
            margin: 0 auto;
            font-size: 20px;
    }
    .temp-block {
            width: 50px;
            height: 180px;
            background-color: #f4f4f4;
            position: relative;
            overflow: hidden;
    }
    .temp-block:hover .temp-show {
            opacity: 1;
    }
    .temp-show {
            width: 50px;
            height: 50px;
            background-color: #dfe4ea;
            color: #ffffff;
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            opacity: 0;
            transition: all 0.2s ease;
    }
    

将上述代码添加到HTML文件中，使用flexbox布局，创建了一个类为temp-chart的容器。该容器内包含多个类为temp-block的盒子，每个盒子表示一个小时的气温。当鼠标悬停在盒子上时，将会弹出一个圆形容器，展现出这个小时的具体气温数字。

这里需要注意的是，我们使用了:hover伪类和opacity属性来控制弹出框的展示和隐藏。我们还使用了transform属性和transition属性来让弹出框具有更流畅的跳转效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！