- 如果你不想让用户复制网站的内容，这不是一个完美的方法。用户仍然可以通过禁用 CSS 或者开发人员工具来轻松达到目的。
Displays a hamburger menu which transitions to a cross on hover.
divwhich contains the top, bottom, and middle bars.
display: flex) with
wrap(alternatively, you can set both properties by a shorthand
flex-flow: column wrap).
rotate(45deg)), and the middle bar fading away by setting
transform-originis set to
leftso the bars rotate around the left point.
transition all 0.5sso that both
opacityproperties are animated for half a second.
A hover effect where the gradient follows the mouse cursor.
--yare used to track the position of the mouse on the button.
--sizeis used to keep modify of the gradient’s dimensions.
background: radial-gradient(circle closest-side, pink, transparent);creates the gradient at the correct postion.
Creates a toggle switch with CSS only.
<label>element to look like a toggle switch, and hiding the actual
<input>checkbox by positioning it offscreen. When clicking the label associated with the
<input>element, it sets the
<input>checkbox into the
forattribute associates the
<label>with the appropriate
<input>checkbox element by its
.switch:afterdefines a pseudo-element for the
<label>to create the circular knob.
input[type='checkbox']:checked + .switch:aftertargets the
<label>‘s pseudo-element’s style when the checkbox is
transform: translateX(20px)moves the pseudo-element (knob) 20px to the right when the checkbox is
background-color: #7983ff;sets the background-color of the switch to a different color when the checkbox is
<input>checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it is accessible via keyboard and screen readers.
transition: all 0.3sspecifies all property changes will be transitioned over 0.3 seconds, therefore transitioning the
background-colorand the pseudo-element’s
transformproperty when the checkbox is checked.
Reveals an interactive popout menu on hover and focus.
position: relativeon the reference parent establishes a Cartesian positioning context for its child.
position: absolutetakes the popout menu out of the flow of the document and positions it in relation to the parent.
left: 100%moves the the popout menu 100% of its parent’s width from the left.
visibility: hiddenhides the popout menu initially and allows for transitions (unlike
.reference:hover > .popout-menumeans that when
.referenceis hovered over, select immediate children with a class of
.popout-menuand change their
visible, which shows the popout.
.reference:focus > .popout-menumeans that when
.referenceis focused, the popout would be shown.
.reference:focus-within > .popout-menuensures that the popout is shown when the focus is within the reference.
Changes the appearance of a form if any of its children are focused.
:focus-withinapplies styles to a parent element if any child element gets focused. For example, an
inputelement inside a
Fades out the siblings of a hovered item.
transition: opacity 0.2sspecifies that changes to opacity will be transitioned over 0.3 seconds.
.sibling-fade:hover span:not(:hover)specifies that when the parent is hovered, select any
spanchildren that are not currently being hovered and change their opacity to