web-library
/
CssBeauty.css

/*
* @Author:  siyuan
* @Email:   2039750417@qq.com
* @Funname: 阿里妈妈底部效果
* */
.index-nav-map-wrap .bubble {
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #1e2438;
    color: #1e2438;
    box-shadow: 10em 0 0 .01em, 20em 0 0 .01em, 30em 0 0 .01em, 40em 0 0 .01em, 12em 0 0 .01em, 17em 0 0 .01em, 25em 0 0 .01em, 37em 0 0 .01em, -10em 0 0 .01em, -20em 0 0 .01em, -30em 0 0 .01em, -40em 0 0 .01em, -12em 0 0 .01em, -17em 0 0 .01em, -25em 0 0 .01em, -37em 0 0 .01em, 10em -0.1em 0 .01em, 20em -0.2em 0 .01em, 30em -0.3em 0 .01em, 40em -0.1em 0 .01em, 17em -0.3em 0 .01em, 17em -0.2em 0 .01em, 25em -0.1em 0 .01em, 37em -0.2em 0 .01em, -11em -0.5em 0 .01em, -20em -0.3em 0 .01em, -30em -0.2em 0 .01em, -40em -0.1em 0 .01em, -15em -0.2em 0 .01em, -17em -0.3em 0 .01em, -25em -0.4em 0 .01em, -37em -0.2em 0 .01em, -11em 0 0 .01em, 10.6em 0 0 .01em, 12.5em 0 0 .01em, 13.6em 0 0 .01em, -5em 0 0 .01em, -6em 0 0 .01em, -7.4em 0 0 .01em, -9.2em 0 0 .01em, 5em 0 0 .01em, 6em 0 0 .01em, 7.4em 0 0 .01em, 9.2em 0 0 .01em, 1em 0 0 .01em, 2em .1em 0 .01em, 4em .2em 0 .01em, 3.2em .5em 0 .01em, -1em .5em 0 .01em, -2em .3em 0 .01em, -4em .1em 0 .01em, -3.2em .2em 0 .01em;
    border-radius: 50%;
}
.index-nav-map-wrap:hover .bubble {
    animation: 2s bubble-up infinite;
}
@keyframes bubble-up {
    100% {
        box-shadow: 10em -11em 0 .01em, 20em -17em 0 .01em, 30em -20em 0 .01em, 40em -30em 0 .01em, 12em -12em 0 .01em, 17em -5em 0 .01em, 25em -16em 0 .01em, 37em -22em 0 .01em, -10em -32em 0 .01em, -20em -12em 0 .01em, -30em -11em 0 .01em, -40em -13em 0 .01em, -12em -15em 0 .01em, -17em -9em 0 .01em, -25em -14em 0 .01em, -37em -21em 0 .01em, 10em -17em 0 .01em, 20em -21em 0 .01em, 30em -11em 0 .01em, 40em -19em 0 .01em, 17em -23em 0 .01em, 17em -10em 0 .01em, 25em -14.5em 0 .01em, 37em -12.9em 0 .01em, -11em -21.3em 0 .01em, -20em -22.4em 0 .01em, -30em -15.3em 0 .01em, -40em -19.2em 0 .01em, -15em -21.3em 0 .01em, -17em -22.4em 0 .01em, -25em -10.3em 0 .01em, -37em -9.3em 0 .01em, -11em -22.4em 0 .01em, 10.6em -20.4em 0 .01em, 12.5em -6.9em 0 .01em, 13.6em -8.3em 0 .01em, -5em -21.4em 0 .01em, -6em -13em 0 .01em, -7.4em -15em 0 .01em, -9.2em -22em 0 .01em, 5em -30em 0 .01em, 6em -24em 0 .01em, 7.4em -11em 0 .01em, 9.2em -9.4em 0 .01em, 1em -22em 0 .01em, 2em -14em 0 .01em, 4em -21em 0 .01em, 3.2em -16em 0 .01em, -1em -21em 0 .01em, -2em -19em 0 .01em, -4em -17em 0 .01em, -3.2em -15em 0 .01em;
        bottom: 200px;
        opacity: 0;
    }
}

/*
* @Author:  siyuan
* @Email:   2039750417@qq.com
* @Funname: 元素一道光
* */
.warp li .tu .light{position:absolute;left:-170px;top:0;width:141px;height:131px;/* 根据图像高度自行修改 */background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));transform: skewx(-25deg);-o-transform: skewx(-25deg);-moz-transform: skewx(-25deg);-webkit-transform: skewx(-25deg);}
.warp li:hover .tu .light{ left:141px;/* 根据图像宽度自行修改 */ -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s; transition:0.5s; }

