一个div+css布局实现敏捷狐狸效果代码
代码语言:html
所属分类:布局界面
代码描述:一个div+css布局实现敏捷狐狸效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { min-height: 300px; height: 100vh; position: relative; background-color: #ff6347; text-align: center; } div { position: absolute; left: 50%; top: 50%; } div:before, div:after { display: block; content: ''; position: absolute; } #quick { width: 18em; height: 9em; margin-left: -9em; margin-top: -1.5em; background-repeat: no-repeat; background-image: radial-gradient(circle at 50% 13em, rgba(160,82,45,0) 60%, #a0522d 60.1%), radial-gradient(ellipse at 100% 120%, transparent 65%, #703a20 65.5%), radial-gradient(ellipse at 0 120%, transparent 65%, #703a20 65.5%), radial-gradient(circle, black 50%, rgba(0,0,0,0) 51%), radial-gradient(circle, black 50%, rgba(0,0,0,0) 51%), radial-gradient(ellipse, black 50%, rgba(0,0,0,0) 52%), radial-gradient(ellipse, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 51%), radial-gradient(ellipse at 50% 20%, #f5deb3 60%, rgba(255,255,255,0) 61%), radial-gradient(circle, #daa520 50%, rgba(218,165,32,0) 51%), radial-gradient(ellipse at 50% 20%, #dc143c 60%, rgba(220,20,60,0) 61%), radial-gradient(ellipse at 50% 80%, #f5deb3 60%, rgba(255,255,255,0) 61%), radial-gradient(ellipse at 0 100%, #f5deb3 60%, rgba(255,255,255,0) 61%), radial-gradient(ellipse at 100% 100%, #f5deb3 60%, rgba(255,255,255,0) 61%), radial-gradient(ellipse at 60% 80%, #f5deb3 60%, rgba(255,255,255,0) 61%), radial-gradient(ellipse at 20% 80%, #f5deb3 60%, rgba(255,255,255,0) 61%); background-size: 100% 100%, 40% 80%, 40% 80%, 0.4em 0.4em, 0.4em 0.4em, 1.2em 0.8em, 2.8em 2em, 4.9em 2.5em, 1em 1e.........完整代码请登录后点击上方下载按钮下载查看
网友评论0