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
Mobile terminal adaptation makes px automatically converted to rem
Install postcss-pxtorem first: npm install postcs...
How to deal with time zone issues in Docker
background When I was using Docker these two days...
Detailed explanation of Vue parent-child component value transfer and one-way data flow issues
Table of contents Preface 1. Parent component pas...
Solution to span width not being determined in Firefox or IE
Copy code The code is as follows: <html xmlns=...
How to split and merge multiple values in a single field in MySQL
Multiple values combined display Now we have th...
Detailed example of reading speed of js objects
1. Accessing literals and local variables is the ...
About 3 common packages of rem adaptation
Preface I wrote an article about rem adaptation b...
Detailed explanation of how tomcat calls Servlet initialization from source code analysis
Table of contents introduction 1. Code to start t...
HTML Basics Must-Read - Comprehensive Understanding of CSS Style Sheets
CSS (Cascading Style Sheet) is used to beautify H...
Summary of all HTML interview questions
1. The role of doctype, the difference between st...
How to configure virtual user login in vsftpd
yum install vsftpd [root@localhost etc]# yum -y i...
Front-end JavaScript Promise
Table of contents 1. What is Promise 2. Basic usa...
A brief discussion on whether CSS will block page rendering
Maybe everyone knows that js execution will block...
Pure CSS drop-down menu
Achieve results Implementation Code html <div ...
JavaScript using Ckeditor + Ckfinder file upload case detailed explanation
Table of contents 1. Preparation 2. Decompression...