Example code for implementing dotted border scrolling effect with CSS
|
We often see a cool effect where the mouse hovers over an area and the area displays a dotted border and line animation. How is this effect achieved? This article provides several ideas for your reference. Basic HTML <div class="box"> <p>Test Test</p> </div> Easy-way This is done with a background image. p must be centered vertically. Do you remember how to center it vertically? See another blog for details~
.box {
width: 100px;
height: 100px;
position: relative;
background: url(upload/2022/web/selection.gif);
p {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
height: calc(100% - 2px);
width: calc(100% - 2px);
background-color: #fff;
}
}repeating-linear-gradient 135 degree repeating linear gradient, p expands the height, and the white background covers the outer div gradient.
.box {
width: 100px;
height: 100px;
background: repeating-linear-gradient(
135 degrees,
transparent,
transparent 4px,
#000 4px,
#000 8px
);
overflow: hidden; // Create a new BFC to solve the problem of margin collapsing in the vertical direction animation: move 1s infinite linear;
p {
height: calc(100% - 2px);
margin: 1px;
background-color: #fff;
}
}
@keyframes move {
from {
background-position: -1px;
}
to {
background-position: -12px;
}
}linear-gradient&&background Draw a dotted line using linear gradient and background-size, and then move it to the four sides using background-position. The advantage of this method is that you can set the styles of the four edges and the direction of the animation separately. Careful students should find that the animation of the previous method is not clockwise or counterclockwise.
.box {
width: 100px;
height: 100px;
background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x;
background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
background-position: 0 0, 100% 0, 0 0, 0 100%;
animation: move2 1s infinite linear;
p {
margin: 1px;
}
}
@keyframes move2 {
from {
}
to {
background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
}
}linear-gradient&&mask The mask attribute specification has been included in the list of candidate recommended specifications. It is a foregone conclusion that it will be included in the established specifications and standards in the future. You can study it with confidence, as it will be useful in the future. Mask can also be used here to achieve the same animation, and can also achieve the effect of dotted border gradient color. The difference from background is that mask needs to have an opaque mask in the middle, otherwise the content of the p element will be covered.
.box {
width: 100px;
height: 100px;
background: linear-gradient(0deg, #f0e, #fe0);
-webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
linear-gradient(0deg, #fff, #fff) no-repeat; // You can use any opaque color here -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
-webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px;
overflow: hidden;
animation: move3 1s infinite linear;
p {
height: calc(100% - 2px);
margin: 1px;
background-color: #fff;
}
}
@keyframes move3 {
from {
}
to {
-webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px;
}
}Click here for the demo Summarize The above is the example code of CSS to achieve the dotted border scrolling effect introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: A brief introduction to web2.0 products and functions
>>: How to implement Vue binding class and binding inline style
Recommend
Three ways to implement animation in CSS3
This is a test of the interviewee's basic kno...
Using Openlayer in Vue to realize loading animation effect
Note: You cannot use scoped animations! ! ! ! via...
Detailed explanation of the basic functions and usage of MySQL foreign keys
This article uses examples to illustrate the basi...
How to set the width and height of html table cells
When making web pages, you often encounter the pr...
The table merges cells and the img image to fill the entire td HTML
Source code (some classes deleted): Copy code The ...
js to achieve image fade-in and fade-out effect
This article shares the specific code of js to ac...
MySQL latest version 8.0.17 decompression version installation tutorial
Personally, I think the decompressed version is e...
Summary of discussion on nginx cookie validity period
Every visit will generate Cookie in the browser, ...
zabbix custom monitoring nginx status implementation process
Table of contents Zabbix custom monitoring nginx ...
CSS Problems with Using Position:fixed and Margin-top Together on Same-Level Elements
Problem Description I want to use CSS to achieve ...
Detailed explanation of common commands in Docker repository
Log in docker login Complete the registration and...
Native js implementation of magnifying glass component
This article example shares the specific code for...
Apache Log4j2 reports a nuclear-level vulnerability and a quick fix
Apache Log4j2 reported a nuclear-level vulnerabil...
Analysis of the process of implementing Nginx+Tomcat cluster under Windwos
Introduction: Nginx (pronounced the same as engin...
How to use default values for variables in SASS
Variables defined in SASS, the value set later wi...