巧用 CSS 实现炫彩三角边框动画
Python微信订餐小程序课程视频
https://edu.csdn.net/course/detail/36074
Python实战量化交易理财系统
https://edu.csdn.net/course/detail/35475
最近有个小伙伴问我,在某个网站看到一个使用 SVG 实现的炫彩三角边框动画,问能否使用 CSS 实现:
很有意思的一个动画效果,立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画,非常的类似:
其核心就是利用了角向渐变(conic-gradient
),然后将图案的中心区域通过覆盖遮罩一个小号的图形实现。
然而,这个三角形动画里有两个难点:
- 整个图形是个三角形
在 CSS 中,我们可比较轻松的实现矩形与圆形,但是三角形这里无疑会棘手很多。
- 整个边框还附带阴影,并且阴影还是在边框的两侧
这里看似不复杂,实则困难重重,如果采用上述的方法,将图案的中心区域通过覆盖遮罩一个小号的图形实现镂空,那么另外一侧的阴影如何产生?即便使用 drop-shadow
,也会被覆盖的内侧图形给遮挡住。
当然,CSS 还是可以实现这个图形的,本文就将讲解如何使用 CSS 实现上述炫彩三角边框动画。
通过角向渐变实现主体动画
首先,我们还是需要借助角向渐变 conic-gradient
实现整个动画的主体。
<div>div>
@property --angle {syntax: '';inherits: false;initial-value: 0deg;
}div {width: 260px;height: 260px;background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));animation: rotate 3s infinite linear;
}@keyframes rotate {to {--angle: 360deg;}
}
核心就仅仅只是一个角向渐变图案,配合 CSS @Property,让整个效果旋转起来:
当然,如果这里觉得 CSS @Property 不好理解或者担心兼容性问题,可以替换成利用伪元素实现同样的图形,然后进行 transform: rotate()
旋转,效果一样。
基于矩形图形得到三角形
OK,接下来,我们需要基于矩形图形得到三角形图形,对于外圈的三角形,我们可以通过 clip-path
切割得到,也非常的简单:
div {width: 260px;height: 260px;background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));animation: rotate 3s infinite linear;+ clip-path: polygon(0 100%, 100% 100%, 50% 0);
}
即可得到如下效果:
这样,我们就得到了一个实心的三角形。接下来需要先办法把内部给掏空。
最简单的思路就是,通过叠加一个小一号的图形在中间,颜色和背景色一致即可:
完整的代码你可以戳这里 – CodePen Demo – Pure CSS Linear Triangle
但是,这样做有两个致命问题:
- 如果背景色不是实色而是渐变色,这个方法就失效了
- 这个方法实现的三角形边框内侧无法添加阴影效果
这两个缺陷都是不可接受的,所以我们必须寻找真正能够镂空中间的方式,镂空完成后,它的中心得是透明的。
因此,这里我们得使用 mask。
不过使用 mask 基于这样一个图形再实现一个小一号的三角形是比较麻烦的,我们相当于要实现这样一个镂空三角形图形,示意图如下:
这样一个图形,配合 clip-path
,就能得到一个三角形边框图形,啥意思呢,我这里制作了一个动图示意:
左边是利用 mask
实现遮罩后的图形,右边是利用 clip-path
切割后的图形,它们的效果叠加在一起,就能实现一个边框三角形。
当然,这里需要对 mask 掌握的比较深入,要使用 mask 切割一个内部镂空的三角形示意图如下:
OK,完整的代码是这样:
@property --angle {syntax: '';inherits: false;initial-value: 0deg;
}div {width: 260px;height: 260px;background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));clip-path: polygon(0 100%, 100% 100%, 50% 0);mask: linear-gradient(117deg, #000 55%, transparent 55%, transparent),linear-gradient(-117deg, #000 55%, transparent 55%, transparent),linear-gradient(#000, #000);mask-position: 0 0, 130px 0, 0 250px;mask-size: 130px 250px, 130px 250px, 100% 10px;mask-repeat: no-repeat;animation: rotate 3s infinite linear;
}@keyframes rotate {to {--angle: 360deg;}
}
我们就得到了一个内部镂空的三角形边框了:
利用 drop-shadow 添加上光影
最后一步就比较简单了,由于上述三角形已经是一个镂空图形,这里直接使用 drop-shadow
给元素加上一层光影效果即可,不过由于使用了 clip-path
,直接在原元素上添加的 drop-shadow
无法展示,这个好解决,我们只需要多套一层结构,将 drop-shadow
添加到父元素上即可:
<div class="g-container"><div class="g-triangle">div>
div>
@property --angle {syntax: '';inherits: false;initial-value: 0deg;
}
.g-container {width: 260px;height: 260px;filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%));
}
.g-triangle {width: 260px;height: 260px;background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));clip-path: polygon(0 100%, 100% 100%, 50% 0);mask: linear-gradient(117deg, #000 55%, transparent 55%, transparent),linear-gradient(-117deg, #000 55%, transparent 55%, transparent),linear-gradient(#000, #000);mask-position: 0 0, 130px 0, 0 250px;mask-size: 130px 250px, 130px 250px, 100% 10px;mask-repeat: no-repeat;animation: rotate 3s infinite linear;
}
@keyframes rotate {to {--angle: 360deg;}
}
这里又是一个小技巧,drop-shadow
是可以重复添加多个的,这里添加的两个阴影颜色就是 conic-gradient()
里设置的颜色,最终,我们就得到了题图所示效果:
完整的代码你可以戳这里 – CodePen Demo – Pure CSS Glowing Triangle
使用 clip-path 剪切环形三角形
上面利用了 clip-path
剪切外三角形,mask
镂空内三角形,经提醒,其实 clip-path
可以独自裁剪出一个环形三角形。
上述代码也可以简化成:
<div class="g-container"><div class="g-triangle">div>
div>
@property --angle {syntax: '';inherits: false;initial-value: 0deg;
}
.g-container {width: 260px;height: 260px;filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%));
}
.g-triangle {width: 200px;height: 200px;clip-path: polygon(50% 0%,0% 100%,8% 100%,50% 15%,88% 93%,7% 93%,7% 100%,100% 100%);background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));animation: rotate 3s infinite linear;
}
@keyframes rotate {to {--angle: 360deg;}
}
效果一样:
完整的代码你可以戳这里 – CodePen Demo – Pure CSS Glowing Triangle
这里有必要讲解一下,使用 clip-path
切割一个环形图案,是可以做到的。假设,我们需要一个正方形环形,其点顺序如下:
{clip-path: polygon(0% 0%,0% 100%,25% 100%,25% 25%,75% 25%,75% 75%,25% 75%,14% 100%,100% 100%,100% 0%);
}
即可得到:
同理,需要得到一个三角形环形,只需要 7 个点即可:
{clip-path: polygon(50% 0%,0% 100%,13% 100%,50% 20%,85% 90%,8% 90%,8% 100%,100% 100%);
}
效果如下:
这里有个很好用的工具,辅助制作 clip-path
图形, 感兴趣可以试下:CSS clip-path Editor
最后
了解上述完整代码,你可能还需要补齐一些基础 CSS 知识,可以按需点进去了解:
- clip-path:奇妙的 CSS shapes(CSS图形)
- CSS @property 自定义属性:CSS @property,让不可能变可能
- 利用 drop-shadow 生成不规则图形的光源及边框: 妙用 drop-shadow 实现线条光影效果
好了,本文到此结束,希望本文对你有所帮助
巧用 CSS 实现炫彩三角边框动画相关推荐
- html炫酷边框样式,利用SVG和CSS3来实现一个炫酷的边框动画
这篇文章主要介绍了利用SVG和CSS3来实现一个炫酷的边框动画,不使用JavaScript使得编写过程轻松了不少,需要的朋友可以参考下 今天我们来探索一下Carl Philipe Brenner的网站 ...
- 【css】炫酷半边边框效果div
这个效果很炫酷,在hover的时候,线条会靠近文本中心.用到了两个伪类实现. 以下是代码: <!DOCTYPE html> <html lang="en"> ...
- 01.个人项目难点汇总2 css定制科技感缺角边框
01.CSS3实现缺角矩形,折角矩形以及缺角边框 前言 前几天偶然看到缺角矩形这个功能,脑袋中第一想法是,搞个绝对定位的伪元素,哪里需要挡哪里,或者找UI小哥聊聊天,忽然灵光一闪,想起之前翻过的< ...
- 【纯CSS】CSS奇思妙想边框动画
今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框. 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样. bor ...
- css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
- 基于CSS实现的尖角提示符
CSS实现的尖角提示 一.概述 ...
- css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
- HTML+CSS实现炫酷的登录界面
你好,我是罡罡同学! 代码谱第一页忘掉心上人,最后一页...... 谢谢大家的支持,您的一键三连是 罡罡同学前进的最大动力! 打赏一点钱,帮我买包辣条,继续创作,谢大家! 一键三连 一键三连 一键三连 ...
- css3特效框,科技常识:6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效 的相关资料,希望小伙伴们看了有所帮助. ...
- CSS-使用background实现四个角边框
使用background实现四个角边框. CSS .question_title_content {background: linear-gradient(to left, rgba(51, 51, ...
最新文章
- 奥比中光Zora P1开发板评测报告
- 织梦gbk转utf8(数据库篇)
- Python面试题分享,不要错过哟!
- ubuntu16.04 编译出错:fatal error: SDL/SDL.h: No such file or directory
- windowswps怎么以文件形式发送_手机WPS怎么以文件形式发送
- IOS 创建简单表视图
- 关于自然语言处理,数据科学家需要了解的 7 项技术
- 关于计算机应用技术的创业策划书,创新创业项目计划书(双创博士)
- SPSS可以生成正交表吗?
- Oracle SYSAUX 表空间 说明
- Android sockot连接打印机EPSON ESC/POS指令打印
- MFC框架 afx_msg CComboBox OnDropdown
- android 远程代码,如何通过代码远程解锁Android手机
- HTML顶部状态栏更改背景,html css导航菜单点击后改变背景图片
- 喜报丨为工业安全赋能再添新动力 上海控安安全测评中心荣获CNAS认可
- TUSCANY SCA JAVA (二) 入门
- android plist表情,在iOS中的UITextView中不显示笑脸(表情符号)?
- Github 未添加密钥报错
- VC版本号与VS对应关系
- 使用Intel NCS2 算力棒 安装部署记录Windows 10, Intel openvino_toolkit_p_2019.1.148
热门文章
- python批量转换图片格式:JPEG到jpg
- Python 将JPEG图片批量改成jpg并删除JPEG图片
- 01—C语言基本语句
- java做抽奖系统怎么搞_JAVA 随机抽奖系统 实现教程及代码
- 浅析企业应收账款保理融资
- K.gather()
- 从跳频技术聊CDMA/WIFI之母海蒂·拉玛传奇的一生
- grub4dos引导Linux失败,Grub4dos引导Ubuntu
- 【leetcode-字符串】:重复的子字符串(是否由它的一个子串重复多次构成)
- 如何在word编辑文本框,教程来啦,怎样在word编辑文本框