纯css实现玻璃圆球光线透射效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现玻璃圆球光线透射效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { margin: 0; height: 100%; background-color: rgb(148,147,143); } div { top: 50%; left: 50%; width: 200px; height: 300px; border-radius: 50% 50% 30% 30%; /* border: 1px solid black; */ position: absolute; transform: translate(-120%, 0%) rotateZ(45deg); background-image: radial-gradient( ellipse at top center, rgba(255,255,255,1), transparent 50% ); background-size: 150px 300px; background-position: 10px 0px; background-repeat: no-repeat; box-shadow: -5px -60px 20px 5px rgba(0,0,0,0.4), inset 0px 50px 20px -15px rgba(0,0,0,0.4); } div::before { content: ''; top: -250px; left: -130px; width: 300px; height: 300px; border-radius: 50%; /* border: 1px solid black; */ position: absolute; transform: rotate(-45deg); background-color: rgb(148,147,143); background-image: radial-gradient( circle, rgba(255,255,255,0.3), rgba(255,255,255,0.1) 25%, transparent 50% ), radial-gradient( ellipse, rgba(210, 210, 210, 0.7), transparent 50% ), radial-gradient( ellipse, rgba(210, 210, 210, 0.7), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.7), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.7), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.4), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.5), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.7), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.5), transparent 50% ), radial-gradient( ellipse, rgba(0,0,0,0.1), transparent 60% ), radial-gradient( ellipse, rgba(0,0,0,0.2), transparent 60% ), radial-gradient( ellipse, rgba(57, 57, 57, 0.5), transparent 50% ), radial-gr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0