CSS 实现卡片边框渐变动画

1.实现效果

2.实现步骤

父容器添加背景渐变色

<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;
}

试着改变渐变色的角度，这里可以将渐变色改的明显一点，可以发现角度的变化，会让父容器的四边呈现不同的色值

那么也就是说，我们可以设置一个动画，去改变渐变的角度，试试看，可以发现并木有生效

.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);
}

那么现在我们只要动态的改变渐变色的角度即可，重写动画

@keyframes bg {0% {--rotate: 0deg;}100% {--rotate: 360deg;}
}

为父容器添加一个伪元素，预留出2px的border，设置水平垂直居中

.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标签，基于父容器absolute定位，z-index层级设置为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事件，设置为渐变色

.card:hover span {background: linear-gradient(45deg, #ff1d74, #e3820c 43%, #c28846);-webkit-background-clip: text;background-clip: text;color: transparent;
}

为父容器添加transform，进行一定的旋转

.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.实现代码

<!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 实现卡片边框渐变动画</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>

4.在线预览

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

CSS 实现卡片边框渐变动画相关推荐

纯css实现背景颜色渐变动画
纯css实现背景颜色渐变动画,代码及效果图如下. body {width: 100wh;height: 100vh;color: #fff;background: linear-gradient(-4 ...
html圆角边框背景颜色,CSS之圆角边框渐变的实现
注:测试浏览器版本号--chrome 75.0.3770.80:opera 60.0.3255.109:firefox 67.0:ie 11. 对于普通的边框渐变,其作用于圆角边框渐变时会覆盖掉圆角的 ...
纯CSS边框渐变动画
一:CSS与图片参考 <style> html,body,.box { height:100%; display:flex; align-items:center; justify-con ...
CSS字体颜色滚动渐变动画
显示效果如上图所示,此外还包含颜色滚动效果.代码如下: HTML: <p class="colorful ovh"><a href="https://w ...
html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
css3直线运动_用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
html div 虚线边框样式,纯CSS实现渐变虚线框和边框滚动动画
渐变虚线边框如果对边框的样式细节不是很在意,我们可以借助反向镂空的方法实现,也就是虚线原本实色的地方和周围颜色融为一体,看上去透明,而原来虚框透明的部分透出渐变背景色,于是看上去像是渐变色. 以下是 ...
谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！
谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画! 原文:谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画! 开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到 ...
css border渐变_css边框渐变
在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况 1.直角的背景渐变 border渐变进入平台注意问题:border-image的使用是不能实现圆角 ...

CSS 实现卡片边框渐变动画

1.实现效果

2.实现步骤

3.实现代码

4.在线预览

最后

CSS 实现卡片边框渐变动画相关推荐

最新文章

热门文章