div+css实现三维房间沉浸式叠加电视播放效果代码
代码语言:html
所属分类:多媒体
代码描述:div+css实现三维房间沉浸式叠加电视播放效果代码
代码标签: div css 三维 房间 电视 播放 沉浸式 叠加
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { background: black; } .container { position: relative; width: 100vh; height: 100vh; background: black; overflow: hidden; } .center { display: flex; align-items: center; justify-content: center; width: 100vwh; height: 100vh; } img, #tv, #blur { position: absolute; width: 100vh; height: 100vh; } img { z-index: 2; width: 100vh; height: 100vh; } #tv { z-index: 1; transform: rotateX(13deg) rotateY(340deg) rotateZ(24deg) scale(0.4); transform-origin: 79% 39%; } #blur { z-index: 3; opacity: 0.2; filter: blur(8px); top: 1vh; left: 4vh; -webkit-clip-path: polygon(10% 33%, 50% 13%, 91% 33%, 91% 64%, 51% 86%, 11% 64%); clip-path: polygon(10% 33%, 50% 13%, 91% 33%, 91% 64%, 51% 86%, 11% 64%); width: 91vh; height: 100vh; display: block; } #blur:after { content: ""; position: absolute; width: 100vh; height: 100vh; background: linear-gradient(white 15%, black 50%); left: 0; z-index: 100; opacity: 0.4; transform: rotate(45deg); } </style> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0