CSS3 は、div 要素の水平移動を実装して distance_html/css_WEB-ITnose を指定します-htmlチュートリアル-php.cn

CSS3 は、div 要素の水平移動を実装して distance_html/css_WEB-ITnose を指定します

WBOY

リリース： 2016-06-24 11:27:13

オリジナル

1289 人が閲覧しました

CSS3 によって実装された div 要素の水平方向の移動の指定距離:
この章では、CSS3 を使用して div 要素を一定の距離だけ水平方向に移動させる方法を実装する段落を共有します。
コード例は次のとおりです。

<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">div{  width:100px;  height:100px;  background:green;  position:relative;  animation:theanimation 5s forwards;   -webkit-animation:theanimation 5s forwards; } @keyframes theanimation{   0% {left:0px;}   100% {left:200px;} } @-webkit-keyframes theanimation{   0% {left:0px;}   100% {left:200px;} } </style></head><body><div id="antzone"></div></body></html>

ログイン後にコピー

上記のコードは、要件を満たしています。詳細については、関連する資料を参照してください。
関連書籍:
(1) アニメーションについては、CSS3 のアニメーション属性の使用方法の詳細な説明を参照してください。
(2). @keyframes については、CSS3 での @keyframes の使用法の詳細な説明を参照してください。

元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=18160

詳細については、以下を参照してください: http://www.softwhy.com/divcss/