5

プロパティを使用-webkit-animationして、ユーザーが最初にページを表示したときにフォーム要素をその場所に回転させます。

それを達成するために次のコードを使用します。

.bounce {
    -webkit-animation-name: bounceup;
}


@-webkit-keyframes bounceup {
    from {
    opacity:0.5;
    -webkit-transform: translateY(100px) rotate(180deg);
    -webkit-box-shadow: 20px 20px 80px #000;
    }
    to {
    opacity:1;
    -webkit-transform: translateY(0px) rotate(0deg);
    }
}

サーバー側のコードは PHP です。私のphpクラスの各フォーム要素には、クラス「バウンス」があり-webkit-animation-duration、各要素間で0.18ずつインクリメントするという名前のインラインプロパティを追加しました。

phpコード:

private $animationDuration=0.7;

private function _getAnimationDuration() {
    $ret= '-webkit-animation-duration: '.$this->animationDuration.'s';
    $this->animationDuration+=0.1;
    return $ret;
}

ここでは、関数の結果を含む各フォーム要素に「style」という名前のプロパティを追加し_getAnimationDuration()ます。

問題は、純粋な CSS3 と HTML5 (JavaScript なし) を使用して _getAnimationDuration() 関数を何らかの形で実装できないかということです。

フォーム要素ごとに異なるアニメーション期間 css スタイルを追加したいと考えています。それぞれが同じ量だけ増加しました。

4

2 に答える 2

0

コメントを要約するには：

既存のソリューションは本質的に HTML5/CSS3 です。CSS3 スタイルを動的に生成するために、PHP からのバックエンド アシストを使用します。

パラメータ化または動的な CSS スタイルは、HTML5 と CSS3 だけでは実現できません。LESS または Sass は、JavaScript とライブラリのコンパイルを利用して、目的の結果に近づけることができます。

于 2012-10-26T17:50:49.300 に答える