css实现文件及文件下载动画效果代码-html代码-BFW代码库

css实现文件及文件下载动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现文件及文件下载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
        	box-sizing:border-box
        }
        html,body {
        	margin:0;
        	padding:0;
        	position:relative;
        	width:100%;
        	height:100%;
        	background-color:#2196f3
        }
        .page {
        	height:100%;
        	display:-webkit-flex;
        	display:flex;
        	-webkit-align-items:center;
        	align-items:center;
        	-moz-box-align:center;
        	-webkit-box-pack:center;
        	-webkit-justify-content:center;
        	justify-content:center;
        	-moz-box-pack:center;
        	-ms-flex-pack:center
        }
        .folder {
        	background-color:#d3eafd;
        	position:relative;
        	width:92px;
        	height:64px;
        	display:block;
        	border-top-right-radius:8px;
        	border-bottom-right-radius:8px;
        	border-bottom-left-radius:8px
        }
        .folder-tab {
        	position:absolute;
        	height:10px;
        	left:0;
        	bottom:100%;
        	display:block;
        	width:40%;
        	border-top-left-radius:8px;
        	background-color:inherit
        }
        .folder-tab:after {
        	content:'';
        	position:absolute;
        	display:block;
        	top:0;
        	left:calc(100% - 10px);
        	border-bottom:10px solid #d3eafd;
        	border-left:10px solid transparent;
        	border-right:10px solid transparent
        }
        .folder-icn {
        	padding-top:12px;
        	width:100%;
        	height:100%;
        	display:block
        }
        .downloading {
        	width:30px;
        	height:32px;
        	margin:0 auto;
        	position:relative;
        	overflow:hidden
        }
        .custom-arrow {
        	width:14px;
        	height:14px;
 .........完整代码请登录后点击上方下载按钮下载查看