CSS 奇思妙想

转载自：http://sbco.cc/magicCss/html/index.html

 .heartShaped { position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%) rotate(45deg); background: rgba(255, 20, 147, .85); width: 140px; line-height: 140px; text-align: center; color: white; font-size: 12px; } .heartShaped:before, .heartShaped:after { content: ''; position: absolute; top: 0; left: -70px; width: 140px; height: 140px; border-radius: 50%; background: rgb(255, 20, 147); z-index: -1; } .heartShaped:after{ top: -70px; left: 0; }

 .bubbly { position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%); background: #00aabb; border-radius: .4em; width: 260px; padding: 60px 20px; text-align: center; color: white; font-size: 200%; } .bubbly:after { content: ''; position: absolute; bottom: 0; left: 50%; border: 34px solid transparent; border-top-color: #00aabb; border-bottom: 0; border-left: 0; margin: 0 0 -34px -17px; } 

 .notching{ position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%); width: 160px; padding: 60px 20px; text-align: center; color: white; font-size: 200%; } .notching{ background: linear-gradient(135deg, transparent 15px, deeppink 0) top left, linear-gradient(-135deg, transparent 15px, deeppink 0) top right, linear-gradient(-45deg, transparent 15px, deeppink 0) bottom right, linear-gradient(45deg, transparent 15px, deeppink 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } 

 .arc{ position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%); width: 60px; padding: 60px; text-align: center; color: white; font-size: 200%; } .arc { background: radial-gradient(circle at top left, transparent 15px, yellowgreen 0) top left, radial-gradient(circle at top right, transparent 15px, yellowgreen 0) top right, radial-gradient(circle at bottom right, transparent 15px, yellowgreen 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, yellowgreen 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } 

 .trapezoid{ position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%); width: 160px; padding: 60px; text-align: center; color: white; font-size: 200%; } .trapezoid:before{ content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform:perspective(40px) scaleY(1.3) rotateX(5deg); transform-origin: bottom; background:deeppink; z-index:-1; } 

 .pie{ position: absolute; top:50%;left: 50%; transform:translate(-50%,-50%); width: 200px;line-height:200px; border-radius:50%; text-align: center; color: white; font-size: 200%; background-color:yellowgreen; overflow:hidden; background-image: linear-gradient(to right, transparent 50%, #655 0); cursor:pointer; } .pie:before{ content:""; position:absolute; top:0;left:50%; width:50%;height:100%; background-color: inherit; transform-origin: left; z-index:-1; transform:rotate(.1turn); } .pie:hover:before{ transition:all 1s; transform:rotate(.45turn); } 

 .corner{ position: absolute; top:50%;left: 50%; transform:translate(-50%,-50%); width: 120px;line-height:120px; padding:40px; text-align: center; color: white; font-size: 200%; background:linear-gradient(-150deg,transparent 1.5em, yellowgreen 0); border-radius:.5em; } .corner:before{ content: ''; position: absolute; top: 0; right: 0; background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat; width: 1.73em; height: 3em; transform: translateY(-1.3em) rotate(-30deg); transform-origin: bottom right; border-bottom-left-radius: inherit; box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15); } 

 .spectiveBlur{ position: absolute; top: 50%;left: 50%; width: 220px;line-height:160px; transform: translate(-50%, -50%); border-radius:10px; overflow:hidden; background:#E91E63; color:#fff; font-size:200%; text-align:center; cursor:pointer; transition: transform .2s; } .spectiveBlur:hover{ box-shadow:0 0 0 1920px rgba(0,0,0,.7); transform: translate(-50%, -50%) scale(1.2); } 

 .sun{ position: absolute; top: 50%;left: 50%; width:200px;height:260px; transform: translate(-50%, -50%); text-align:center; font-size:200%; color:#fff; background:#0BF; border-radius:5px; } .sun:before{ content:""; position: absolute; width: 80px;height: 80px; left: 50%;top: 50%; transform: translate(-50%, -50%); border-radius:50%; background:rgba(255, 238, 68, 1); box-shadow: 0 0 0 15px rgba(255,255,0,0.2),0 0 15px #fff; z-index:-10; } .sun:after{ content:""; position: absolute; top: 50%;left: 50%; height: 160px; width: 160px; transform: translate(-50%, -50%) rotate(30deg); z-index:-100; background-image: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%), -webkit-linear-gradient(left,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); background-size: 20px 100%, 100% 20px; background-repeat: no-repeat; background-position: center center, center center; animation:sunRotate 10s linear infinite; } @keyframes sunRotate{ 0%{ transform: translate(-50%, -50%) rotate(30deg); } 100%{ transform: translate(-50%, -50%) rotate(390deg); } }