PROMULGATOR

    . 侦??

    上海市
    Html
    Css
    Js

    
                        


                        

                            


 * {
	margin:0 auto;
	padding:0;
}
body,html {
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	background:#E2E9ED;
}
body {
	overflow:hidden;
}
main {
	width:400px;
	height:400px;
	border-radius:50%;
	/* border:1px solid black;
	*/
            display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
}
#beizi {
	width:300px;
	height:300px;
	border-radius:50%;
	border:25px solid white;
	background:#E2E9ED;
	position:relative;
	z-index:99;
	cursor:pointer;
	perspective:1000px;
}
.shadow {
	width:500px;
	height:348px;
	background:linear-gradient(to right,#ccc 0%,#E2E9ED 90%);
	position:absolute;
	left:185px;
	top:8px;
	transform-origin:0% 50%;
	transform:rotate(50deg);
}
.xiguan {
	width:20px;
	border-top:150px solid #ff7647;
	border-right:5px solid transparent;
	border-left:5px solid transparent;
	border-bottom:0px solid transparent;
	position:relative;
	top:-100px;
	z-index:99;
	transform-origin:50% 250px;
}
@keyframes xg {
	100% {
	transform:rotate(360deg)
}
}.xiguan::before {
	content:'';
	width:30px;
	height:30px;
	border-radius:50%;
	background:rgb(212,76,52);
	position:absolute;
	top:-165px;
	left:-5px;
	transform:rotateX(-25deg) translateZ(5px);
}
.xiguan::after {
	content:'';
	width:20px;
	height:20px;
	border-radius:50%;
	background:#ff7647;
	position:absolute;
	bottom:-6.5px;
	left:0px;
	transform:rotateX(-20deg) translateZ(5px);
}
.xiguans {
	width:10px;
	height:0;
	border-top:170px solid #ff7647;
	border-right:5px solid transparent;
	border-left:5px solid transparent;
	border-bottom:0px solid transparent;
	position:relative;
	top:-100px;
	z-index:77;
	transform-origin:50% 100px;
}
#beizi:hover .xiguan {
	animation:xg 3s linear  1;
}
#beizi:hover .xiguans {
	animation:xg 3s linear  1;
}
.xiguans::after {
	content:'';
	width:10px;
	height:10px;
	border-radius:50%;
	background:#ff7647;
	position:absolute;
	bottom:-3px;
	left:0px;
	transform:rotateX(-20deg) translateZ(5px);
}
.water {
	width:260px;
	height:260px;
	border-radius:50%;
	background:#33f3d3;
	opacity:0.5;
	z-index:88;
	position:absolute;
	top:20px;
	left:5px;
	animation:move 2s ease-in-out infinite alternate;
}
@keyframes move {
	0% {
	left:5px
}
100% {
	left:35px
}
}.di {
	width:140px;
	height:140px;
	border-radius:50%;
	background:#1ca58e;
	position:absolute;
	bottom:80px;
	left:80px;
	z-index:1;
}
#yezi {
	width:70px;
	height:0;
	border-top-left-radius:0;
	border-bottom-right-radius:0;
	border-top:50px solid #29af87;
	border-left:0px solid #29af87;
	border-bottom:30px solid #29af87;
	border-right:20px solid #29af87;
	z-index:66;
}
@keyframes zhuan {
	100% {
	transform:rotate(360deg)
}
}.yz-1 {
	position:absolute;
	border-radius:70%;
	top:80px;
	left:40px;
	animation:zhuan 9s linear infinite alternate;
}
.yz-2 {
	position:absolute;
	border-radius:80%;
	top:100px;
	left:180px;
	transform:rotate(100deg);
	animation:zhuan 10s linear infinite alternate;
}
.yz-3 {
	position:absolute;
	top:180px;
	left:80px;
	border-radius:82%;
	transform:rotate(100deg);
	animation:zhuan 8s linear infinite alternate;
}
#yezis {
	width:300px;
	height:300px;
	/* background:red;
	*/
            position:absolute;
	top:0;
	z-index:66;
	transition-duration:15s;
}
#beizi:hover #yezis {
	transition:10s;
	transition-delay:0.5s;
	transform:rotate(360deg);
}
#kuais {
	width:300px;
	height:300px;
	position:absolute;
	top:0;
	z-index:55;
	transition-duration:15s;
	/* animation:zhuan 20s linear infinite;
	*/
}
#beizi:hover #kuais {
	transition:10s;
	transition-delay:1s;
	transform:rotate(360deg);
}
#kuai {
	border-radius:10px;
	background:white;
	position:absolute;
}
#kuai:nth-child(1) {
	width:50px;
	height:50px;
	top:80px;
	left:80px;
	transform:rotate(45deg);
}
#kuai:nth-child(2) {
	width:70px;
	height:70px;
	top:150px;
	left:100px;
}
#kuai:nth-child(3) {
	width:30px;
	height:30px;
	top:100px;
	left:180px;
	transform:rotate(50deg);
}
#juzi {
	width:100px;
	height:100px;
	border-radius:50%;
	border:10px solid yellow;
	border-bottom:10px solid transparent;
	border-left:10px solid transparent;
	position:absolute;
	top:50px;
	right:50px;
	z-index:76;
	animation:zhuan1 2s ease-in-out infinite alternate;
}
@keyframes zhuan1 {
	100% {
	transform:rotate(30deg)
}
}#juzi::after {
	content:'';
	width:0;
	height:0;
	border-radius:50%;
	border:50px solid rgb(245,245,99);
	border-bottom:50px solid transparent;
	border-left:50px solid transparent;
	position:absolute;
}
#juzi #yezi {
	position:absolute;
	border-radius:80%;
	width:60px;
	height:0;
	border-top-left-radius:0;
	border-bottom-right-radius:0;
	border-top:50px solid rgb(161,161,57);
	border-left:0px solid rgb(161,161,57);
	border-bottom:30px solid rgb(161,161,57);
	border-right:20px solid rgb(161,161,57);
}
#juzi #yezi:nth-child(1) {
	transform:scale(0.2)  translateX(60px) translateY(-60px) rotate(60deg);
}
#juzi #yezi:nth-child(2) {
	transform:scale(0.2) translateX(180px) translateY(50px) rotate(-60deg);
}


                        

                        



                        

                   

                    
                   

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

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
鸡尾酒（改善）

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
部分浏览器会出现茶叶变形情况。 鼠标经过查看效果

                         

                     

                   
                


                
0