一个div+css实现睡觉表情动画效果代码
代码语言:html
所属分类:动画
代码描述:一个div+css实现睡觉表情动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin:0; height:100vh; background:lightblue; display:grid; place-items:center; } .tired { width:150px; height:150px; border-radius:50%; background: radial-gradient(farthest-side,#2b4114 92%,#0000) 78.8% 52.7% /5px 5px, radial-gradient(farthest-side,#2b4114 92%,#0000) 62.8% 52.7% /5px 5px, radial-gradient(farthest-side,#2b4114 92%,#0000) 49.8% 52.7% /5px 5px, radial-gradient(farthest-side,#2b4114 92%,#0000) 33.8% 52.7% /5px 5px, radial-gradient(circle 15px at 50% -5px,#0000 70%,#2b4114 74% 98%, #0000) 75% 56% /30px 10px, radial-gradient(circle 15px at 50% -5px,#0000 70%,#2b4114 74% 98%, #0000) 40% 56% /30px 10px, radial-gradient(farthest-side,#f6e94b 70%,#f8c735 72% 98%,#0000) 75% 50%/30px 30px, radial-gradient(farthest-side,#f6e94b 70%,#f8c735 72% 98%,#0000) 40% 50%/30px 30px, #F7D758; background-repeat:no-repeat; position:relative; animation:e 4s linear infinite; } .tired:before { content: ""; position: absolute; right: 38%; top: 80%; height: 6px; transform:translateY(-3px); width: 20px; bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0