纯css绘制一个眼睛效果
代码语言:html
所属分类:布局界面
代码描述:纯css绘制一个眼睛效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; height: 100vh; } .container .eye { position: relative; width: 20em; height: 20em; margin: 0 auto; background-color: #e0cbc6; border-radius: 100% 0px; -webkit-transform: rotate(45deg); transform: rotate(45deg); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; border: 2px solid #5e481e; overflow: hidden; box-shadow: 5px 16px 20px 0px lightgrey; -webkit-animation: open 0.4s; animation: open 0.4s; } .container .eye:after { content: ""; width: 24em; height: 24em; position: absolute; border-radius: 100%; background-color: white; box-shadow: inset -3px 4px 20px 0px lightgray; } .container .eye .pupil { width: 5em; height: 5em; background-color: black; border-radius: 100%; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .container .eye .iris { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 15em; height: 15em; background-color: #5e481e; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; border-radius: 100%; z-index: 1; box-shadow: 0px 0px 20px 0px #8b451391; margin-bottom: 3em; margin-right: 3em; } .container .eye .iris .iris-1 { height: 14em; width: 14em; box-shadow: 0 0 1px 1px #5e481e; background: -webkit-gradient(linear, left top, right top, color-stop(1%, #5e481e), color-stop(22%, #5e481e), color-stop(50%, #5e481e), color-stop(76%, #5e481e), color-stop(99%, #5e481e)); background: linear-gradient(90deg, #5e481e 1%, #5e481e 22%, #5e481e 50%, #5e481e 76%, #5e481e 99%); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; border-radius: 100%; } .container .eye .iris .iris-2 { height: 13em; width: 13em; box-shadow: 0 0 1px 1px #542a0e; background: -webkit-gradient(linear, left top, right top, color-stop(1%, #542a0e), color-stop(22%, #542a0e), color-stop(50%, #542a0e), color-stop(76%, #542a0e), color-stop(99%, #542a0e)); background: linear-gradient(90deg, #542a0e 1%, #542a0e 22%, #542a0e 50%, #542a0e 76%, #542a0e 99%); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; border-radius: 100%; } .container .eye .iris .iris-3 { height: 12em; width: 12em; box-shadow: 0 0 1px 1px #63390f; background: -webkit-gradient(linear, left top, right top, color-stop(1%, #63390f), color-stop(22%, #63390f), color-stop(50%, #63390f), color-stop(76%, #63390f), color-stop(99%, #63390f)); background: linear-gradient(90deg, #63390f 1%, #63390f 22%, #63390f 50%, #63390f 76%, #63390f 99%); display: -webkit-box; display: flex; -webkit-box-pack: center; justi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0