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; border-radius:0 0 50px 50px; background:black; } .boca{ margin:430px 229px; -webkit-animation:go 2.1s alternate infinite; animation:go 2.1s alternate infinite; } .boca9{ position:absolute; width:30px; height:30px; border-radius:100%; background:black; margin:412px 453px; -webkit-animation:go 2.1s alternate infinite; animation:go 2.1s alternate infinite; } .boca7, .boca12{ position:absolute; background:#E00B44; } .boca7{ margin:5px 8px; width:19px; height:9px; border-radius:0 0 50px 50px;} .boca12{ margin:8px 7px; width:16px; height:16px; border-radius:100%;} .circu{ position:absolute; margin:291px 385px; opacity:.3; } .circu3{ position:absolute; margin:300px 395px; opacity:.3; transform:scale(.9) } .circ{ position:absolute; background: #C90046; width: 162px; height: 162px; text-align: center; } .circ::before, .circ::.........完整代码请登录后点击上方下载按钮下载查看
网友评论0