前言
??CSS實現(xiàn)卡片邊框漸變動畫，速速來Get吧~
??文末分享源代碼斤吐。記得點贊+關(guān)注+收藏舔清！
1.實現(xiàn)效果
在這里插入圖片描述
2.實現(xiàn)步驟
- 父容器添加背景漸變色
在這里插入圖片描述
<div class="card"></div>
.card {
background: linear-gradient(0deg, #ff1d74, #e3820c 43%, #c28846);
border-radius: 15px;
box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
width: 300px;
height: 200px;
}
- 試著改變漸變色的角度，這里可以將漸變色改的明顯一點曲初，可以發(fā)現(xiàn)角度的變化体谒，會讓父容器的四邊呈現(xiàn)不同的色值
在這里插入圖片描述
- 那么也就是說，我們可以設(shè)置一個動畫臼婆，去改變漸變的角度抒痒，試試看，可以發(fā)現(xiàn)并木有生效
在這里插入圖片描述
.card{
+ animation: bg 2.5s linear infinite;
}
@keyframes bg {
0% {
border: 5px solid blue;
background: linear-gradient(0deg, #ff1d74, #e3820c 43%, #c28846);
}
100% {
border: 5px solid #fff;
background: linear-gradient(360deg, #ff1d74, #e3820c 43%, #c28846);
}
}
- 通過參考chokcoco-CSS @property颁褂，讓不可能變可能這篇文章故响，漸變是無法進行動畫效果的
- 使用 @Property
@property --rotate {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.card {
- background: linear-gradient(0deg, #ff1d74, #e3820c 43%, #c28846);
- background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
}
- 那么現(xiàn)在我們只要動態(tài)的改變漸變色的角度即可，重寫動畫
在這里插入圖片描述
@keyframes bg {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
- 為父容器添加一個偽元素颁独，預(yù)留出2px的border彩届，設(shè)置水平垂直居中
在這里插入圖片描述
.card{
+ position: relative;
+ cursor: pointer;
}
.card::after {
content: "";
background: #222;
position: absolute;
width: 296px;
height: 196px;
left: calc(50% - 148px);
top: calc(50% - 98px);
border-radius: 15px;
}
- 添加span標(biāo)簽，基于父容器absolute定位誓酒，z-index層級設(shè)置為1樟蠕，高于偽元素層級
在這里插入圖片描述
<div class="card">
<span>蘇蘇就是小蘇蘇888</span>
</div>
.card span {
position: absolute;
width: 100%;
text-align: center;
z-index: 1;
left: 0%;
top: 50%;
transform: translateY(-50%);
font-size: 26px;
font-weight: bold;
font-family: "Amatic SC";
color: #fff;
letter-spacing: 2px;
transition: all 0.5s;
}
- 為span添加hover事件贮聂，設(shè)置為漸變色
在這里插入圖片描述
.card:hover span {
background: linear-gradient(45deg, #ff1d74, #e3820c 43%, #c28846);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
- 為父容器添加transform，進行一定的旋轉(zhuǎn)
在這里插入圖片描述
.card {
+ transform: rotateX(10deg) rotateY(15deg);
}
- 父容器再次添加一個transform動畫寨辩，就完成啦~
在這里插入圖片描述
.card{
+ animation: bg 2.5s linear infinite, rotate 1s infinite alternate-reverse;
}
@keyframes rotate {
0% {
transform: rotateX(10deg) rotateY(15deg);
}
100% {
transform: rotateX(-10deg) rotateY(-15deg);
}
}
3.實現(xiàn)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 實現(xiàn)卡片邊框漸變動畫</title>
</head>
<link rel="stylesheet" href="../common.css" />
<style>
@import url("https://fonts.googleapis.com/css?family=Amatic+SC");
@property --rotate {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
body {
transform-style: preserve-3d;
perspective: 1800px;
}
.card {
background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
border-radius: 15px;
box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
width: 300px;
height: 200px;
animation: bg 2.5s linear infinite, rotate 1s infinite alternate-reverse;
position: relative;
cursor: pointer;
transform: rotateX(10deg) rotateY(15deg);
}
.card::after {
content: "";
background: #222;
position: absolute;
width: 296px;
height: 196px;
left: calc(50% - 148px);
top: calc(50% - 98px);
border-radius: 15px;
}
.card span {
position: absolute;
width: 100%;
text-align: center;
z-index: 1;
left: 0%;
top: 50%;
transform: translateY(-50%);
font-size: 26px;
font-weight: bold;
font-family: "Amatic SC";
color: #fff;
letter-spacing: 2px;
transition: all 0.5s;
}
.card:hover span {
background: linear-gradient(45deg, #ff1d74, #e3820c 43%, #c28846);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@keyframes rotate {
0% {
transform: rotateX(10deg) rotateY(15deg);
}
100% {
transform: rotateX(-10deg) rotateY(-15deg);
}
}
@keyframes bg {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
</style>
<body>
<div class="card">
<span>蘇蘇就是小蘇蘇888</span>
</div>
</body>
</html>
