カスタムページで走馬灯を実現

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. 使用シーン

この例では、カスタムページでcss3 animationスタイル属性を使用して、pc側、モバイル側の走馬灯効果を実現する方法を紹介します。

2. 機能を実現する

2.1. スタイル1

2.1.1. カスタムページの作成

2.1.2. ページ効果の設定

2.1.2.1. 親コンテナ設定

コンテナスタイル設定:

:root {
  position: relative;
  width: 100%;
  height: 520px;
}

2.1.2.2. 開始位置画像コンテナ設定

:root {
  display: block;
  position: absolute;
  z-index: 10;
  left: 0;
  height: 100%;
}

2.1.2.3. 終了位置画像コンテナ設定

:root {
  display: block;
  position: absolute;
  z-index: 10;
  right: 0;
  height: 100%;
  transform: rotate(180deg);
}

2.1.2.4. 走馬灯容器配置

:root {
  width: 660vw;
  height: 100%;
  background-image: url("您的走马灯图片地址");
  background-position: 50% center;
  background-size: contain;
  background-repeat: repeat-x;
  animation: rightsMove 40s linear infinite;
}

@keyframes rightsMove {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(0);
  }
}

2.2. スタイル2

2.2.1. カスタムページの作成

2.2.2. ページ効果の設定

2.2.2.1. 設定変数

2.2.2.2. 親コンテナ設定

:root {
  padding: 80px 0;
  background-image: linear-gradient(181deg, rgba(228,175,117,0.25) 0%, rgba(216,162,114,0.10) 100%);
  user-select: none;
  overflow: hidden;
}

@keyframes rightsMove {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-100%);
  }
}

2.2.2.3. 行コンテナ設定

:root {
  display: flex;
  margin-bottom: 24px;
}

:root:hover > div {
  animation-play-state: paused;
}

2.2.2.4. ブロックコンテナ配置

:root {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  animation: rightsMove 40s linear infinite;
}

2.2.2.5. 循環コンテナ設定

Data1変数のバインド:

画像変数のバインディング:

文字変数バインディング:

循環コンテナスタイル設定:

:root {
  border-radius: 12px;
  padding: 32px;
  margin-right: 24px;
  width: 378px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

:root:hover {
  transition: transform 1s ease;
  transform: translateY(-4px);
  box-shadow: 0 0 8px 0 rgba(0,0,0,0.08);
}

3. 効果を実現する

4. オンラインで試遊する

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_DC7NR4GDUOP6IPTE1GO1&from=yuque_subject