HTML:
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>demo05</title> 5 <link type="text/css" href="E:\htmltest1\demo1\demo05.css" rel="stylesheet"> 6 </head> 7 <body> 8 <div> 9 <p></p> 10 </div> 11 </body>
CSS:
1 *{margin:0;padding:0;} 2 div{ 3 width:300px; 4 height:300px; 5 border:20px solid rgba(255,255,255,0.5); 6 border-radius:50%; 7 margin:100px auto; 8 background:url('D:/新增資料夾/biao.png'); 9 background-size:300px 300px; 10 position:relative; 11 12 } 13 14 p{ 15 width:300px; 16 height:300px; 17 border-radius:50%; 18 position:absolute; 19 background:url('D:/新增資料夾/bbd.png'); 20 transition:1s; 21 /* animation:move 5s infinite linear; */ 22 } 23 24 p:hover{ 25 transform:translateX(-300px) rotate(180deg); 26 } 27 28 @keyframes move{ 29 0%{transform:translateX(0px);} 30 100%{transform:translateX(-200px);} 31 }
效果：
