CSSで競馬を実現する方法-フロントエンドQ&A-php.cn

CSS を使用して競馬のライト効果を実現する方法: 1. コード "

...
"; 2 を使用して div 境界線を作成します。 . css属性を「@keyframes moveLine {0% {background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% 100px)...」と設定することで。

CSSで競馬を実現する方法

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター

css を使用して実現する方法競馬？

境界線マーキー効果を実現するための css

最初にレンダリングをアップロードします

CSSで競馬を実現する方法

1. まず、 div 境界線全体

小马跑起来~

ログイン後にコピー

2. CSS スタイルの記述

.box { height: 300px; width: 400px; box-shadow: 0 0 3px orange; text-align: center; line-height: 280px; } .horse_run { background-image: linear-gradient(90deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%), linear-gradient(0deg, rgb(62, 224, 84) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(-90deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%), linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px; background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px; animation: moveLine 8s infinite linear; height: calc(100% - 2px); padding: 1px; background-clip: content-box; } @keyframes moveLine { 0% { background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px; } 5% { background-position: 0px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px -100px; } 30% { background-position: 100% 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px -100px; } 35% { background-position: calc(100% + 100px) 1px, calc(100% - 1px) 0px, calc(100% + 100px) calc(100% - 1px), 1px -100px; } 50% { background-position: calc(100% + 100px) 1px, calc(100% - 1px) 100%, calc(100% + 100px) calc(100% - 1px), -100px -100px; } 55% { background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 100% calc(100% - 1px), -100px calc(100% + 100px); } 80% { background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 0px calc(100% - 1px), 1px calc(100% + 100px); } 85% { background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 100%; } 100% { background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 0px; } }

ログイン後にコピー

推奨学習: "css ビデオチュートリアル"

以上がCSSで競馬を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。