滾動的泡泡以及iphone25代的製作（有點醜）
阿新 • • 發佈：2018-12-17
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { background-color: #ccc; } .content { margin: 50px auto; width: 345px; height: 100px; background: url(img/paopao.png) no-repeat left top, url(img/paopao.png) no-repeat right bottom; background-color: blue; /*注意背景顏色寫在背景圖片的後邊,這樣才可以顯示*/ transition: all 5s linear; } .content:hover { background-position: left bottom, right top; } </style> </head> <body> <div class="content"></div> </body> </html>
*這塊對於background-position的理解，還有注意就是盒子的背景顏色一定在背景圖片之後寫入。（具體不太清楚應該是優先性級別）
在這裡插入程式碼片<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { background-color: #808080; } .iphone { margin: 50px auto; width: 300px; height: 600px; background-color: #2e2e2e; border: 10px solid #3b3b3b; border-radius: 55px; position: relative; box-shadow: 3px 5px 5px rgba(0,0,0,0.5); } .listen { width: 6px; height: 6px; background-color: #1a1a1a; border: 3px solid #4a4a4a; border-radius: 6px; top: 30px; left: 50%; margin-left: -8px; position: absolute; box-shadow: 2px 2px 3px rgba(0,0,0,0.5); } .speaker { width: 60px; height: 5px; background-color:#1a1a1a; border: 5px solid #4a4a4a; border-radius: 10px; top: 50px; left: 50%; margin-left: -35px; position: absolute; box-shadow: 2px 2px 3px rgba(0,0,0,0.5); } .screen { margin: 80px auto 0; width: 250px; height: 450px; background-color: #2e2e2e4d; border: 4px solid #1a1a1a; font: 35px "微軟雅黑"; text-align: center; line-height: 450px; color: white; position: relative; } .screen::before { content: ""; width: 250px; height: 450px; position: absolute; } .home { width: 50px; height: 50px; background-color: #000000; border-radius: 50%; margin: 5px auto 0; position: relative; box-shadow: 2px 2px 2px rgba(0,0,0,0.2) inset; } .home::before { content: ""; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.7); border-radius: 3px; top: 50%; left: 50%; margin-left: -12px; margin-top: -12px; position: absolute; } .iphone::after { content: ""; position: absolute; height: 45px; width: 6px; background-color: #2e2e2e; left: -16px; top: 100px; } </style> </head> <body> <div class="iphone"> <div class="listen"></div> <div class="speaker"></div> <div class="screen">iphonex</div> <div class="home"></div> </div> </div> </body> </html>
1，此處對於偽元素選擇器before和after的理解應用，注意其中的規範化格式。, 2，盒子邊框的使用：border-radius 3，對於絕對定位（absolute）和相對定位（relative）的理解。