ホームページ > 記事 > ウェブフロントエンド > CSS3 は、div 要素の水平移動を実装して distance_html/css_WEB-ITnose を指定します
CSS3 は、div 要素の水平移動を実装して distance_html/css_WEB-ITnose を指定します
- WBOYオリジナル
- 2016-06-24 11:27:131330ブラウズ
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/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。