Question

我正在将网站屏幕创建为临时的“即将推出页面”。我在某些文字后面有一个圆圈。无论浏览器窗口的大小如何，文本始终始终以页面为中心，但是圆圈似乎以不同的大小移动位置。我有办法让圆圈完全位于文字的后面吗？

对代码很陌生，我遵循了一些教程，但是似乎没有一个工作

body{
    margin: 0px;
    padding: 0px;
    background-color: #19181D;
}
.circle{
    height: 400px;
    width: 400px;
    border-radius: 50%;
    background: linear-gradient(#313247 0%,#19181D 30%);
    position: absolute;
    top: 20%;
    left: 35%;
}
.circle:before,
.cirlce:after{
    content: '';
    height: 400px;
    width: 400px;
    background: linear-gradient(#FF849D 0%,#FF849D 5%, #2D2133 25%);
    border-radius: 50%;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-filter:blur(7px);
    z-index: -1;
}
.cirlce:after{
    width: 415px;
    top: 35%;
    -webkit-filter:blur(14px);
    opacity: .3;
}
.unixcast{
    font-family: sans-serif;
    font-size: 40px;
    color: white;
    letter-spacing: 20px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.msg{
    font-family: sans-serif;
    font-size: 20px;
    color: white;
    letter-spacing: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <span class="circle"></span>
    <span class="unixcast"> UNIXCAST </span>
    <span class="msg">IS COMING SOON!</span>
    <span class="notifymsg"> GET NOTIFIED WHEN IT'S READY</span>
    <span class="field">
        <input type="email" name="ENTER YOUR EMAIL"/>
        <button>NOTIFY ME</button>
    </span>
</body>
</html>>

我希望在文本后面直接看到圆圈，但随着屏幕和窗口大小的变化，它似乎会移动

Answer 1

请为您的圈子课程写这个CSS

.circle {
     height: 400px;
     width: 400px;
     border-radius: 50%;
     background: linear-gradient(#313247 0%,#19181D 30%);
     position: absolute;
     left: 0px;
     right: 0px;
     margin: auto;
     top: 0px;
     bottom: 0px;
 }

如何在CSS中居中放置形状

1 个答案: