jquery实现扁平化的待办事ui操作效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现扁平化的待办事ui操作效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.min.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'> <style> body { background: #f7f7f7 url("//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: "Roboto"; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { content: ''; position: fixed; z-index: -1; top: 0; left: 0; background: #16a085; /* IE Fallback */ background: rgba(22, 160, 133, 0.8); width: 100%; height: 100%; } .list { position: absolute; width: 360px; top: 50%; left: 50%; margin: -122px 0 100px -180px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); } .list h1 { position: relative; background: #1abc9c; color: #fff; margin: 0; padding: 10px 20px; font-family: "Roboto"; font-size: 18px; text-transform: uppercase; font-weight: 400; } .list h1 a { position: absolute; top: 50%; right: 20px; background: #fff; /* IE Fallback */ background: rgba(255, 255, 255, 0.15); width: 24px; height: 24px; margin: -12px 0 0 0; color: #fff; font-size: 14px; line-height: 24px; text-align: center; text-decoration: none; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; } .list h1 a:hover { background: rgba(255, 255, 255, 0.2); } .list ul { list-style: none; margin: 0; padding: 0; } .list ul li { background: #fff; height: 40px; color: #666; line-height: 40px; padding: 0 20px 0 0; } .list ul li a { display: inline-block; background: #2ecc71; width: 0px; height: 40px; margin-right: 16px; color: #fff; text-align: center; text-decoration: none; opacity: 0; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; } .list ul li:nth-child(2n) { background: #f7f7f7; } .list ul li:hover a { width: 40px; opacity: 1; } .hoverMe { background: #fff; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0