three打造彩虹线条运动效果代码
代码语言:html
所属分类:动画
代码描述:three打造彩虹线条运动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; } </style> <style type="text/css"> .dg ul { list-style: none; margin: 0; padding: 0; width: 100%; clear: both } .dg.ac { position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 0 } .dg:not(.ac) .main { overflow: hidden } .dg.main { -webkit-transition: opacity .1s linear; -o-transition: opacity .1s linear; -moz-transition: opacity .1s linear; transition: opacity .1s linear } .dg.main.taller-than-window { overflow-y: auto } .dg.main.taller-than-window .close-button { opacity: 1; margin-top: -1px; border-top: 1px solid #2c2c2c } .dg.main ul.closed .close-button { opacity: 1 !important } .dg.main:hover .close-button,.dg.main .close-button.drag { opacity: 1 } .dg.main .close-button { -webkit-transition: opacity .1s linear; -o-transition: opacity .1s linear; -moz-transition: opacity .1s linear; transition: opacity .1s linear; border: 0; line-height: 19px; height: 20px; cursor: pointer; text-align: center; background-color: #000 } .dg.main .close-button.close-top { position: relative } .dg.main .close-button.close-bottom { position: absolute } .dg.main .close-button:hover { background-color: #111 } .dg.a { float: right; margin-right: 15px; overflow-y: visible } .dg.a.has-save>ul.close-top { margin-top: 0 } .dg.a.has-save>ul.close-bottom { margin-top: 27px } .dg.a.has-save>ul.closed { margin-top: 0 } .dg.a .save-row { top: 0; z-index: 1002 } .dg.a .save-row.close-top { position: relative } .dg.a .save-row.close-bottom { position: fixed } .dg li { -webkit-transition: height .1s ease-out; -o-transition: height .1s ease-out; -moz-transition: height .1s ease-out; transition: height .1s ease-out; -webkit-transition: overflow .1s linear; -o-transition: overflow .1s linear; -moz-transition: overflow .1s linear; transition: overflow .1s linear } .dg li:not(.folder) { cursor: auto; height: 27px; line-height: 27px; padding: 0 4px 0 5px } .dg li.folder { padding: 0; border-left: 4px solid rgba(0,0,0,0) } .dg li.title { cursor: pointer; margin-left: -4px } .dg .closed li:not(.title),.dg .closed ul li,.dg .closed ul li>* { height: 0; overflow: hidden; border: 0 } .dg .cr { clear: both; padding-left: 3px; height: 27px; overflow: hidden } .dg .property-name { cursor: default; float: left; clear: left; width: 40%; overflow: hidden; text-overflow: ellipsis } .dg .c { float: left; width: 60%; position: relative } .dg .c input[type=text] { border: 0; margin-top: 4px; padding: 3px; width: 100%; float: right } .dg .has-slider input[type=text] { width: 30%; margin-left: 0 } .dg .slider { float: left; width: 66%; margin-left: -5px; margin-right: 0; height: 19px; margin-top: 4px } .dg .slider-fg { height: 100% } .dg .c input[type=checkbox] { margin-top: 7px } .dg .c select { margin-top: 5px } .dg .cr.function,.dg .cr.function .property-name,.dg .cr.function *,.dg .cr.boolean,.dg .cr.boolean * { cursor:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0