@charset "UTF-8";
/* CSS Document */

/*============================== 人物渐隐渐现 ==============================*/

@-webkit-keyframes glow {
    0% {
        opacity: 1;
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
    }
    20% {
        opacity: 0.5;
    }
    35% {
        opacity: 1;
    }
    50% {
        transform: scale(1.4, 1.4);
        -webkit-transform: scale(1.4, 1.4);
		 opacity: 0.5;
        
    }
    100% {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
         opacity: 1;
    }
}
/*==============================人物大小渐变 ==============================*/
   
.starNet li.glow1{
	animation-name:glow;/* keyframe名称 */
	animation-duration:4s;/* 动画花费时间 */
	animation-timing-function:ease-in-out;/* 动画的速度 */
	animation-delay:0.2s;/* 动画开始之前的延迟 */
	animation-iteration-count:infinite;/* 动画播放次数 */
	animation-direction:normal;/* 是否反向播放 */
    animation-fill-mode:forwards;/* 对象动画时间之外的状态 */
    animation-play-state:running;/* 动画正在运行还是暂停(paused/running) */	
	-webkit-animation-name:glow;
	-webkit-animation-duration:4s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-delay:0.2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode:forwards;
    -webkit-animation-play-state:running;    
}
.starNet li.glow2{
	animation-name:glow;/* keyframe名称 */
	animation-duration:4s;/* 动画花费时间 */
	animation-timing-function:ease-in-out;/* 动画的速度 */
	animation-delay:1s;/* 动画开始之前的延迟 */
	animation-iteration-count:infinite;/* 动画播放次数 */
	animation-direction:normal;/* 是否反向播放 */
    animation-fill-mode:forwards;/* 对象动画时间之外的状态 */
    animation-play-state:running;/* 动画正在运行还是暂停(paused/running) */	
	-webkit-animation-name:glow;
	-webkit-animation-duration:4s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-delay:1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode:forwards;
    -webkit-animation-play-state:running;    
}
.starNet li.glow3{
	animation-name:glow;/* keyframe名称 */
	animation-duration:4s;/* 动画花费时间 */
	animation-timing-function:ease-in-out;/* 动画的速度 */
	animation-delay:1.5s;/* 动画开始之前的延迟 */
	animation-iteration-count:infinite;/* 动画播放次数 */
	animation-direction:normal;/* 是否反向播放 */
    animation-fill-mode:forwards;/* 对象动画时间之外的状态 */
    animation-play-state:running;/* 动画正在运行还是暂停(paused/running) */	
	-webkit-animation-name:glow;
	-webkit-animation-duration:4s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-delay::1.5s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode:forwards;
    -webkit-animation-play-state:running;    
}
/*=================================群山移动=========================================*/
@keyframes move_r {
	0% { 
		transform:translateX(50px);
		-webkit-transform:translateX(50px);
		-moz-transform:translateX(50px);
	}

	50% {
		transform:translateX(200px);
		-webkit-transform:translateX(200px);
		-moz-transform:translateX(200px);
	}
	100% {
		transform:translateX(80px);
		-webkit-transform:translateX(80px);
		-moz-transform:translateX(80px);
	}
}
@-webkit-keyframes move_r {
	0% { 
		transform:translateX(50px);
		-webkit-transform:translateX(50px);
		-moz-transform:translateX(50px);
	}

	50% {
		transform:translateX(200px);
		-webkit-transform:translateX(200px);
		-moz-transform:translateX(200px);
	}
	100% {
		transform:translateX(50px);
		-webkit-transform:translateX(50px);
		-moz-transform:translateX(5px);
	}
}

