Creates an animated underline effect when the text is hovered over.

  • display: inline-block makes the block p an inline-block to prevent the underline from spanning the entire parent width rather than just the content (text).
  • position: relative on the element establishes a Cartesian positioning context for pseudo-elements.
  • :after defines a pseudo-element.
  • position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
  • width: 100% ensures the pseudo-element spans the entire width of the text block.
  • transform: scaleX(0) initially scales the pseudo element to 0 so it has no width and is not visible.
  • bottom: 0 and left: 0 position it to the bottom left of the block.
  • transition: transform 0.25s ease-out means changes to transform will be transitioned over 0.25 seconds with an ease-out timing function.
  • transform-origin: bottom right means the transform anchor point is positioned at the bottom right of the block.
  • :hover:after then uses scaleX(1) to transition the width to 100%, then changes the transform-origin to bottom left so that the anchor point is reversed, allowing it transition out in the other direction when hovered off.

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

Variables that can be reused for transition-timing-function properties, more powerful than the built-in ease, ease-in, ease-out and ease-in-out.

  • The variables are defined globally within the :root CSS pseudo-class which matches the root element of a tree representing the document.
  • In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.

继续阅读 30秒学会 CSS 片段 – Easing variables

Creates a staggered animation for the elements of a list.

  • Set the opacity to 0 and transform to translateX(100%) to make list elements transparent and move them all the way to the right.
  • Specify the appropriate transition properties for list elements, except transition-delay which is specified relative to the --i custom property.
  • Use inline styles to specify a value for --i for each list element, which will in turn be used for transition-delay to create the stagger effect.
  • Use the :checked selector for the checkbox to appropriately style list elements, setting opacity to 1 and transform to translateX(0) to make them appear and slide into view.

继续阅读 30秒学会 CSS 片段 – Staggered animation

Creates a pulse effect loader animation using the animation-delay property.

  • Use @keyframes to define an animation at two points in the cycle, start (0%), where the two <div> elements have no width or height and are positioned at the center and end (100%), where both <div> elements have increased width and height, but their position is reset to 0.
  • Use opacity to transition from 1 to 0 when animating to give the <div> elements a disappearing effect as they expand.
  • .ripple-loader, which is the parent container, has a predefined width and height. It uses position: relative to position its children.
  • Use animation-delay on the second <div> element, so that each element starts its animation at a different time.

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

Displays an image overlay effect on hover.

  • Use the :before and :after elements for the top and bottom bars of the overlay respectively, setting their opacity, transform and transition to produce the desired effect.
  • Use the figcaption for the text of the overlay, setting display: flex, flex-direction: column and justify-content: center to center the text into the image.
  • Use the :hover pseudo-selector to update the opacity and transform of all the elements and produce the desired effect.

继续阅读 30秒学会 CSS 片段 – Image overlay on hover

Transitions an element’s height from 0 to auto when its height is unknown.

  • transition: max-height: 0.5s cubic-bezier(...) specifies that changes to max-height should be transitioned over 0.5 seconds, using an ease-out-quint timing function.
  • overflow: hidden prevents the contents of the hidden element from overflowing its container.
  • max-height: 0 specifies that the element has no height initially.
  • .target:hover > .el specifies that when the parent is hovered over, target a child .el within it and use the --max-height variable which was defined by JavaScript.
  • el.scrollHeight is the height of the element including overflow, which will change dynamically based on the content of the element.
  • el.style.setProperty(...) sets the --max-height CSS variable which is used to specify the max-height of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.
  • Causes reflow on each animation frame, which will be laggy if there are a large number of elements beneath the element that is transitioning in height.

继续阅读 30秒学会 CSS 片段 – Height transition

Displays a menu overlay when the image is hovered.

  • Use a figure to wrap the img element and a div element that will contain the menu links.
  • Use the opacity and right attributes to animate the image on hover, to create a sliding effect.
  • Set the left attribute of the div to the negative of the element’s width and reset it to 0 when hovering over the parent element to slide in the menu.
  • Use display: flex, flex-direction: column and justify-content: center on the div to vertically center the menu items.

继续阅读 30秒学会 CSS 片段 – Menu on image hover

Creates a rotate effect for the image on hover.

  • Use scale and rotate when hovering over the parent element (a figure) to animate the image, using the transition property.
  • Use overflow: hidden on the parent container to hide the excess from the image transformation.

继续阅读 30秒学会 CSS 片段 – Image rotate on hover