Ver ❯
Herramientas SEO
Tamaño del resultado:
668 x 574
×
Cambiar Orientacion
Cambiar tema, Oscuro/Luz
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>Trucos y efectos de CSS3 - Tutoriales En Linea</title> </head> <body> <style> border-radius: htl htr hbr hbl / vtl vtr vbr vbl; .pinStarLeaf { width: 60px; height: 120px; border-radius: 50%/30% 30% 70% 70%; background-color: #B8F0F5; } #pinStarWrapper{ width: 300px; height: 300px; position: relative; } .pinStarLeaf{ width: 60px; height: 120px; position: absolute; border-radius: 50%/30% 30% 70% 70% ; left: 0; right: 0; top: 0; bottom: 0; margin: auto; opacity: .5; } .pinStarLeaf:nth-of-type(1){ background-color: #B8F0F5; } .pinStarLeaf:nth-of-type(2){ background-color: #9CF3DC; } .pinStarLeaf:nth-of-type(3){ background-color: #94F3B0; } .pinStarLeaf:nth-of-type(4){ background-color: #D2F8A1; } .pinStarLeaf:nth-of-type(5){ background-color: #F3EDA2; } #pinStarCenter, #pinStarCenterChkBox{ width: 45px; height: 50px; position: absolute; left: 0; right: 0; top: -60px; bottom: 0; margin: auto; background-color: #fff; border-radius: 50%; cursor: pointer; } #pinStarCenter, .pinStarLeaf{ pointer-events: none; } #pinStarCenter > input[type="checkbox"]{ width: 100%; height: 100%; cursor: pointer; } #pinStarCenterChkBox:checked ~ .pinStarLeaf{ transition: transform 1s linear; } #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(5){ transform: rotatez(35deg); } #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(4){ transform: rotatez(105deg); } #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(3){ transform: rotatez(180deg); } #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(2){ transform: rotatez(255deg); } #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(1){ transform: rotatez(325deg); } .pinStarLeaf{ transform-origin: 30px 30px; transition: transform 1s linear; } cubic-bezier (t1, d1, t2, d2) /* t1 = 0 , d1 = 1, t2 = 0, d2 = 0 */ cubic-bezier(0,1,0,0) /* t1 = 1 , d1 = 0, t2 = 0, d2 = 0 */ cubic-bezier(1,0,0,0) /* t1 = 1 , d1 = 1, t2 = 0, d2 = 1 */ cubic-bezier(1,1,0,1) /* t1 = 1 , d1 = 1, t2 = 1, d2 = 0 */ cubic-bezier(1,1,1,0) #pinStarCenterChkBox:checked ~ .pinStarLeaf{ transition: transform 1s cubic-bezier(.8,-.5,.2,1.4);} </style> <div class="pinStarLeaf"></div> <div id="pinStarWrapper"> <div class="pinStarLeaf"></div> <div class="pinStarLeaf"></div> <div class="pinStarLeaf"></div> <div class="pinStarLeaf"></div> <div class="pinStarLeaf"></div> </div> <div id="pinStarWrapper"> <input type="checkbox" id="pinStarCenterChkBox"> <div class="pinStarLeaf"></div> <div class="pinStarLeaf"></div> <div class="pinStarLeaf"></div> <div class="pinStarLeaf"></div> <div class="pinStarLeaf"></div> <div id="pinStarCenter">Hacer clic</div> </div> </body> </html>