css część 2
Data utworzenia: 2024-12-16 10:21:17
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.square {
position: absolute;
left: 50%;
width: 200px;
height: 200px;
transform: translateX(-50%);
background-color: blue;
border: 2px solid darkblue;
border-radius: 25px;
/* transition: all 0s ease 0s;
transition-timing-function: ease;
transition-delay: 0s;
transition: 5s; */
transition: background-color 3s, box-shadow: 3s;
}
.square:hover {
background-color: blueviolet;
box-shadow: 0 0 15px darkorchid;
}
.one {
top: 15%;
transition: width 3s;
/* transition: 1s; */
}
.two {
top: 40%;
transition: width 3s;
/* transition: 1s 1; */
}
.three {
top: 65%;
transition: width 3s;
/* transition: 1s 2s; */
}
.one:hover {
width: 350px;
}
.one:hover ~ .two {
width: 350px;
}
.one:hover ~ .three{
width: 350px;
}
Powrót