vue-select-avatar-base/lib/dist/lib.css

基于vue选择头像的包

.__avatar_body{--body-width:100%;--body-height:100%;--body-bg-color:transparent;--cropper-color:rgba(0,0,0,.3);--cropper-opaque-color:#000;--edge-line-width:1px;--edge-line-color:#409eff;--viewfinder-size:300px;--CTT:100ms;--loading-bg-color:hsla(0,0%,100%,.96);--loading-icon-color:#409eff;--loading-text-color:#409eff;--loading-error-text-color:#f56c6c;width:var(--body-width);height:var(--body-height);background-color:var(--body-bg-color);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.__avatar_body.__grid_bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.__avatar_body .__image_container{width:var(--viewfinder-size);height:var(--viewfinder-size);position:relative}.__avatar_body .__image_container img{position:absolute;left:0;top:0;transform:translate(var(--x),var(--y));-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:grab;will-change:transform,width,height}.__avatar_body .__image_container img:active{cursor:grabbing!important}.__avatar_body .__image_container img.__transition{transition:transform var(--CTT)}.__avatar_body .__cropper{position:absolute;background-color:var(--cropper-color);transition:background-color .24s;z-index:4;box-sizing:border-box}.__avatar_body .__cropper.top{left:0;top:0;width:100%;height:calc((100% - var(--viewfinder-size))/2)}.__avatar_body .__cropper.right{right:0;top:calc((100% - var(--viewfinder-size))/2);width:calc((100% - var(--viewfinder-size))/2);height:var(--viewfinder-size)}.__avatar_body .__cropper.bottom{left:0;bottom:0;width:100%;height:calc((100% - var(--viewfinder-size))/2)}.__avatar_body .__cropper.left{left:0;top:calc((100% - var(--viewfinder-size))/2);width:calc((100% - var(--viewfinder-size))/2);height:var(--viewfinder-size)}.__avatar_body:not(.__opaque_cropper).__edge_line .__cropper.top:after{content:"";display:block;position:absolute;border-bottom:var(--edge-line-width) solid var(--edge-line-color);left:calc((100% - var(--viewfinder-size))/2 - 1px);bottom:0;width:calc(var(--viewfinder-size) + 2px)}.__avatar_body:not(.__opaque_cropper).__edge_line .__cropper.right{border-left:var(--edge-line-width) solid var(--edge-line-color)}.__avatar_body:not(.__opaque_cropper).__edge_line .__cropper.bottom:after{content:"";display:block;position:absolute;border-bottom:var(--edge-line-width) solid var(--edge-line-color);left:calc((100% - var(--viewfinder-size))/2 - 1px);top:0;width:calc(var(--viewfinder-size) + 2px)}.__avatar_body:not(.__opaque_cropper).__edge_line .__cropper.left{border-right:var(--edge-line-width) solid var(--edge-line-color)}.__avatar_body.__opaque_cropper .__cropper{background-color:var(--cropper-opaque-color)}.__avatar_body .__loading_mask{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:2000;background-color:var(--loading-bg-color);display:flex;align-items:center}.__avatar_body .__loading_mask .__loading_inner{width:100%;text-align:center}.__avatar_body .__loading_mask .__loading_inner .__circular{width:40px;height:40px;animation:__loading_rotate 2s linear infinite}.__avatar_body .__loading_mask .__loading_inner .__circular circle{stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#409eff;stroke-linecap:round;animation:__loading_dash 1.5s ease-in-out infinite}.__avatar_body .__loading_mask .__loading_inner .__loading_text{color:var(--loading-text-color);margin-top:6px;font-size:14px}.__avatar_body .__loading_mask .__loading_inner .__loading_text.__error{color:var(--loading-error-text-color)}@keyframes __loading_rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes __loading_dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.__avatar_body .__loading-enter,.__avatar_body .__loading-leave-to{opacity:0}.__avatar_body .__loading-enter-active,.__avatar_body .__loading-leave-active{transition:opacity .15s}.__avatar_body .__loading-enter-to,.__avatar_body .__loading-leave{opacity:1}