div+css实现菲利普斯色调动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现菲利普斯色调动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ background:#111; padding:2vw; color:white } @keyframes glow{ 0%{ box-shadow:0 0 20px 5px rgba(181,184,255,0.4); } 100%{ box-shadow:0 0 20px 30px rgba(181,184,255,0.4); } } .hueBridge{ width:200px; height:200px; margin:auto; position:relative; transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg); } .hueBridge .background{ position:absolute; top:0; left:0; width:100%; height:100%; background:#333; border-radius:50px; z-index:10; border:2px solid white; box-shadow:inset 10px -20px 80px rgba(0,0,0,0.5); } .hueBridge:before, .hueBridge:after{ content:''; position:absolute; display:block; z-index:-10; background:#222; } .hueBridge:before{ left:0px; top:0px; width:200px; height:200px; border-right:none; border-radius:50px; margin:auto; position:relative; transform: translate3d(-50px, 50px, 0); border:2px solid white; } .hueBridge:after{ content:''; width: 244px; height: 68px; border-left: 2px solid white; border-right: 2px solid white; transform: rotateZ(45deg) trans.........完整代码请登录后点击上方下载按钮下载查看
网友评论0