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/
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
