1. Modify scroll bar style
Before setting the scrollbar’s thumb style, you must first set the scrollbar’s width and height, otherwise the effect will not be visible.
/* Set scroll bar style */
/* Set the width and height of the scrollbar before setting scrollbar-thumb */
::-webkit-scrollbar-track {<!-- -->
border-radius: 0;
background-color: #f2f3f8;
}
::-webkit-scrollbar-thumb {<!-- -->
border-radius: 0;
border-radius: 5px;
background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
-webkit-transition: all .2s;
transition: all .2s;
}
::-webkit-scrollbar-corner {<!-- -->
background-color: #f2f3f8;
}
::-webkit-scrollbar {<!-- -->
width: 8px;
height: 8px;
}
2.The role of webkit
This is due to compatibility issues between different browsers. Webkit is the core of the Chrome browser. Can adapt to browsers with webkit as the core. Although edge can execute codes starting with –webkit, it is not a webkit-based browser and some problems may occur.
3. The difference between using transform directly and using animation
If you use @keyframes animation here, the avatar will not be able to rotate when the mouse leaves.
Using transform directly will produce a rotation effect.
.avatar-img {<!-- -->
box-sizing: border-box;
position: absolute;
border-radius: 50%;
bottom: 12px;
left: 50%;
padding: 5px;
transform: translateX(-50%);
width: 75px;
height: 75px;
transition: all 1s;
& amp;:hover {<!-- -->
// If animation is used, there will be no return to the original position when the mouse is moved.
transform: translateX(-50%) rotate(360deg);
}
4. Notes on transform
Here, transform was used to adjust the position before hovering, so when hovering, the transform must bring the code of the previous transform, otherwise the previously set transform will be cleared, and the position will be rotated out of order.
.avatar-img {<!-- -->
box-sizing: border-box;
position: absolute;
border-radius: 50%;
bottom: 12px;
left: 50%;
padding: 5px;
transform: translateX(-50%);
width: 75px;
height: 75px;
transition: all 1s;
& amp;:hover {<!-- -->
// If animation is used, there will be no return to the original position when the mouse is moved.
transform: translateX(-50%) rotate(360deg);
}
5. Apply background color to text
background: radial-gradient(...): This is a property used to create a radial gradient background. It uses theradial-gradientfunction to define the shape and color of the gradient.circle at 49.86% 48.37%: This part defines the center point position of the gradient. In this example, the center point of the gradient is located 49.86% horizontally and 48.37% vertically from the upper left corner of the container.#0090ff 0, #0089ff 3.33%, #3a82ff 6.67%, ...: This section defines the color and position of the gradient. The percentage value after each color indicates the position of that color in the gradient.-webkit-background-clip: text;: This attribute specifies the way the background is clipped, limiting the background to the visible part of the text.background-clip: text;: This attribute specifies the way the background is clipped, limiting the background to the visible part of the text.-webkit-text-fill-color: transparent;: This attribute sets the fill color of the text to transparent, making the text color consistent with the background color, thereby achieving the effect of text transparency.
background: radial-gradient(
circle at 49.86% 48.37%,
#0090ff 0,
#0089ff 3.33%,
#3a82ff 6.67%,
#717aff 10%,
#9371fb 13.33%,
#ae67ef 16.67%,
#c45de1 20%,
#d652d2 23.33%,
#e448c2 26.67%,
#ef3eb0 30%,
#f7369e 33.33%,
#fd318c 36.67%,
#ff317a 40%,
#ff3569 43.33%,
#fd3d57 46.67%,
#f94646 50%,
#f35035 53.33%,
#ea5a22 56.67%,
#e16308 60%,
#d56d00 63.33%,
#c97500 66.67%,
#bb7d00 70%,
#ac8300 73.33%,
#9d8900 76.67%,
#8c8f00 80%,
#7a9300 83.33%,
#669700 86.67%,
#4f9b00 90%,
#309e0e 93.33%,
#00a029 96.67%,
#00a23d 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
6. Oblique cutting animation
Set the ::before pseudo element, set the width to 0%, set the positioning, and set the parent element positioning to relative. Set left to a negative number, as if the pseudo-element is outside the button. And set the overflow of the parent element to hidden, so that only what is visible inside the border is visible. And set the z-index of the pseudo element to be lower than the z-index of the parent element, so that the text will appear on top of the pseudo element. Then set the
skewxoblique angle of the transform, so that there will be an effect of increasing the progress bar.
.el-button {<!-- -->
width: 80%;
transition: all 0.3s;
position:relative;
color:$strong;
background:#fff;
border:1px solid $strong;
padding:0 20px;
overflow:hidden;
z-index:1;
& amp;:hover {<!-- -->
color: #fff;
& amp;::before {<!-- -->
width:180%;
}
}
& amp;::before {<!-- -->
content: "";
height: 100%;
position: absolute;
left: -30px;
top: 0;
background-color: $strong;
transform: skewX(45deg);//slant cut
width: 0%;
transition: all 1s;
z-index: -1;
}
}
7. Three handwritten css3 border animations
The first two animations are animations based on changes in width and height, as well as setting delay time and positioning.
The third method is based on the change of scale
Only when the scale parameters are all 1, the element will be displayed, and at this time I only need to set x to 0, after to set y to 0; and then hover When , change them to 1 to complete the animation.
1. The first clockwise display
The core code is as follows
.type1::before {<!-- -->
top:0;
left: 0;
}
.type1::after {<!-- -->
right: 0;
bottom: 0;
}
.type1:hover::after {<!-- -->
width: 100%;
height: 100%;
border-bottom-color:orange;
border-left-color: orange;
/* The border color also needs to be delayed */
transition: border-color .5s ease-out 1s, width .5s ease-out 1s, height .5s ease-out 1.5s;
}
.type1:hover::before{<!-- -->
width: 100%;
height: 100%;
border-top-color: orange;
border-right-color: orange;
transition: width .5s ease-out,height .5s ease-out .5s;
}
2. In the second type, two borders are displayed at the same time starting from the total starting point.
The core code is as follows
/* The second type */
.type2::before {<!-- -->
top:0;
left: 0;
}
.type2::after {<!-- -->
top: 0;
left: 0;
}
.type2:hover::after {<!-- -->
width: 100%;
height: 100%;
border-bottom-color:orange;
border-left-color: orange;
/* The border color also needs to be delayed */
transition:height .5s ease-out,width .5s ease-out .5s;
}
.type2:hover::before{<!-- -->
width: 100%;
height: 100%;
border-top-color: orange;
border-right-color: orange;
transition: width .5s ease-out,height .5s ease-out .5s;
}
3. The third type, scale (increasing from the center point of the border)
The core code is as follows
/* The third type */
.type3::before, .type3::after {<!-- -->
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-transform-origin: center;
transform-origin: center;
}
.type3::before {<!-- -->
border-top: 5px solid orange;
border-bottom: 5px solid orange;
/* -webkit-transform: scale3d(0, 1, 1); */
/* transform: scale3d(0, 1, 1); */
transform: scale(0,1);
}
.type3::after {<!-- -->
border-left: 5px solid orange;
border-right: 5px solid orange;
/* -webkit-transform: scale3d(1, 0, 1); */
transform: scale(1, 0);
}
.type3:hover::before, .type3:hover::after {<!-- -->
/* -webkit-transform: scale3d(1, 1, 1); */
transform: scale(1,1);
transition: transform 1s, -webkit-transform 1s;
}
Common code settings
The general code mainly sets the layout. For example, the pseudo element sets absolute positioning, and the parent box sets relative positioning. The pseudo element setting first sets the width and height to 100%, then sets it to 0; then changes it when hovering.
structure code
code show as below
* {<!-- -->
margin:0;
padding:0;
}
.container div {<!-- -->
box-sizing: border-box;
width:400px;
height: 300px;
background:#333;
overflow: hidden;
}
.item {<!-- -->
border:0;
position:relative;
}
.item::before {<!-- -->
width:100%;
height: 100%;
box-sizing: border-box;
border: 5px solid transparent;
border-bottom: none;
border-left: none;
content: "";
position: absolute;
width:0;
height: 0;
}
.item::after {<!-- -->
box-sizing: border-box;
border: 5px solid transparent;
content: "";
position: absolute;
width: 0;
height: 0;
}
.container {<!-- -->
margin-top:100px;
display: flex;
justify-content: space-around;
}
8. Text underline animation
The two parameters of
background-sizemainly control the width and height of the background.
Initially set the width to 0 and set the background position to the lower left.In this way, when hovering, the underline will become larger from the left.
h4 {<!-- -->
display: inline-block;
background: linear-gradient(to right, red, rgba(255, 166, 0, 0.584)) no-repeat;
background-size: 0px 2px;
background-position: 0 bottom; //Left offset 0 and top offset 20px
transition: background-size 0.35s;
padding-bottom: 5px;
& amp;:hover {<!-- -->
background-size: 100% 2px;
background-position:0 bottom;
}
}