整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
這個(gè)網(wǎng)站（minimal-portfolio-swart.vercel.app）發(fā)現(xiàn)一個(gè)不錯(cuò)的交互效果，用戶體驗(yàn)效果很不錯(cuò)。如上圖所示，這個(gè)卡片上有一根白色的線條圍繞著卡片移動(dòng)，且在線條的卡片內(nèi)部跟隨這一塊模糊陰影，特別是在線條經(jīng)過(guò)卡片圓角部分有特別絲滑的感覺(jué)。
今天的文章就來(lái)解析如何實(shí)現(xiàn)這種效果，文末附源碼預(yù)覽地址。根據(jù)示例圖片分析需要實(shí)現(xiàn)的功能點(diǎn)如下：
這里為什么單獨(dú)說(shuō)明圓角部分是因?yàn)檫@塊需要特殊處理，請(qǐng)看后面的文章。
看到這個(gè)效果首先感覺(jué)是絲滑，沿著邊框移動(dòng)的動(dòng)畫元素如果是根據(jù)當(dāng)前邊框?qū)崟r(shí)計(jì)算而來(lái)的話，那么難度和算法會(huì)勸退很多人。
需要換一種思路，本質(zhì)移動(dòng)的線條元素和邊框并沒(méi)有關(guān)系，而是一個(gè)元素沿著邊框移動(dòng)，線條和卡片內(nèi)部的陰影就是一個(gè)元素，通過(guò)某種透視的方式產(chǎn)生了這種效果。
通過(guò)透視的方式實(shí)現(xiàn)一個(gè)邊框效果，我們可以用2個(gè)盒子嵌套，父級(jí)設(shè)置1像素的padding，如下代碼簡(jiǎn)單的實(shí)現(xiàn)一個(gè)邊框效果。
.outer {
width: 400px;
height: 200px;
margin: 100px;
background: rgb(54, 224, 202);
padding: 1px;
position: relative;
}
.inner {
background: rgb(99, 99, 99);
width: 100%;
height: 100%;
}
效果圖：
然后增加一個(gè)子元素作為移動(dòng)的元素，這個(gè)元素基于父級(jí)定位在邊框位置，由于動(dòng)畫是沿著卡片內(nèi)部四周移動(dòng)，要確保在每一條邊上的透出的長(zhǎng)度保持一致，所有創(chuàng)建的這個(gè)子元素是一個(gè)正方形。
.moving-element {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
background: #fff;
animation: moveAround 8s linear infinite;
}
并對(duì)這個(gè)元素增加簡(jiǎn)單的animation動(dòng)畫，沿著內(nèi)邊框移動(dòng)。
這個(gè)動(dòng)畫需要注意的一個(gè)點(diǎn)是要使元素在移動(dòng)的過(guò)程中保持勻速的動(dòng)畫，需要計(jì)算每個(gè)關(guān)鍵幀之間的距離，并根據(jù)這些距離來(lái)調(diào)整每個(gè)關(guān)鍵幀的百分比。這樣可以確保元素在每個(gè)時(shí)間段內(nèi)移動(dòng)的距離與時(shí)間成正比，從而實(shí)現(xiàn)真正的勻速移動(dòng)。
這里我們以上面的卡片舉例，其寬度為400px，高度為200px，元素沿矩形的邊框移動(dòng)。
動(dòng)畫代碼如下：
@keyframes moveAround {
0%, 100% {
top: 0px;
left: 0px;
}
33.33% {
top: 0px;
left: calc(100% - 80px);
}
50% {
top: calc(100% - 80px);
left: calc(100% - 80px);
}
83.33% {
top: calc(100% - 80px);
left: 0px;
}
}
最終完成的簡(jiǎn)單版動(dòng)畫效果如下：
這里為了方便大家看增加了透明度展示內(nèi)部移動(dòng)的元素，若去掉透明度則只有邊框上的一根線。
仔細(xì)看上面的圖可以發(fā)現(xiàn)在邊框盡頭時(shí)的過(guò)渡效果不好，瞬間從一條邊切換到另一條邊。首先還原網(wǎng)站的效果，增加邊框圓角，然后將內(nèi)部移動(dòng)的元素通過(guò)圓角變成一個(gè)圓形，這時(shí)候還需要同步調(diào)整內(nèi)部元素的定位和動(dòng)畫移動(dòng)時(shí)設(shè)置的定位，保證內(nèi)部圓形的中心和邊框的一致。
增加圓角處理：
.outer {
border-radius: 20px;
}
.inner {
border-radius: 20px;
}
.moving-element {
border-radius: 40px;
/* 圓心和邊框一致 */
transform: translate(-40px, -40px);
}
調(diào)整動(dòng)畫過(guò)程中的定位：
@keyframes moveAround {
0%, 100% {
top: 0px;
left: 0px;
}
33.33% {
top: 0px;
left: 100%;
}
50% {
top: 100%;
left: 100%;
}
83.33% {
top: 100%;
left: 0px;
}
}
此時(shí)的動(dòng)畫效果：
此時(shí)的邊框位置動(dòng)畫已經(jīng)很接近網(wǎng)站的效果，進(jìn)一步觀察在圖中的效果可以發(fā)現(xiàn)在邊框角落的位置有一點(diǎn)卡頓的感覺(jué)，這是因?yàn)檫吙蛭恢梦覀冊(cè)O(shè)置了圓角，但是元素移動(dòng)的軌跡是直角，導(dǎo)致視覺(jué)上停頓了一下。這里我們需要進(jìn)一步優(yōu)化animation。設(shè)置圓角后內(nèi)部動(dòng)畫元素移動(dòng)的點(diǎn)應(yīng)該從4個(gè)變成8個(gè)，且對(duì)應(yīng)的位置需要和圓角的大小一一對(duì)應(yīng)才能保障流暢的動(dòng)畫效果。
如下所示黑色圓點(diǎn)是到四個(gè)頂點(diǎn)的動(dòng)畫坐標(biāo)，新的綠色圓點(diǎn)是基于圓角后的動(dòng)畫移動(dòng)坐標(biāo)。
基于上面的動(dòng)畫百分比算法計(jì)算出最新的比例及坐標(biāo)代碼如下：
@keyframes moveAround {
0% { left: 40px; top: 0px; }
28.93% { left: 360px; top: 0px; }
33.99% { left: 400px; top: 40px; }
44.82% { left: 400px; top: 160px; }
49.88% { left: 360px; top: 200px; }
78.81% { left: 40px; top: 200px; }
83.87% { left: 0px; top: 160px; }
94.70% { left: 0px; top: 40px; }
100% { left: 40px; top: 0px; }
}
這里的動(dòng)畫需要注意的是圓角部分綠色按鈕之間的動(dòng)畫距離需要使用使用勾股定理計(jì)算。比如右上角的兩個(gè)點(diǎn)之間的計(jì)算方式是：
從 (360, 0) 到 (400, 40) = √((400-360)2 + (40-0)2) = √(1600 + 1600) = √3200 ≈ 56.57px
此時(shí)的動(dòng)畫效果：
現(xiàn)在就差最后的陰影部分還未實(shí)現(xiàn)，仔細(xì)觀察移動(dòng)的線條并不是全實(shí)心純色，而是有漸變的效果，目前移動(dòng)的元素是一個(gè)正方形，設(shè)置背景色為徑向漸變即可，修改背景色的代碼如下：
background-image: radial-gradient(#fff 40%,transparent 80%);
現(xiàn)在還需要將內(nèi)部的漸變進(jìn)一步模糊，注意這里僅僅是模糊元素背后的背景，不能影響卡片上面其他的元素內(nèi)容展示。這里我們使用backdrop-filter設(shè)置blur模糊效果。
CSS屬性 backdrop-filter 用于在元素后面的區(qū)域上應(yīng)用圖形效果（如模糊或顏色偏移）。這個(gè)屬性可以讓你對(duì)元素背后的背景進(jìn)行處理，而不影響元素本身的前景內(nèi)容。
最后進(jìn)一步調(diào)整顏色還原網(wǎng)站的效果如下：
這個(gè)效果不僅可以做卡片展示，作為按鈕的背景效果也很不錯(cuò)：
到此整體的代碼實(shí)現(xiàn)過(guò)程就結(jié)束了，完整還原的網(wǎng)站的動(dòng)畫效果。這是一個(gè)對(duì)用戶體驗(yàn)很不錯(cuò)的卡片效果，原網(wǎng)站實(shí)現(xiàn)的部分細(xì)節(jié)不一樣，整體實(shí)現(xiàn)原理差不多，基于兩個(gè)元素的1像素間距透出移動(dòng)的線條，配合使用backdrop-filter設(shè)置純背景模糊效果，有興趣的可以嘗試看看。
作者:南城
來(lái)源-微信公眾號(hào):南城大前端
出處:https://mp.weixin.qq.com/s/g-_3iD97PxmGL7RGwRrSvg
置邊框最常使用border，比如這樣：
border: 1px dashed #333;這是最常規(guī)的方法了，今天再來(lái)說(shuō)說(shuō)其他兩種方法，
這也算是一種比較常規(guī)的方法了，
outline: 1px solid;
但需要注意的是，outline是在容器的最外部，與border的渲染還是有點(diǎn)區(qū)別的，同時(shí)對(duì)比下：
border: 1px dashed #333;
outline: 1px solid;
外部實(shí)線是outline，內(nèi)部虛線是border，為了一致，可以設(shè)置outline-offset往內(nèi)縮一點(diǎn)：
outline-offset: -1px;
這是本文的重點(diǎn)，我也是剛get到此項(xiàng)技能，之前一直不知道background居然如此強(qiáng)大，直接上代碼：
background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px, #ffffff;
這里我們只設(shè)置了上面看，而且還是虛線的，做一說(shuō)明這種方式的強(qiáng)大，再把其他邊框補(bǔ)上去：
background:
linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px,
linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 100%/9px 1px,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y 0 0/1px 9px,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y 100% 0px/1px 9px,
#ffffff;
可見(jiàn)，使用background非常的靈活，邊框的位置可以任意調(diào)整。
現(xiàn)在我們已經(jīng)掌握這幾方式，但本文的重點(diǎn)是上面這種，我們現(xiàn)在來(lái)動(dòng)手操練下：
background: linear-gradient(90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 0/100% 5px
,
linear-gradient(-90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 100%/100% 4px,
linear-gradient(180deg, #29bdd9 0%, #276ace 100%) repeat-y 0 0/4px 100%,
linear-gradient(0deg, #29bdd9 0%, #276ace 100%) repeat-y 100% 0/4px 100%,
#eee;
.box {
background:
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.box:hover {
animation: linearGradientMove .3s infinite linear;
}
@keyframes linearGradientMove {
100% {
background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
}
}
.box {
background:
linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
linear-gradient(0deg, #FF8235,#30E8BF, #FF8235) repeat-y,
linear-gradient(0deg, #FF8235,#30E8BF, #FF8235) repeat-y;
background-size: 100% 8px, 100% 8px, 8px 100%, 8px 100%;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.box:hover {
animation: linearGradientMove 1s infinite linear;
}
@keyframes linearGradientMove {
100% {
background-position: 200px 0, -200px 100%, 0 -200px, 100% 100px;
}
}
以上就是設(shè)置邊框的幾個(gè)小技巧。
參考：
https://www.cnblogs.com/coco1s/p/14291567.html
模型是CSS布局的基礎(chǔ)，理解它的每個(gè)組成部分對(duì)于創(chuàng)建整潔、響應(yīng)式的網(wǎng)頁(yè)至關(guān)重要。本文將深入探討盒模型的四個(gè)主要組成部分：邊距（Margin）、邊框（Border）、填充（Padding）和內(nèi)容（Content），并解釋它們?nèi)绾喂餐ぷ鱽?lái)創(chuàng)建網(wǎng)頁(yè)布局。
在CSS中，盒模型是一種用于設(shè)計(jì)和布局的概念模型，它將HTML元素視為一個(gè)盒子。這個(gè)盒子包括了元素的內(nèi)容、內(nèi)邊距、邊框和外邊距。理解盒模型對(duì)于控制元素的大小和在頁(yè)面上的位置至關(guān)重要。
+-------------------------------+
| Margin |
| +-------------------------+ |
| | Border | |
| | +-------------------+ | |
| | | Padding | | |
| | | +-------------+ | | |
| | | | Content | | | |
| | | +-------------+ | | |
| | +-------------------+ | |
| +-------------------------+ |
+-------------------------------+
每個(gè)盒子從里到外包括：
邊距是盒子外部的空間，它決定了元素之間的間隔。邊距是透明的，不可見(jiàn)，不會(huì)被背景顏色或背景圖片覆蓋。
/* 單邊邊距設(shè)置 */
.element {
margin-top: 10px; /* 上邊距 */
margin-right: 15px; /* 右邊距 */
margin-bottom: 10px; /* 下邊距 */
margin-left: 15px; /* 左邊距 */
}
/* 簡(jiǎn)寫形式 */
.element {
margin: 10px 15px; /* 上下邊距 | 左右邊距 */
}
邊距可以用來(lái)創(chuàng)建元素之間的空間，或者將元素與頁(yè)面邊緣分開。當(dāng)兩個(gè)元素的垂直邊距相遇時(shí)，它們會(huì)合并成一個(gè)邊距，這個(gè)現(xiàn)象稱為邊距折疊。
邊框是盒子的一個(gè)可視化組件，圍繞著內(nèi)邊距和內(nèi)容。邊框的樣式、寬度和顏色都可以自定義。
.element {
border-style: solid; /* 邊框樣式 */
border-width: 2px; /* 邊框?qū)挾?*/
border-color: black; /* 邊框顏色 */
}
/* 簡(jiǎn)寫形式 */
.element {
border: 2px solid black;
}
邊框?qū)τ谕怀鲲@示元素或分隔內(nèi)容非常有用。你還可以只為邊框的一邊或幾邊設(shè)置樣式。
填充是圍繞內(nèi)容內(nèi)部的空間，它可以增加內(nèi)容和邊框之間的距離。與邊距不同，填充區(qū)域會(huì)被背景顏色或背景圖片覆蓋。
.element {
padding-top: 5px; /* 上填充 */
padding-right: 10px; /* 右填充 */
padding-bottom: 5px; /* 下填充 */
padding-left: 10px; /* 左填充 */
}
/* 簡(jiǎn)寫形式 */
.element {
padding: 5px 10px; /* 上下填充 | 左右填充 */
}
填充對(duì)于控制元素內(nèi)部的空白區(qū)域非常有用，它可以幫助改善內(nèi)容的可讀性。
內(nèi)容是盒子中的文字、圖片或其他媒體。內(nèi)容的大小可以通過(guò)設(shè)置width和height屬性來(lái)控制，但實(shí)際可見(jiàn)區(qū)域的大小還會(huì)受到內(nèi)邊距和邊框的影響。
.element {
width: 200px;
height: 150px;
}
內(nèi)容區(qū)域是設(shè)計(jì)和布局的核心，所有的文本和媒體都在這里顯示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin, Border, Padding Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: auto;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header {
background-color: #007bff;
color: white;
padding: 20px;
text-align: center;
}
.content {
padding: 20px;
border: 1px solid #ddd;
margin: 20px;
}
.box {
background-color: #007bff;
color: white;
padding: 10px;
margin: 10px;
border: 3px solid #0056b3;
text-align: center;
}
.footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Welcome to My Page</h1>
</div>
<div class="content">
<h2>Understanding CSS Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. This model allows us to create space between elements and style them effectively.</p>
<div class="box">Content Box</div>
</div>
<div class="footer">
Footer Content
</div>
</div>
</body>
</html>
理解盒模型是前端開發(fā)的基礎(chǔ)，它允許我們精確控制元素的布局和間距。通過(guò)恰當(dāng)?shù)厥褂眠吘唷⑦吙颉⑻畛浜蛢?nèi)容，我們可以創(chuàng)建出既美觀又功能強(qiáng)大的網(wǎng)頁(yè)設(shè)計(jì)。隨著響應(yīng)式設(shè)計(jì)的興起，現(xiàn)代CSS框架已經(jīng)將盒模型的概念整合進(jìn)其核心，使得跨設(shè)備布局變得更加一致和簡(jiǎn)單。
在日常開發(fā)中，經(jīng)常使用開發(fā)者工具來(lái)檢查和調(diào)試盒模型的各個(gè)部分，確保我們的樣式表現(xiàn)按照預(yù)期工作。掌握盒模型，你將能夠更加自信地處理網(wǎng)頁(yè)布局的挑戰(zhàn)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
