7 864
edições
Sem resumo de edição |
Sem resumo de edição |
||
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; | |||
} |