div+css布局实现哆啦A梦眼球转动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css布局实现哆啦A梦眼球转动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; } .body { background-color: #199bb5; width: 10vw; height: 9vw; position: absolute; top: 13vw; left: 2.5vw; } .helicopter { height: 100px; weight: 1px; border-left: 1px solid yellow; position: absolute; } .head { border-radius: 50%; background-color: #199bb5; width: 15vw; height: 14vw; position: absolute; top: 15vw; left: 45vw; } .tummy { border-radius: 90%; background-color: white; width: 8vw; height: 6vw; position: absolute; top: 2.3vw; left: 1vw; border: 0.5px solid black; } .tummy_pocket { border-radius: 50%; background-color: whitesmoke; width: 5vw; height: 4.5vw; position: absolute; border: 0.5px solid black; top: 0.6vw; left: 1.4vw; } .tummy_pocket_margin { background-color: white; border-bottom: 0.5px solid black; width: 5.1vw; height: 1.5vw; position: absolute; top: 0vw; left: 0vw; } .face { height: 11vw; width: 12vw; background-color: whitesmoke; border-radius: 48%; position: absolute; top: -7vw; left: -1.6vw; } .eye1 { height: 3vw; width: 2.4vw; background-color: white; border: 1px solid black; border-radius: 48%; position: absolute; top: -1vw; left: 3.5vw; } .eye2 { height: 3vw; width: 2.4vw; background-color: white; border: 1px solid black; border-radius: 48%; position: absolute; top: -1vw; left: 6vw; } .irish1 { height: 1vw; width: 1vw; background-color: black; border-radius: 49%; position: absolute; top: 1vw; left: 1vw; animation: irish1move 1.5s infinite; } .irish2 { height: 1vw; width: 1vw; background-color: black; border-radius: 49%; position: absolute; top: 1vw; left: 1vw; animation: irish2move 1.5s infinite; } @keyframes irish1move { 0% { left: 0%; } 50% { left: 45%; } 100% { left: 0%; } } @keyframes irish2move { 0% { left: 0%; } 50% { left: 45%; } 100% { left: 0%; } } .nose { height: 2vw; width: 2vw; background-color: red; border-radius: 49%; position: absolute; top: 1vw; left: 5vw; border: 0.5px solid black; } .noseShine { height: 1vw; width: 1vw; top: 1px; left: 1vw; background-color: #edcece; border-radius: 49%; position: absolute; } .nose-line { height: 3.5vw; weight: 1px; border-left: 1px solid black; position: absolute; left: 3vw; top: -1vw; } .mustache_left_1 { height: 3.5vw; weight: 1px; border-left: 1px solid black; position: absolute; left: 3vw; top: -1vw; transform: rotate(80deg); } .mustache_left_2 { height: 3.5vw; weight: 1px; border-left: 1px solid black; position: absolute; left: 3vw; top: 0vw; transform: rotate(90deg); } .mustache_left_3 { height: 3.5vw; weight: 1px; border-left: 1px solid black; position: absolute; left: 3vw; top: 1vw; transform: rotate(100deg); } .mustache_right_1 { height: 3.5vw; weight: 1px; border-left: 1px solid black; position: absolute; left: -3vw; top: -1vw; transform: rotate(100deg); } .mustache_right_2 { height: 3.5vw; weight: 1px; border-left: 1px solid black; position: absolute; left: -3vw; top: 0vw; transform: rotate(90deg); } .mustache_right_3 { height: 3.5vw; weight: 1px; border-left: 1px solid black; position: absolute; left: -3vw; top: 1vw; transform: rotate(80deg); } .mouth { height: 6vw; width: 6vw; background-color: #bf1a28; border-radius: 49%; position: absolute; top: 4vw; left: 3vw; border: 0.5px solid black; } .mouth1 { height: 2vw; width: 4vw; background-color: #d83a47; border-radius: 49%; position: absolute; top: 4vw; left: 1vw; border: 0.5px solid #831918; } .mouth2 { height: 3vw; width: 14vw; background-color: white; border-radius: 2vw; position: absolute; top: -0.6vw; left: -4vw; } .bell { height: 2vw; width: 2vw; background-color: #ffe164; border-radius: 50%; position: absolute; top: 4vw; left: 3.5vw; border: 0.4px solid black; } .bell-hole { height: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0