PROMULGATOR

    ぃ?懒猫ヤ

    四川省成都市
    Html
    Css
    Js

    
                        


                        

                            


/* cyrillic-ext */
@font-face {
	font-family:'Montserrat';
	font-style:normal;
	font-weight:100 700;
	font-display:swap;
	src:url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
	unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
	font-family:'Montserrat';
	font-style:normal;
	font-weight:100 700;
	font-display:swap;
	src:url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
	unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* vietnamese */
@font-face {
	font-family:'Montserrat';
	font-style:normal;
	font-weight:100 700;
	font-display:swap;
	src:url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
	unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* latin-ext */
@font-face {
	font-family:'Montserrat';
	font-style:normal;
	font-weight:100 700;
	font-display:swap;
	src:url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
	unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin */
@font-face {
	font-family:'Montserrat';
	font-style:normal;
	font-weight:100 700;
	font-display:swap;
	src:url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@media (prefers-reduced-motion:no-preference) {
	h1 {
	animation:fade-out linear both,colorize linear both;
	animation-timeline:view();
	animation-range:exit -10px,exit -100px;
	background:linear-gradient(in hsl longer hue 40deg,#f66 0 0);
	background-clip:text;
}
@keyframes colorize {
	to {
	font-weight:600;
	color:#0000;
}
}@keyframes fade-out {
	to {
	scale:150%;
	opacity:0;
	filter:blur(5px);
}
}img {
	position:relative;
	animation:scrollin cubic-bezier(0.23,-0.26,0.78,1.29) both,fade-out linear both;
	animation-timeline:view();
	animation-range:1vh 50vh,exit -10px;
	transform-origin:left;
}
@keyframes scrollin {
	from {
	scale:0.3;
	opacity:0;
	left:-25vh;
}
to {
	opacity:1;
	scale:1;
	left:0;
}
}.path {
	border-radius:40vh 180vh 180vh 10vh;
}
.path .wheel {
	offset-path:polygon(0 0,97% 12%,0% 18%,100% 25%,0% 33%,96% 40%,1% 49%,100% 56%,0% 66%,100% 71%,3% 81%,100% 86%,0% 92%,100% 100%,0 100%);
	animation:followpath linear;
	animation-timeline:scroll();
}
@keyframes followpath {
	from {
	offset-distance:4%;
}
to {
	offset-distance:50%;
}
}.path {
	position:fixed;
	z-index:100;
	pointer-events:none;
	top:1em;
	left:0.5em;
	width:1rem;
	height:40vw;
	border:1px solid #fff6;
	border-left-color:#0000;
	background:radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#f3f0f050 54% 57%,#0000 59%) 0 calc(64px / 2),radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#f3f0f050 54% 57%,#0000 59%) calc(64px / 2) 0,radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#f3f0f050 54% 57%,#0000 59%),radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#f3f0f050 54% 57%,#0000 59%),#0000;
	background-size:calc(64px / 4.667) 64px,64px calc(64px / 4.667);
}
.path .wheel {
	width:0px;
	aspect-ratio:1;
	border:1px solid rgba(227,137,245,0.7);
	border-width:0.4vw 1vw;
	border-radius:30%;
}
.path:after,.path:before {
	content:"0%";
	text-align:center;
	font-size:0.5rem;
	position:absolute;
	inset:-0.5vw;
	top:1em;
	opacity:0.9;
}
.path:before {
	content:"100%";
	top:unset;
	bottom:0.5em;
}
}body {
	font-family:"Montserrat",sans-serif;
	font-size:1rem;
	margin:0;
	background-color:#1f2020;
	color:#f9f6ef;
}
h1 {
	font-wrap:balanced;
	font-size:clamp(2rem,7cqi,10rem);
	font-weight:100;
	color:#e389f5;
}
img {
	max-width:100%;
}
p {
	text-wrap:pretty;
}
article {
	width:min(60ch,100% - 4rem);
	margin:0 auto;
}


                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
css动画时间轴

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             

                         

                     

                   
                


                
0