Question

基本上，我的标题会通过滚动更改为其他标题。

因此，第一个标题从左侧（屏幕外部）移至页面中心，几秒钟后，它又移至右侧（屏幕外部），然后第二个标题从左侧移出，依此类推。

在桌面版本（http://two-house.com上它可以正常工作，但在移动设备上，当动画从中心移到屏幕外部时，它将使页面扩展。

其中的HTML是：

<div class="slider__heading-container">
    <div class="item-1">
        <h2 class="heading-primary">
            <span class="heading-primary--left">
                Find your
            </span>
            <span class="heading-primary--right">
                perfect place
            </span>
        </h2>
    </div>
    <div class="item-2">
        <h2 class="heading-primary">
            <span class="heading-primary--left">
                We will
            </span>
            <span class="heading-primary--right">
                suits your needs
            </span>
        </h2>
    </div>
    <div class="item-3">
        <h2 class="heading-primary">
            <span class="heading-primary--left">
                Invest and
            </span>
            <span class="heading-primary--right">
                earn money
            </span>
        </h2>
    </div>
</div>

和CSS

.slider__heading-container {
    position: absolute;
    top: 30%;
    left: 10%;
    width: 80%;
    transform: translate(0, -50%);
    height: 5rem;
    display: flex;
    justify-content: center;
    text-align: center;
}

.item-1,
.item-2,
.item-3 {
    position: absolute;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.item-1 {
    animation-name: anim-1;
}
.item-2 {
    animation-name: anim-2;
}
.item-3 {
    animation-name: anim-3;
}

@keyframes anim-1 {
    0%, 8.3% {
        transform: translateX(-100%);
        opacity: 0;
        display: none;
    }
    8.3%,25% {
        transform: translateX(0);
        opacity: 1;
        display: block;
    }
    33.33%, 100% {
        transform: translateX(100%);
        opacity: 0;
        display: none;
    }
}

@keyframes anim-2 {
    0%, 33.33% {
        transform: translateX( -100%);
        opacity: 0;
        display: none;
    }
    41.63%, 58.29% {
        transform: translateX(0);
        opacity: 1;
        display: block;
    }
    66.66%, 100% {
        transform: translateX(100%);
        opacity: 0;
        display: none;
    }
}

@keyframes anim-3 {
    0%, 66.66% {
        transform: translateX(-100%);
        opacity: 0;
        display: none;
    }
    74.96%, 91.62% {
        transform: translateX(0);
        opacity: 1;
        display: block;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
        display: none;
    }
}

Answer 1

尝试一下：

$source = "TEST",

$sql="SELECT * FROM data ORDER BY RAND()";
$result = mysqli_query ($connection,$sql);
if(mysqli_num_rows($result)!=0){
        $data = $row['data'];
}

echo str_replace('$source', $source, $data);

移动设备上的关键帧展开页面

1 个答案: