纯css布局实现一头奶牛效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现一头奶牛效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --black: #141416; --pink: #E9BAA7; } body{ background: #05935F; } .box-canvas{ position: relative; margin: auto; display: block; margin-top: 10vmin; margin-bottom: 10vmin; width: 100vmin; height:80vmin; } .tail { width: 5vmin; height: 25vmin; position: absolute; right: 7vmin; box-shadow: 2vmin -2vmin 0 white; border-radius: 50%; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); top: 40vmin; } .tail::before { content: ''; position: absolute; background: white; width: 5vmin; height: 5vmin; border-radius: 51% 49% 40% 60% / 91% 92% 8% 9%; bottom: 0; left: 3vmin; } .body { width: 70vmin; height: 35vmi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0