666！CSS制作的逼真人眼（带3D视觉效果和人体皮肤背景）

eye with light and shadow, made with pure css box-shadow

css, eye

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3213
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@charset "utf-8";
* {
    padding: 0;
    margin: 0;
}
html {
    font-size: 62.5%;
}
body {
    background-color: rgba(235, 235, 235, 1);
    height: 100%;
    width: 100%;
    position: relative;
}
.box {
    height: 17rem;
    width: 20rem;
    position: absolute;
    top: 400px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.stage {
    height: 100%;
    width: 100%;
    position: relative;
}
/** 轮廓 **/

.eye {
    /*borderは削除した*/
    
    border-radius: 0% 145% 0% 193%/0% 134% 0% 193%;
    height: 17rem;
    width: 20rem;
    box-shadow: 0 .1rem 5rem 1.5rem rgba( 40, 0, 0, 1)inset, 1rem 0rem 0rem -0.6rem rgba( 180, 45, 0, 1)inset, -1rem -0.1rem 1rem -0.9rem rgba( 255, 255, 255, .9), -4rem -4.1rem 6rem -0.5rem rgba( 0, 0, 0, .9), -2rem 2.9rem 5rem 0.1rem rgba( 197, 143, 132, .9), -1rem 0.9rem 2rem -0.9rem rgba( 255, 255, 255, .9), -1rem -0.1rem 1rem -0.5rem rgba( 0, 0, 0, .9), -.1rem -.9rem .1rem .3rem rgba( 0, 0, 0, 0.5), -1.3rem .9rem 2.9rem -.1rem rgba( 255, 255, 255, 0.3), -.6rem -1.4rem 2.1rem 1.3rem rgba( 171, 137, 125, 1), -.3rem -2rem .3rem .9rem rgba( 0, 0, 7, 1), -0.3rem -3rem 1.3rem 0.9rem rgba( 255, 255, 255, .6), -.8rem -.9rem .6rem 1rem rgba( 0, 0, 7, 0.5), -1.5rem .1rem 1rem .3rem rgba( 177, 116, 98, 1), -2.2rem 2rem 3rem 0rem rgba( 125, 88, 65, 1), 0 .1rem 2rem 3rem rgba( 210, 167, 145, 0.5), -2.5rem -3.3rem 9rem 7rem rgba( 210, 167, 145, 0.8);
    position: absolute;
    transform: rotate( -30deg);
    overflow: hidden;
}
/** 目玉 **/

.eye::before {
    content: "";
    background: rgba( 0, 0, 0, .9);
    border-radius: 50%;
    box-shadow: 0 0 1rem .7rem rgba( 34, 43, 22, 1), 0 0 1.5rem 1.8rem rgba(125, 143, 220, 0.5), 0 0 1.5rem 4rem rgba(123, 169, 196, 1), 0 0 .8rem 4.5rem rgba(3, 3, 20, 1), 0 0 1.5rem 22rem rgba(187, 185, 212, 0.2);
    color: rgba(70, 70, 74, 0);
    font-size: 1.7rem;
    height: 4rem;
    width: 4rem;
    position: absolute;
    top: 6rem;
    left: 10rem;
}
.eye::after {
    content: "";
    border-radius: 50%;
    box-shadow: 6.5rem 9.5rem 1.4rem -1.2rem rgba(54, 23, 54, 1), 6.5rem 9rem 1.4rem -1.2rem rgba( 213, 188, 213, 1), 8.2rem 7.6rem 1.4rem -1.2rem rgba( 213, 188, 213, 1), 7rem 10.5rem 2rem 0 rgba(164, 143, 140, 0.5), 10.5rem 12rem 1rem 4rem rgba(181, 103, 108, 1);
    color: rgba(70, 70, 74, 0);
    font-size: 1.7rem;
    height: 4rem;
    width: 4rem;
    position: absolute;
    top: 6rem;
    left: 10rem;
}
.light {
    height: 100%;
    width: 100%;
    position: absolute;
}
.light::before {
    content: "";
    border-radius: 50%;
    box-shadow: -2.5rem -.4rem .4rem 0 rgba( 255, 255, 255, 0.9);
    height: 1rem;
    width: 1rem;
    position: absolute;
    top: 6rem;
    left: 10rem;
}
.light::after {
    content: "";
    background: rgba( 255, 255, 255, 0);
    box-shadow: 0 0 1rem .5rem rgba( 255, 255, 255, 1);
    height: 4rem;
    position: absolute;
    top: 5rem;
    left: 4rem;
    transform: rotate( -102deg);
}

HTML

eye with light and shadow, made with pure css box-shadow

css, eye

编辑器支持Emmet

快捷键

eye with light and shadow, made with pure css box-shadow

css, eye

使用CSS3制作逼真的3D云彩动画特效

纯CSS制作的带光照效果的3D星球

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：