css+js实现互动立体眼珠眼球效果代码
代码语言:html
所属分类:其他
代码描述:css+js实现互动立体眼珠眼球效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #dc5; padding: 20px; overflow: hidden; } .eyeball { position: absolute; width: 200px; height: 200px; bottom: 0; left: 100px; transform: translate(-50%, 0px); border-radius: 50%; display: inline-block; margin: 4px; transition: left 0.3s ease-in-out; box-shadow: 0 2px 40px rgba(0, 0, 0, 0.3); background: #fff radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.5) 100%); } .eyeball::before, .eyeball::after { position: absolute; content: ""; border-radius: 50%; transition: transform 0.3s ease-in-out; } .eyeball::before { width: 66%; height: 66%; background-color: #ddd; background-image: radial-gradient(ellipse, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.5) 100%); top: 17%; left: 17%; } .eyeball::after { width: 24%; height: 24%; background: #000; background: radial-gradient(circle at 70% 30%, white 0%, white 16%, black 19%); top: 38%; left: 38%; } .eyeball.yellow:before { background-color: #fe7; } .eyeball.blue:before { background-color: #5ae; } .eyeball.green:before { background-color: #ae5; } .eyeball.down::before { transform: translate(0, 10%); } .eyeball.down::after { transform: translate(0, 60%); } .eyeball.up-right::before { transform: translate(10%, -10%); } .eyeball.up-right::after { transform: translate(60%, -60%); } .eyeball.right::before { transform: translate(15%, 0%); } .eyeball.right::after { transform: translate(80%, 0%); } .eyeball.left::before { transform: translate(-15%, 0%); } .eyeball.left::after { transform: translate(-80%, 0%); } </style> </head> <body >.........完整代码请登录后点击上方下载按钮下载查看
网友评论0