把红色框内做成那种来回动画效果怎么做啊？
小伙看你根骨奇佳，潜力无限，来学PHP伐。
<!DOCTYPE html> <html> <head> <style> p { width:100px; height:100px; background:red; position:relative; animation:mymove 1s infinite; -moz-animation:mymove 1s infinite; /* Firefox */ -webkit-animation:mymove 1s infinite; /* Safari and Chrome */ -o-animation:mymove 1s infinite; /* Opera */ animation-direction: alternate; } @keyframes mymove { from {left:0px;} to {left:200px;} } @-moz-keyframes mymove /* Firefox */ { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {left:0px;} to {left:200px;} } @-o-keyframes mymove /* Opera */ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p></p> </body> </html>
運行一下上面的程式碼，改在w3school。
連結為：http://www.w3school.com.cn/cs...
給你個連結 自己對著改參數
給那個三角圖片 擺好位置後， 用類別去控制動作。
如
.move { -webkit-animation-name:'example'; // other code } @-webkit-keyframes 'example' { 0% { -webkit-transform: translateX(0); } 50% { -webkit-transform: translateX(100px); } 100% { -webkit-transform: translateX(0); } } // 补充说明： -webkit-animation-name:'xxx';/*动画属性名，也就是我们前面keyframes定义的动画名*/ -webkit-animation-duration: 10s;/*动画持续时间*/ -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/ -webkit-animation-delay: 2s;/*动画延迟时间*/ -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式*
css3的動畫效果主要是透過過渡來實現的，用animate來定義一個補間動畫，瀏覽器會自動根據設定的時間來進行渲染。樓上兩位大神的程式碼已經做得很完善了，具體效果題主可以自己依需求修改
運行一下上面的程式碼，改在w3school。
連結為：http://www.w3school.com.cn/cs...
給你個連結 自己對著改參數
給那個三角圖片 擺好位置後， 用類別去控制動作。
如
css3的動畫效果主要是透過過渡來實現的，用animate來定義一個補間動畫，瀏覽器會自動根據設定的時間來進行渲染。樓上兩位大神的程式碼已經做得很完善了，具體效果題主可以自己依需求修改