directory
The effect
CSS Hover event: hover
Transition Sets the front and back styles
introduce
code
Animation defines the Settings
introduce
code
The effect
Smooth appearance effect effect execution time 0.9s seconds
CSS Hover event: hover
.systemInfoTop div:hover {/* animation: ss 0.9s; */ height:260px; margin-top:-30px; }Copy the codeTransition Sets the front and back styles
introduce
Transition to the div before moving the cursor over it
Use :hover to add a mouse hover event
code
.systemInfoTop div { width: 250px; float: left; margin-left: 16px; background: #fff; height: 200px; box-shadow: 3px 2px 10px #888888; border-radius: 10px; cursor: pointer; padding: 20px 0 0 20px; color: #3D2E87; The transition: height 0.9 s; The transition: margin - top 0.9 s; / * animation: ss 0.9 s; }. SystemInfoTop div:hover {/* animation: ss 0.9s; */ height:260px; margin-top:-30px; }Copy the code
Animation defines the Settings
introduce
The div element for the effect {
The animation SS method sets a method and then operates on it
}
@keyframes ss method {
From original style
}
to{
New style
}
code
.systemInfoTop div { width: 250px; float: left; margin-left: 16px; background: #fff; height: 200px; box-shadow: 3px 2px 10px #888888; border-radius: 10px; cursor: pointer; padding: 20px 0 0 20px; color: #3D2E87; /* Animation: ss 0.9s; } @keyframes ss {from {/* height: 200px; margin-top: 0px; } to {/* effect */ height: 260px; margin-top: -30px; }}Copy the code
ok
Continuously updated