div+css实现可爱卡通的甜无花果眨眼动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现可爱卡通的甜无花果眨眼动画效果代码
代码标签: div css 可爱 卡通 甜无 花果 眨眼 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ background:#772B11; } .container{ position:relative; width:700px; height:700px; background:#772B11; margin:3px auto; } .higo { position: absolute; top: 0; left: 0; width: 300px; height: 300px; background:#8EEA04; border:7px solid #63CC08; border-radius: 300px 231px 0 231px; transform: rotate(-135deg); margin:231px 90px; } .arriba,.arriba3{ position:absolute; width: 30px; height: 50px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:#DDC366; } .arriba{margin:152px 231px} .arriba3{margin:152px 445px} .higo3{ position: absolute; top: 0; left: 0; width: 250px; height: 250px; background:#FC6C76; border:21px solid #eaeaea; border-radius: 300px 231px 0 231px; transform: rotate(-135deg); margin:231px 312px } .eyes,.eyes3,.eyes7,.eyes9{ position:absolute; width:50px; height:50px; border-radius:100%; background:black; -webkit-animation:cerrar 2.1s alternate infinite; animation:cerrar 2.1s alternate infinite; } .eyes{margin:370px 162px} .eyes3{margin:370px 281px} .eyes7{margin:370px 390px;} .eyes9{margin:370px 500px;} .iris{ position:absolute; width:12px; height:12px; border-radius:100%; background:white; margin:7px 7px; -webkit-animation:shake .21s alternate infinite; animation:shake .21s alternate infinite; } .iris7{ position:absolute; width:7px; height:7px; border-radius:100%; background:white; margin:35px 30px; -webkit-animation:shake .21s alternate infinite; animation:shake .21s alternate infinite; } .boca{ position:absolute; width:35px; height:21px; borde.........完整代码请登录后点击上方下载按钮下载查看
网友评论0