使用css3制作一个鼠标经过文本时，显示出边框的动画特效 

.bordered-text {
  padding: 5px 10px; /* Adjust padding as needed */
  border: 2px solid transparent; /* Initially transparent border */
  transition: border-color 0.3s ease; /* Smooth transition for border color */
}

.bordered-text:hover {
  border-color: #007bff; /* Border color on hover (example: blue) */
}


/* Alternative styling with background transition */
.bordered-text-alt {
  padding: 5px 10px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.bordered-text-alt:hover {
  background-color: rgba(0, 123, 255, 0.1); /* Subtle blue background on hover */
}



/* Example with more advanced animation (border appearing from top) */
.bordered-text-animated {
  padding: 5px 10px;
  position: relative; /* Required for pseudo-element positioning */
  overflow: hidden; /* Hide pseudo-element initially */
}

.bordered-text-animated:before {
  content: '';
  position: absolute;
  top: -100%; /* Initially hidden above the text */
  left: 0;
  width: 100%;
  height: 2px; /* Border thickness */
  background-color: #007bff; /* Border color */
  transition: top 0.3s ease; /* Animate top position */
}


.bordered-text-animated:hover:before {
  top: 0; /* Show border on hover */
}

.bordered-text-animated:after {
  content: '';
  position: absolute;
  bottom: -100%; /* Initially hidden below the text */
  left: 0;
  width: 100%;
  height: 2px; /* Border thickness */
  background-color: #007bff; /* Border color */
  transition: bottom 0.3s ease; /* Animate bottom position */
}

.bordered-text-animated:hover:after {
  bottom: 0; /* Show border on hover */
}


/* Add left and right borders (similar to top and bottom) for complete border animation */
.bordered-text-animated:hover:before,
.bordered-text-animated:hover:after {
    height: 100%;
    width: 2px;
}
.bordered-text-animated:before {
    top: 0;
    left: -100%;
    transition: left 0.3s ease;
}
.bordered-text-animated:hover:before {
    left: 0;
}
.bordered-text-animated:after {
    bottom: 0;
    right: -100%;
    transition: right 0.3s ease;
}
.bordered-text-animated:hover:after {
    right: 0;
}

How to use it:

  1. Add the CSS: Include the CSS code in your <style> tag in the <head> of your HTML document, or in a separate CSS file linked to your HTML.

  2. Apply the class: Add the bordered-text, bordered-text-alt or bordered-text-animated class to the HTML element containing the text you want to style. For example:

    <p class="bordered-text">This text will have a border on hover.</p>
<span class="bordered-text-alt">This text will have a background change on hover.</span>
<div class="bordered-text-animated">This text will have an animated border.</div>

Explanation:

  • transition: This property is key for smooth animations. It specifies which properties to animate (border-color, background-color, etc.), the duration of the animation (0.3s), and the timing function (ease).
  • :hover: This pseudo-class applies styles when the mouse cursor is over the element.
  • transparent: Setting the initial border-color to transparent makes the border invisible until the hover effect is triggered.
  • Alternative Styling: The bordered-text-alt class demonstrates an alternative hover effect using a background color change instead of a border.
  • Animated Border: The bordered-text-animated example uses :before and `
posted @ 2024-12-12 06:11  王铁柱6  阅读(61)  评论(0)    收藏  举报