Creates a shadow box around the text when it is hovered.

  • display: inline-block to set width and length for p element thus making it an inline-block.
  • Set transform: perspective(1px) to give element a 3D space by affecting the distance between the Z plane and the user and translate(0) to reposition the p element along z-axis in 3D space.
  • box-shadow: to set up the box.
  • transparent to make box transparent.
  • transition-property to enable transitions for both box-shadow and transform.
  • :hover to activate whole css when hovering is done until active.
  • transform: scale(1.2) to change the scale, magnifying the text.

继续阅读 30秒学会 CSS 片段 – Hover shadow box animation

Creates a bouncing loader animation.

  • @keyframes defines an animation that has two states, where the element changes opacity and is translated up on the 2D plane using transform: translate3d(). Using a single axis translation on transform: translate3d() improves the performance of the animation.
  • .bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.
  • .bouncing-loader > div, targets the three child divs of the parent to be styled. The divs are given a width and height of 1rem, using border-radius: 50% to turn them from squares to circles.
  • margin: 3rem 0.2rem specifies that each circle has a top/bottom margin of 3rem and left/right margin of 0.2rem so that they do not directly touch each other, giving them some breathing room.
  • animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
  • nth-child(n) targets the element which is the nth child of its parent.
  • animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
  • Note that 1rem is usually 16px.

继续阅读 30秒学会 CSS 片段 – Bouncing loader