纯css无div实现杯子效果
代码语言:html
所属分类:布局界面
代码描述:纯css无div实现杯子效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { --background-color: #ebebeb; font-family: helvetica, sans-serif; background-color: var(--background-color); color: #211; transform: translate3d(0, 0, 0); height: 100vh; width: 100vw; } html::before { content: ""; display: block; width: 20vmin; height: 30vmin; background-color: var(--background-color); position: fixed; top: 49%; left: 50%; z-index: -1; border-radius: 50%/43%; transform: translate(-160%, -50%); box-shadow: 1.4vmin -2.1vmin 1.4vmin 1.4vmin rgba(0, 0, 0, 0.1), 0 0.7vmin 1.4vmin 1.4vmin rgba(0, 0, 0, 0.1), 1.4vmin 1.4vmin 1.4vmin 1.4vmin rgba(0, 0, 0, 0.1), 0 -1.4vmin 2.8vmin 0.7vmin #fff, 0 0 1.4vmin 1.4vmin #fff, 0 0 1.4vmin 2.8vmin #cbcbca, 0 0 0 4.2vmin #dedede; } html::after { content: "8"; font-weight: bold; color: #aaa; font-size: 45vmin; position: fixed; top: 50%; left: 50%; z-index: -2; transform: rotateZ(-89deg) scaleX(0.2) translateY(-20vmin) translateX(15vmin); filter: blur(5.5vmin); } body { width: 40vmin; height: 53vmin; left: 50%; top: 48%; display: flex; overflow: hidden; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0