/*
* @Author:  siyuan
* @Email:   2039750417@qq.com
* @Funname: 动感手机站菜单按钮
* */
.sykui-menu { display: none; z-index: 99999; cursor: pointer; overflow: hidden; position: relative; width: 30px; height: 25px; margin-right: 20px; }
.sykui-menu span, .sykui-menu:after, .sykui-menu:before{ border-radius: 20px;transition: 0.3s;-ms-transition: 0.3s; /* Internet Explorer */-moz-transition: 0.3s; /* Firefox */-webkit-transition: 0.3s; /* Safari 和 Chrome */-o-transition: 0.3s; /* Opera */display: block;position: absolute;content: "";display: block;height: 3px;background: #fff;width: 30px;}
.sykui-menu span{top: 50%;right: 0px;margin-top: -1.5px;transition: 0.1s;-ms-transition: 0.1s; /* Internet Explorer */-moz-transition: 0.1s; /* Firefox */-webkit-transition: 0.1s; /* Safari 和 Chrome */-o-transition: 0.1s; /* Opera */}
.sykui-menu:after{bottom: 0px;}
.sykui-menu:before{top: 0px;}
.sykui-menu.exit-open { position: absolute; top: 20px; right:0; }
.sykui-menu.exit-open span{right: -100%;transition: 0.3s;-ms-transition: 0.3s; /* Internet Explorer */-moz-transition: 0.3s; /* Firefox */-webkit-transition: 0.3s; /* Safari 和 Chrome */-o-transition: 0.3s; /* Opera */}
.sykui-menu.exit-open:after{transition-delay: 0.3s;bottom: 11px;/* Rotate div */transform: rotate(45deg);-ms-transform: rotate(45deg); /* Internet Explorer */-moz-transform: rotate(45deg); /* Firefox */-webkit-transform: rotate(45deg); /* Safari 和 Chrome */-o-transform: rotate(45deg); /* Opera */}
.sykui-menu.exit-open:before{transition-delay: 0.3s;top: 11px;/* Rotate div */transform: rotate(-45deg);-ms-transform: rotate(-45deg); /* Internet Explorer */-moz-transform: rotate(-45deg); /* Firefox */-webkit-transform: rotate(-45deg); /* Safari 和 Chrome */-o-transform: rotate(-45deg); /* Opera */}

/*
* @Author:  siyuan
* @Email:   2039750417@qq.com
* @Funname: 手机站通用导航弹框 Less
* */
.header-lnline{.sykui-menu{display:block}.sykui-navCol{opacity:0;visibility:hidden;transform:rotate(15deg);display:block;margin:0;padding:0;position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;text-align:center;background:rgba(0,0,0,0.899);background:-moz-linear-gradient(top,rgba(0,0,0,0.678) 0,rgba(0,0,0,0.988) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0.678)),color-stop(100%,rgba(0,0,0,0.988)));background:-webkit-linear-gradient(top,rgba(0,0,0,0.678) 0,rgba(0,0,0,0.89) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0.678) 0,rgba(0,0,0,0.988) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0.678) 0,rgba(0,0,0,0.988) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0.678) 0,rgba(0,0,0,0.988) 100%)}.sykui-navCol ul{display:inline-block;margin-top:10%}.sykui-navCol li{transition:all .3s ease 0s;position:relative;padding-top:40px}.sykui-navCol li a{position:relative;transition:all .3s ease 0s;font-size:26px;font-weight:bold;color:#fff;text-decoration:none;border-radius:5px}.sykui-navCol li a::after{visibility:hidden;opacity:0;content:"";width:25px;height:4px;background:#f09d21;position:absolute;left:-80px;top:28px;transition:all .3s ease 0s;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.sykui-navCol li:hover a{color:#f09d21}.sykui-navCol li a:hover::after{visibility:visible;left:-40px;opacity:1}.sykui-navCol .menu-exit{position:fixed;z-index:99;top:0;right:0;cursor:pointer;padding:20px}.sykui-navCol .menu-exit i{font-size:40px;color:#fff}.sykui-navCol.hide{opacity:0;visibility:hidden;top:0;left:auto;right:0;transform:rotate(15deg)}.sykui-navCol.active{opacity:1;visibility:visible;transition:all .3s ease 0s;transform:rotate(0deg)}.sykui-navCol.active .bubble{position:absolute;bottom:-10px;left:50%;width:10px;height:10px;background:#774802;color:#774802;box-shadow:10em 0 0 .01em,20em 0 0 .01em,30em 0 0 .01em,40em 0 0 .01em,12em 0 0 .01em,17em 0 0 .01em,25em 0 0 .01em,37em 0 0 .01em,-10em 0 0 .01em,-20em 0 0 .01em,-30em 0 0 .01em,-40em 0 0 .01em,-12em 0 0 .01em,-17em 0 0 .01em,-25em 0 0 .01em,-37em 0 0 .01em,10em -0.1em 0 .01em,20em -0.2em 0 .01em,30em -0.3em 0 .01em,40em -0.1em 0 .01em,17em -0.3em 0 .01em,17em -0.2em 0 .01em,25em -0.1em 0 .01em,37em -0.2em 0 .01em,-11em -0.5em 0 .01em,-20em -0.3em 0 .01em,-30em -0.2em 0 .01em,-40em -0.1em 0 .01em,-15em -0.2em 0 .01em,-17em -0.3em 0 .01em,-25em -0.4em 0 .01em,-37em -0.2em 0 .01em,-11em 0 0 .01em,10.6em 0 0 .01em,12.5em 0 0 .01em,13.6em 0 0 .01em,-5em 0 0 .01em,-6em 0 0 .01em,-7.4em 0 0 .01em,-9.2em 0 0 .01em,5em 0 0 .01em,6em 0 0 .01em,7.4em 0 0 .01em,9.2em 0 0 .01em,1em 0 0 .01em,2em .1em 0 .01em,4em .2em 0 .01em,3.2em .5em 0 .01em,-1em .5em 0 .01em,-2em .3em 0 .01em,-4em .1em 0 .01em,-3.2em .2em 0 .01em;border-radius:50%}.sykui-navCol.active .bubble{animation:2s bubble-up infinite}@keyframes bubble-up{100%{box-shadow:10em -11em 0 .01em,20em -17em 0 .01em,30em -20em 0 .01em,40em -30em 0 .01em,12em -12em 0 .01em,17em -5em 0 .01em,25em -16em 0 .01em,37em -22em 0 .01em,-10em -32em 0 .01em,-20em -12em 0 .01em,-30em -11em 0 .01em,-40em -13em 0 .01em,-12em -15em 0 .01em,-17em -9em 0 .01em,-25em -14em 0 .01em,-37em -21em 0 .01em,10em -17em 0 .01em,20em -21em 0 .01em,30em -11em 0 .01em,40em -19em 0 .01em,17em -23em 0 .01em,17em -10em 0 .01em,25em -14.5em 0 .01em,37em -12.9em 0 .01em,-11em -21.3em 0 .01em,-20em -22.4em 0 .01em,-30em -15.3em 0 .01em,-40em -19.2em 0 .01em,-15em -21.3em 0 .01em,-17em -22.4em 0 .01em,-25em -10.3em 0 .01em,-37em -9.3em 0 .01em,-11em -22.4em 0 .01em,10.6em -20.4em 0 .01em,12.5em -6.9em 0 .01em,13.6em -8.3em 0 .01em,-5em -21.4em 0 .01em,-6em -13em 0 .01em,-7.4em -15em 0 .01em,-9.2em -22em 0 .01em,5em -30em 0 .01em,6em -24em 0 .01em,7.4em -11em 0 .01em,9.2em -9.4em 0 .01em,1em -22em 0 .01em,2em -14em 0 .01em,4em -21em 0 .01em,3.2em -16em 0 .01em,-1em -21em 0 .01em,-2em -19em 0 .01em,-4em -17em 0 .01em,-3.2em -15em 0 .01em;bottom:200px;opacity:0}}}

/*
* @Author:  siyuan
* @Email:   2039750417@qq.com
* @Funname: 渐变色线条
* */
.solid-linear-right{border-right:2px solid #c8dcc9;-o-border-image:linear-gradient(transparent,#a5aab5,transparent) 5 5;border-image:-webkit-gradient(linear,left top, left bottom,from(transparent),color-stop(#a5aab5),to(transparent)) 5 5;border-image:linear-gradient(transparent,#a5aab5,transparent) 5 5}

/*
* @Author:  siyuan
* @Email:   2039750417@qq.com
* @Funname: 动感页面加载球
* */
.loader,.loader__figure {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.loader {
	overflow: visible;
	padding-top: 2em;
	height: 0;
	width: 2em
}

.loader__figure {
	height: 0;
	width: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 0 solid #1976d2;
	border-radius: 50%;
	-webkit-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
	animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
}

.loader__label {
	float: left;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	margin: 0.5em 0 0 50%;
	font-size: 0.875em;
	letter-spacing: 0.1em;
	line-height: 1.5em;
	color: #1976d2;
	white-space: nowrap;
	-webkit-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
	animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1)
}

/**
 * 下一页箭头上下跳动动画
 * transform-origin 设置旋转元素的基点位置
 * animation-name 设置动画名称
 * animation-duration 设置动画时间
 * animation-fill-mode 设置播放后的状态
 * animation-iteration-count 设置循环播放的次数
 * transition-timing-function: cubic-bezier 贝塞尔曲线效果，它有四个值，指在X轴与Y轴的两个曲线的点，第一个点：X1 Y1;第二个点：X2 Y2
 * transform: translate3d 设置动画Z轴位移几个元素，表示只在Z轴上移动
 *
 * 需要注意：transform: translate3d 不等于 transform: translateZ
 */

.arrowAnimated {
    animation-duration: 1s; /*动画时间*/
    animation-fill-mode: both; /*播放后的状态*/
    animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
    animation-name: arrowContainer; /*动画的名称*/
    transform-origin: center bottom; /*设置动画旋转元素的基点为：居中靠下*/
    cursor: pointer;
}

@keyframes arrowContainer {
    0%,
    100%,
    20%,
    50%,
    80% {
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1); /*贝塞尔曲线 ： X1 Y1 X2 Y2*/
        transform: translate3d(0, 0, 0); /*设置只在Z轴上移动*/
    }
    40%,
    43% {
        transition-timing-function: cubic-bezier(0.755, 0.50, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}