css实现美丽的背景渐变效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现美丽的背景渐变效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body, html { position: relative; width: 100%; height: 100%; } ul { margin: 0; padding: 0; width: 100%; height: 100%; position: relative; } li { display: inline-block; height: 100%; width: 25%; border-right: 1px solid white; cursor: pointer; position: absolute; top: 0; transition: .3s width .2s, left .2s, 100ms z-index .6s; } li:nth-child(2) { left: 25%; } li:nth-child(3) { left: 50%; } li:nth-child(4) { left: 75%; } li.active { width: 100%; z-index: 1; transition: .3s width .2s, left .2s; border-right: none; left: 0; } li:before { content: "Click to Expand"; display: block; width: 100%; height: 100%; font-weight: bold; background-color: rgba(255, 255, 255, 0.2); text-align: center; padding-top: 40%; color: white; position: absolute; top: 1; left: 1; transition: 200ms opacity; opacity: 0; } li:hover:before { opacity: 1; } li:hover.active:hover:before { display: none; } div { background: -webkit-radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.2)), -webkit-linear-gradient(108deg, #e5e9bf 10%, #00396f 90%); width: 100%; height: 100%; transition: 1s width; } li:nth-child(2) div { background: -webkit-radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0