<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: skyblue } .cloud{ width: 200px; height: 200px; position: relative; margin-top: 50px; margin-left: 100%; animation: piao 5000ms linear infinite; } .cloud li{ list-style: none; width: 50px; height: 50px; background: #fff; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; position: absolute; top: 0; left: 0; } .cloud li:first-child{ top: 5px; left: -20px; } .cloud li:nth-child(2){ top: 25px; left: -40px; } .cloud li:nth-child(3){ top: 5px; left: 20px; } .cloud li:nth-child(4){ top: 25px; left: 40px; } .cloud li:nth-child(5){ top: 25px; left: 0; } .cloud li:nth-child(6){ top: 25px; left: -15px; } .cloud li:nth-child(7){ top: 25px; left: 15px; } .bird{ width: 200px; height: 200px; margin: 0 auto; /*border: 1px solid #fff;*/ position: relative; } .main{ position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background: #fab; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .tail{ position: absolute; top: 80px; left: 30px; border-top: 20px solid #fde; border-bottom: 20px solid transparent; border-right: 20px solid transparent; border-left: 20px solid transparent; } .eyes{ position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background: #fff; border: 2px solid #000; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } .eye{ position: absolute; top: 5px; right: 2px; border: 5px solid #000; width: 10px; height: 10px; background: #fff; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } .mouth{ top: 70px; left: 150px; position: absolute; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #fda; border-right: 20px solid transparent; } .line{ position: absolute; height: 1px; background: #ccc; width: 20px; top: 90px; left: 150px; } .swing{ position: absolute; border-bottom: 20px solid transparent; border-top: 20px solid #fdd; border-left: 20px solid #fdd; border-right: 20px solid transparent; top:120px; left: 70px; transform-origin: top; animation: swing 600ms linear infinite; } @keyframes swing{ 50%{ -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } } @keyframes piao{ 100%{ -webkit-transform: translateX(-1200%); -moz-transform: translateX(-1200%); -ms-transform: translateX(-1200%); -o-transform: translateX(-1200%); transform: translateX(-1200%); } } </style> </head> <body> <div class="cloud"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="bird"> <div class="tail"> </div> <div class="main"> <div class="eyes"> <div class="eye"></div> </div> </div> <div class="swing"> </div> <div class="mouth"> </div> <p class="line"></p> </div> </body> </html>
纯CSS3和HTML5