css绘制一个可爱猫咪效果代码
代码语言:html
所属分类:布局界面
代码描述:css绘制一个可爱猫咪效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { position: relative; display: flex; justify-content: center; align-content: center; height: 100%; display: grid; width: 100%; } .cat { position: relative; display: flex; justify-content: center; align-content: center; background: #ffe6f7; height: 100vmin; width: 100vmin; border-radius: 50%; } .cat-head { position: absolute; display: block; width: 39vmin; height: 35vmin; top: 20vmin; background-color: white; box-shadow: 2vmin -0.9vmin 2vmin -2vmin #feace5, inset -2px -2px 16px 3px #ffe6f7; border-radius: 80% 80% 75% 80% / 80% 80% 90% 90%; transform: rotate(180deg); } /* right cheeks */ .cat-head::after { position: absolute; content: ""; height: 1vmin; width: 1vmin; top: 17vmin; right: 29vmin; border-radius: 50%; background: #fd0e35; box-shadow: -1vmin -6vmin 6vmin 2.5vmin #fd0e35; } /* left-cheeks */ .cat-head::before { position: absolute; content: ""; height: 1vmin; width: 1vmin; top: 17vmin; left: 31vmin; border-radius: 50%; background: #fd0e35; box-shadow: -1vmin -6vmin 6vmin 2.5vmin #fd0e35; } .cat-body { position: absolute; display: block; width: 35vmin; height: 28vmin; top: 48vmin; background-color: white; box-shadow: inset 0px 0px 9vmin 3vmin #ffe6f7; border-radius: 50%; } .cat-body::before { position: absolute; content: ""; height: 1vmin; width: 50%; top: 4vmin; left: 15vmin; top: 10vmin; right: 13vmin; background: ; box-shadow: 3vmin 10vmin 7vmin 0.5vmin #feace5; transform: rotate(-135deg); } .cat-body::after { position: absolute; content: ""; height: 1vmin; width: 50%; top: 10vmin; right: 13vmin; background: ; box-shadow: 3vmin 10vmin 7vmin 0.5vmin #feace5; transform: rotate(160deg); } .eye-l { position: absolute; display: block; width: 8vmin; height: 8vmin; top: 35vmin; left: 37vmin; background-color: black; border-radius: 50%; box-shadow: 0vmin 0vmin 1vmin 0.5vmin #feace5, inset 0vmin 0vmin 1vmin 0.1vmin #2d37de, inset 1.5vmin 0vmin 1vmin -1vmin #31a5f8; transform: rotate(-90deg); } .eye-r { position: absolute; display: block; width: 8vmin; height: 8vmin; top: 35vmin; right: 37vmin; background-color: black; border-radius: 50%; box-shadow: 0vmin 0vmin 1vmin 0.5vmin #feace5, inset 0vmin 0vmin 1vmin 0.1vmin #2d37de, inset 1.5vmin 0vmin 1vmin -1vmin #31a5f8; transform: rotate(-90deg); } .white-dot { position: absolute; width: 2vmin; height: 2vmin; top: 5vmin; right: 2vmin; background-color: white; border-radius: 50%; box-shadow: inset 0vmin 0vmin 0.5vmin 0.1vmin #a8a7bb; } .white-dot::before { position: absolute; content: ""; height: 3vmin; width: 3vmin; top: -3vmin; left: -1vmin; background: ; border-radius: 50%; box-shadow: 1vmin 0vmin 0 0 #555553; transform: rotate(-55deg); } .white-dot::after { position: absolute; content: ""; height: 2.5vmin; width: 2vmin; top: -2vmin; right: 1.9vmin; background: ; border-radius: 50%; box-shadow: 0.5vmin 0vmin 0 0 #515151; transform: rotate(185deg); } .ear-l { position: absolute; width: 22vmin; height: 20vmin; top: 19vmin; left: 29vmin; background-color: white; border-radius: 100vmin 0vmin; box-shadow: 0vmin 0vmin 3vmin 0.2vmin #feace5, inset 0vmin 0vmin 2vmin 0.1vmin #ffe6f7; transform: rotate(-90deg); } .ear-r { position: absolute; width: 22vmin; height: 20vmin; top: 19vmin;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0