div+css实现北极熊漂浮冰块动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现北极熊漂浮冰块动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color:#c7f1fd } .container { top:-250px; left:0; position:absolute; animation:float 7s infinite } @keyframes float { 0% { left:50px } 50% { left:-100px } 100% { left:50px } }.water { width:2400px; height:600px; background:#8de3fb; position:absolute; top:500px; left:-50px; z-index:-9 } .bear { position:relative } .head { width:100px; height:90px; background:#f8f8f8; border-radius:20px 20px 20px 20px; position:relative; left:400px; box-shadow:3px 3px 20px #e8e7e7; animation:nod 5s infinite } @keyframes nod { 0% { top:200px } 25% { top:190px } 50% { top:175px } 75% { top:190px } 100% { top:200px } }.jaw { width:82px; height:82px; background:#f8f8f8; border-radius:20px 20px 20px 20px; transform:rotate(45deg); position:relative; left:9px; top:33px; box-shadow:10px 10px 10px #e8e7e7 } .nose { width:25px; height:25px; background:#464646; border-radius:8px 8px 8px 8px; transform:rotate(45deg); position:relative; top:35px; left:35px } .eyes { width:8px; height:8px; border-radius:100%; background:#464646; position:absolute } .pos1 { position:absolute; top:35px; left:5px } .pos2 { position:absolute; top:5px; left:35px } .ears { width:30px; height:30px; border-radius:50% 0 0 50%; background:#d7d7d7; position:relative; border:8px solid #f8f8f8; z-index:-1 } .posi1 { position:absolute; left:-15px; bottom:62px; transform:rotate(45deg) } .posi2 { position:absolute; left:75px; bottom:62px; transform:rotate(135deg) } .bearbody { width:300px; height:180px; border-radius:100px; background:#f8f8f8; position:relative; left:440px; top:120px; z-index:-2 } .leg { width:50px; height:150px; border-radius:0 0 20px 0; background:#f8f8f8 } .leg1 { width:50px; height:150px; background:#a4a4a4; z-index:-3!important } .paw1 { width:30px; height:35px; border-radius:25px 0 0 0; background:#f8f8f8; position:relative; top:115px; right:22px } .paw2 { width:30px; height:35px; border-radius:25px 0 0 0; background:#a4a4a4; position:relative; top:115px; right:22px } .posit1 { position:relative; left:40px; top:90px } .posit2 { position:relative; left:250px; top:-60px } .posit3 { position:absolute; left:450px; top:450px } .posit4 { position:relative; left:660px; top:450px } .icesheet { position:absolute; left:350px; top:558px; width:400px; box-sizing:content-box; border-width:50px 50px 0; border-style:solid; border-color:#eae9e9 transparent; transform:rotate(180deg); z-index:-3 } .icesheet:before { content:""; position:absolute; height:0; width:0; top:-104px; left:-52px; border-width:0 252px 55px; border-style:solid; border-color:transparent transparent #eae9e9 } .edge { position:absolute; border-top:50px solid #d4d4d4; border-left:10px solid transparent; border-right:20px solid transparent; height:0; width:255px; top:-125px; right:-77px; transform:rotate(12deg) } .edge::after { content:""; display:inline-block; position:absolute; border-top:50px solid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0