TweenMax实现待办事项列表完成删除动画效果代码
代码语言:html
所属分类:其他
代码描述:TweenMax实现待办事项列表完成删除动画效果代码
代码标签: TweenMax 待办事项 列表 完成 删除 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <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 rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Abril+Fatface|Quicksand|Open+Sans+Condensed:300|Oswald|Catamaran'> <style> body { background: #C33764; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .add_button{ float:right; display:inline; border-radius:50%; height:30px; width:30px; border:2px solid white; margin-top: 15px; margin-right: 10px; text-align: center; cursor:pointer; line-height:25px; vertical-align:middle; } .container { height: 400px; width: 320px; overflow: hidden; font-family: 'Quicksand', sans-serif; color: white; padding: 20px; background-color: rgba(0, 0, 0, 0.15); border-radius: 10px; -webkit-box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.5); -moz-box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.5); box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.5); } .fa-check, .fa-times, .fa-plus { color: white; vertical-align: middle; line-height: 30px; font-size: 20px; } .fa-times, .fa-plus{ left:0.5px; position:relative; } .header { width: 100%; position: relative; height: 65px; background-color: rgba(50, 51, 75, 0.5); text-align: center; vertical-align: middle; line-height: 65px; font-size: 20px; margin-bottom: 3px; } .row { width: 100%; position: relative; height: 65px; background-color: rgba(95, 94, 158, 0.35); margin-bottom: 3px; position: relative; } .text { float: left; text-align: center; vertical-align: middle; line-height: 65px; width: 65%; font-size: 16px; } .check { border: 2px solid white; float: right; height: 30px; width: 30px; border-radius: 50%; margin-top: 15px; margin-right: 10px; text-align: center; cursor:pointer; } .cancel { border: 2px solid white; float: right; height: 30px; width: 30px; border-radius: 50%; margin-top: 15px; margin-right: 10px; text-align: center; cursor:pointer; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; } </style> </head> <body> <div class="content"> <div class="container"> <div class="header"> List </div> <div class="row_container"> <div class="row"> <div class="text"> This is item 1 </div> <div class="button cancel"><i class="f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0