@keyframes move_l {
	0% { 
		transform:translateX(-50px);
		-webkit-transform:translateX(-50px);
		-moz-transform:translateX(-50px);
	}

	50% {
		transform:translateX(-200px);
		-webkit-transform:translateX(-200px);
		-moz-transform:translateX(-200px);
	}
	100% {
		transform:translateX(-50px);
		-webkit-transform:translateX(-50px);
		-moz-transform:translateX(-5px);
	}
}
@-webkit-keyframes move_l {
	0% { 
		transform:translateX(-50px);
		-webkit-transform:translateX(-50px);
		-moz-transform:translateX(-50px);
	}

	50% {
		transform:translateX(-200px);
		-webkit-transform:translateX(-200px);
		-moz-transform:translateX(-200px);
	}
	100% {
		transform:translateX(-50px);
		-webkit-transform:translateX(-50px);
		-moz-transform:translateX(-50px);
	}
}
.mountains li.move1{
	animation-name:move_r;/* keyframe名称 */
	animation-duration:5s;/* 动画花费时间 */
	animation-timing-function:ease-in-out;/* 动画的速度 */
	animation-delay:1s;/* 动画开始之前的延迟 */
	animation-iteration-count:infinite;/* 动画播放次数 */
	animation-direction:normal;/* 是否反向播放 */
    animation-fill-mode:forwards;/* 对象动画时间之外的状态 */
    animation-play-state:running;/* 动画正在运行还是暂停(paused/running) */
	-webkit-animation-name: move_r;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-delay:1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode:forwards;
    -webkit-animation-play-state:running;
}

.mountains li.move2,.mountains li.move3{
	animation-name:move_l;/* keyframe名称 */
	animation-duration:5s;/* 动画花费时间 */
	animation-timing-function:ease-in-out;/* 动画的速度 */
	animation-delay:1s;/* 动画开始之前的延迟 */
	animation-iteration-count:infinite;/* 动画播放次数 */
	animation-direction:normal;/* 是否反向播放 */
    animation-fill-mode:forwards;/* 对象动画时间之外的状态 */
    animation-play-state:running;/* 动画正在运行还是暂停(paused/running) */
	-webkit-animation-name:move_l;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-delay:1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode:forwards;
    -webkit-animation-play-state:running;
}



/*=====================================书签红吊坠摆动===========================================*/


@keyframes swing {
    0 { transform:rotate(0deg);transform-origin:center top;}
    50% { transform:rotate(10deg);transform-origin:center top;}
    100% { transform:rotate(0deg);transform-origin:center top;}
}
@-moz-keyframes swing {
    0 { transform:rotate(0deg);transform-origin:center top;}
    50% { transform:rotate(10deg);transform-origin:center top;}
    100% { transform:rotate(0deg);transform-origin:center top;}
}
@-webkit-keyframes swing {
    0 { transform:rotate(0deg);transform-origin:center top;}
    50% { transform:rotate(10deg);transform-origin:center top;}
    100% { transform:rotate(0deg);transform-origin:center top;}
}	
@-o-keyframes swing {
    0 { transform:rotate(0deg);transform-origin:center top;}
    50% { transform:rotate(10deg);transform-origin:center top;}
    100% { transform:rotate(0deg);transform-origin:center top;}
}

/*=====================================毛笔写字动画===========================================*/

