|
|
Linha 809: |
Linha 809: |
|
| |
|
| /* Test 2 */ | | /* Test 2 */ |
| body {
| |
| font-family: Arial, sans-serif;
| |
| margin: 0;
| |
| padding: 0;
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| align-items: center;
| |
| min-height: 100vh;
| |
| background-color: #f0f0f0;
| |
| }
| |
|
| |
| .element {
| |
| width: 100px;
| |
| height: 100px;
| |
| margin: 10px;
| |
| border-radius: 10px;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| font-weight: bold;
| |
| font-size: 16px;
| |
| cursor: pointer;
| |
| position: relative;
| |
| overflow: hidden;
| |
| transition: transform 0.3s ease;
| |
| }
| |
| /* Hover Effect 1 */
| |
| .effect-1 {
| |
| background-color: #3498db;
| |
| color: white;
| |
| }
| |
| .effect-1:hover {
| |
| transform: scale(1.1);
| |
| }
| |
|
| |
| /* Hover Effect 2 */
| |
| .effect-2 {
| |
| background-color: #e74c3c;
| |
| color: white;
| |
| }
| |
| .effect-2:hover {
| |
| transform: rotate(45deg);
| |
| }
| |
|
| |
| /* Hover Effect 3 */
| |
| .effect-3 {
| |
| background-color: #27ae60;
| |
| color: white;
| |
| transition: background-color 0.5s ease;
| |
| }
| |
| .effect-3:hover {
| |
| background-color: #c0392b;
| |
| }
| |
|
| |
| /* Hover Effect 4 */
| |
| .effect-4 {
| |
| background-color: #f39c12;
| |
| color: white;
| |
| overflow: hidden;
| |
| }
| |
| .effect-4:hover .element-inner {
| |
| transform: translateY(-100%);
| |
| }
| |
| .element-inner {
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| /* Hover Effect 5 */
| |
| .effect-5 {
| |
| background-color: #8e44ad;
| |
| color: white;
| |
| clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 80%);
| |
| }
| |
| .effect-5:hover {
| |
| clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
| |
| }
| |
|
| |
| /* Hover Effect 6 */
| |
| .effect-6 {
| |
| background-color: #2c3e50;
| |
| color: white;
| |
| }
| |
| .effect-6:hover {
| |
| transform: skewX(-20deg);
| |
| }
| |
|
| |
| /* Hover Effect 7 */
| |
| .effect-7 {
| |
| background-color: #e74c3c;
| |
| color: white;
| |
| }
| |
| .effect-7:hover .hidden-panel {
| |
| transform: translateX(100%);
| |
| }
| |
| .hidden-panel {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| background-color: #3498db;
| |
| color: white;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| transform: translateX(0);
| |
| transition: transform 0.3s ease;
| |
| }
| |
| /* Hover Effect 8 */
| |
| .effect-8 {
| |
| background-color: #3498db;
| |
| color: white;
| |
| }
| |
| .effect-8:hover:before {
| |
| transform: scaleY(1);
| |
| }
| |
| .effect-8:before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| background-color: rgba(255, 255, 255, 0.1);
| |
| transform: scaleY(0);
| |
| transform-origin: center bottom;
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| /* Hover Effect 9 */
| |
| .effect-9 {
| |
| background-color: #27ae60;
| |
| color: white;
| |
| overflow: hidden;
| |
| }
| |
| .effect-9:hover:before {
| |
| transform: translateX(100%);
| |
| }
| |
| .effect-9:before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| right: 100%;
| |
| width: 100%;
| |
| height: 100%;
| |
| background-color: rgba(255, 255, 255, 0.1);
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| /* Hover Effect 10 */
| |
| .effect-10 {
| |
| background-color: #f39c12;
| |
| color: white;
| |
| overflow: hidden;
| |
| }
| |
| .effect-10:hover:before {
| |
| transform: translateY(100%);
| |
| }
| |
| .effect-10:before {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: 100%;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| background-color: rgba(255, 255, 255, 0.1);
| |
| transition: transform 0.3s ease;
| |
| }
| |