怎么在css3网页中心添加文字？

怎么再下面这个纯CSS3旋转的星球动画效果网页中心位置添加两行文字？

<title>无标题文档</title>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

4条回答默认最新

CSDN专家-showbo 2022-03-01 09:54

关注

题主要的效果如下，如果容器高度或者宽度不够或者过大，题主可以自己调整下样式，具体看代码中注释


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <title>纯CSS实现多彩旋转星球星系环绕特效动画</title>
    <link rel="stylesheet" type="text/css" href="https://jsdaima.hu-cheng.net/js/2020/10/4024/css/www.jsdaima.com.css">
    <style>
        .word {
            position: absolute;
            font-size: 20px;
            color: #f00;
            background: rgba(255,255,255,.5);
            text-align: center;
            z-index: 99;
            /*下面4个样式控制垂直居中和文字行高，高度变化后，margin-top改为 -高度的一半px*/
            line-height: 50px;
            height: 100px;
            top: 50%;
            margin-top: -50px;
            /*下面3个样式控制水平居中，宽度变化后，margin-left改为 -宽度的一半px*/
            width: 300px;
            left: 50%;
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <div class="word">
        题主你要放的2行文字<br />
        放到这个容器里面
    </div>
    <div class="wrapper">
        <div class="sphere">
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
        </div>
    </div>


</body>
</html>