PROMULGATOR

    . 侦??

    上海市
    Html
    Css
    Js

    
                        


                        

                            


* {
	padding:0;
	margin:0 auto;
}
body,html {
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
body {
	background:pink;
	perspective:3000px;
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
}
main {
	width:400px;
	height:400px;
	/* border:1px solid white;
	*/
        display:flex;
	justify-content:center;
	align-items:center;
	perspective:3000px;
}
main div {
	transform-style:preserve-3d;
}
#heart {
	width:300px;
	height:300px;
	/* background:white;
	*/
     position:relative;
	/* transform:rotateX(80deg);
	*/
     animation:zhuan 10s linear 1;
}
@keyframes zhuan {
	0% {
	transform:rotateY(0deg) rotateX(0deg);
}
50% {
	transform:rotateY(360deg) rotateX(0deg);
}
51% {
	transform:rotateY(360deg) rotateX(0deg);
}
70% {
	transform:rotateY(360deg) rotateX(70deg);
}
100% {
	transform:rotateY(0deg) rotateX(0deg);
}
}#hearts {
	width:100%;
	height:100%;
	/* background:rgba(255,0,0,0.568);
	*/
        position:absolute;
	cursor:pointer;
}
.h-l {
	width:75px;
	height:1px;
	border-top:0px solid transparent;
	border-bottom:60px solid rgba(255,0,0,0.767);
	border-left:50px solid transparent;
	border-right:25px solid transparent;
	position:absolute;
}
.h-r {
	width:75px;
	height:1px;
	border-top:0px solid transparent;
	border-bottom:60px solid rgba(255,0,0,0.767);
	border-left:25px solid transparent;
	border-right:50px solid transparent;
	position:absolute;
	right:0;
}
.h-z {
	width:100%;
	height:80px;
	background:rgba(255,0,0,0.767);
	position:absolute;
	top:61px;
}
.h-x {
	width:0;
	height:0;
	border-top:150px solid rgba(255,0,0,0.767);
	border-bottom:0px solid transparent;
	border-left:150px solid transparent;
	border-right:150px solid transparent;
	position:absolute;
	top:141px;
}
.heart-q {
	transform:translateZ(50px);
	transition:0.5s;
}
.h-ll,.h-rr {
	width:75px;
	height:50px;
	background:rgba(245,49,49,0.568);
	position:absolute;
	transform-origin:50% 0%;
}
.h-ll {
	transform:rotateZ(-50deg) rotateX(90deg) translateX(-30px) translateZ(-10px);
}
.h-rr {
	right:0;
	transform:rotateZ(50deg) rotateX(90deg) translateX(30px) translateZ(-10px);
}
.h-lt,.h-rt {
	width:75px;
	height:50px;
	background:rgba(255,0,0,0.568);
	position:absolute;
	transform-origin:50% 0%;
	transform:rotateX(90deg);
}
.h-lt {
	left:50px;
}
.h-rt {
	right:50px;
}
.h-lr,.h-rl {
	width:65px;
	height:50px;
	background:rgba(255,0,0,0.568);
	position:absolute;
	transform-origin:50% 0%;
}
.h-lr {
	left:92px;
	transform:rotateZ(67deg) translateX(32px)  rotateX(90deg);
}
.h-rl {
	right:92px;
	transform:rotateZ(-67deg) translateX(-32px)  rotateX(90deg);
}
.h-zl,.h-zr {
	width:80px;
	height:50px;
	background:rgba(255,0,0,0.568);
	position:absolute;
	transform-origin:50% 0%;
}
.h-zl {
	transform:rotateZ(-90deg) rotateX(90deg);
	left:-40px;
	top:100px
}
.h-zr {
	transform:rotateZ(-90deg) rotateX(90deg);
	right:-40px;
	top:100px
}
.h-xl,.h-xr {
	width:217px;
	height:50px;
	background:rgba(245,49,49,0.568);
	position:absolute;
	transform-origin:50% 0%;
}
.h-xl {
	transform:rotateZ(-135deg) rotateX(90deg);
	left:-34px;
	top:216px;
}
.h-xr {
	transform:rotateZ(135deg) rotateX(90deg);
	right:-34px;
	top:216px;
}
main:hover .heart-q {
	transform:translateX(-320px);
}
.heart-b h2 {
	position:absolute;
	z-index:99;
	font-size:70px;
	color:white;
	top:70px;
	left:80px;
	opacity:0;
	transition:1s;
}
main:hover .heart-b h2 {
	opacity:1;
}
.heart-q h2 {
	position:absolute;
	z-index:99;
	font-size:70px;
	color:white;
	top:70px;
	left:60px;
}


                        

                        



                        

                   

                    
                   

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

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
3D心形盒子(原创)

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
表白神器，可以把里面的you换成名字，本人还发布的有  表白花束插件，喜欢的可以去收藏

                         

                     

                   
                


                
0