@keyframes writeL{
 0% {
    top: -69px;
    left: 99px;
	}
    10% {
	top: -37px;
    left: 81px;
	}
    20% {
    top: -14px;
    left: 88px;
	}
	30%{
	top: -50px;
    left: 118px;	
	}
	40%{
    top: -26px;
    left: 111px;
	}
	60%{
    top: 64px;
    left: 70px;
	}
    70% {
    top: 90px;
    left: 80px;
	}
	80%{
	top: 60px;
    left: 104px;
	}
	90%{
	top: 84px;
    left: 118px;

	}
    100% {
	top: 43px;
    left: 118px;
	}		
}
@-webkit-keyframes writeL{
   0% {
    top: -69px;
    left: 99px;
	}
    10% {
	top: -37px;
    left: 81px;
	}
    20% {
    top: -14px;
    left: 88px;
	}
	30%{
	top: -50px;
    left: 118px;	
	}
	40%{
    top: -26px;
    left: 111px;
	}
	60%{
    top: 64px;
    left: 70px;
	}
    70% {
    top: 90px;
    left: 80px;
	}
	80%{
	top: 60px;
    left: 104px;
	}
	90%{
	top: 84px;
    left: 118px;

	}
    100% {
	top: 43px;
    left: 118px;
	}		
}
@keyframes writeM{
   0% {
		top:-70px;
		left:104px;
	}
    10% {
	    top: -27px;
        left: 87px;
	}
    20% {
		top: -54px;
		left: 68px;
	}
	
	30%{
		top: -22px;
		left: 68px;
	}
	40%{
		top: -18px;
        left: 124px;
	}
	60%{
    top: 64px;
    left: 70px;
	}
    70% {
    top: 90px;
    left: 80px;
	}
	80%{
	top: 60px;
    left: 104px;
	}
	90%{
	top: 84px;
    left: 118px;

	}
    100% {
	top: 43px;
    left: 118px;
	}	
}
@-webkit-keyframes writeM{
   0% {
		top:-70px;
		left:104px;
	}
    10% {
	    top: -27px;
        left: 87px;
	}
    20% {
		top: -54px;
		left: 68px;
	}
	30%{
		top: -22px;
		left: 68px;
	}
	40%{
		top: -18px;
        left: 124px;
	}
	60%{
    top: 64px;
    left: 70px;
	}
    70% {
    top: 90px;
    left: 80px;
	}
	80%{
	top: 60px;
    left: 104px;
	}
	90%{
	top: 84px;
    left: 118px;

	}
    100% {
	top: 43px;
    left: 118px;
	}			
}
@keyframes writeR{
   0% {
	top: -57px;
    left: 69px;
	}
    10% {
	top: -25px;
    left: 69px;
	}
    20% {
	top: -61px;
    left: 104px;
	}
	30%{
	top: -21px;
    left: 80px;
	}
	40%{
    top: -26px;
    left: 123px;
	}
	60%{
    top: 64px;
    left: 70px;
	}
    70% {
    top: 90px;
    left: 80px;
	}
	80%{
	top: 60px;
    left: 104px;
	}
	90%{
	top: 84px;
    left: 118px;

	}
    100% {
	top: 43px;
    left: 118px;
	}		
}
@-webkit-keyframes writeR{
   0% {
	top: -57px;
    left: 69px;
	}
    10% {
	top: -25px;
    left: 69px;
	}
    20% {
	top: -61px;
    left: 104px;
	}
	30%{
	top: -21px;
    left: 80px;
	}
	40%{
    top: -26px;
    left: 123px;
	}
	60%{
    top: 64px;
    left: 70px;
	}
    70% {
    top: 90px;
    left: 80px;
	}
	80%{
	top: 60px;
    left: 104px;
	}
	90%{
	top: 84px;
    left: 118px;

	}
    100% {
	top: 43px;
    left: 118px;
	}			
}
.write .pen .pen1{
	animation-name:writeL;/* keyframe名称 */
	animation-duration:2s;/* 动画花费时间 */
	animation-timing-function:ease-in-out;/* 动画的速度 */
	animation-delay:0.2s;/* 动画开始之前的延迟 */
	animation-iteration-count:1;/* 动画播放次数 */
	animation-direction:normal;/* 是否反向播放 */
    animation-fill-mode:forwards;/* 对象动画时间之外的状态 */
    animation-play-state:running;/* 动画正在运行还是暂停(paused/running) */
	-webkit-animation-name: writeL;
	-webkit-animation-duration:2s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-delay:0.2s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode:forwards;
    -webkit-animation-play-state:running;
}

.write .pen .pen2{
	animation-name:writeM;/* keyframe名称 */
	animation-duration:2s;/* 动画花费时间 */
	animation-timing-function:ease-in-out;/* 动画的速度 */
	animation-delay:0.2s;/* 动画开始之前的延迟 */
	animation-iteration-count:1;/* 动画播放次数 */
	animation-direction:normal;/* 是否反向播放 */
    animation-fill-mode:forwards;/* 对象动画时间之外的状态 */
    animation-play-state:running;/* 动画正在运行还是暂停(paused/running) */
	-webkit-animation-name: writeM;
	-webkit-animation-duration:2s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-delay:0.2s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode:forwards;
    -webkit-animation-play-state:running;
}

.write .pen .pen3{
	animation-name:writeR;/* keyframe名称 */
	animation-duration:2s;/* 动画花费时间 */
	animation-timing-function:ease-in-out;/* 动画的速度 */
	animation-delay:0.2s;/* 动画开始之前的延迟 */
	animation-iteration-count:1;/* 动画播放次数 */
	animation-direction:normal;/* 是否反向播放 */
    animation-fill-mode:forwards;/* 对象动画时间之外的状态 */
    animation-play-state:running;/* 动画正在运行还是暂停(paused/running) */
	-webkit-animation-name: writeR;
	-webkit-animation-duration:2s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-delay:0.2s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:normal;
	-webkit-animation-fill-mode:forwards;
    -webkit-animation-play-state:running;
}