功能介绍:借助SVG滤镜
实现三角播放箭头定时变色,借助SVG滤镜
,其实也可以快速达成,省去了上面还需要叠加一个 filter: contrast()
。
1、html代码:
<svg width="0">
<filter id="blur" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="10" />
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0 10"/>
</feComponentTransfer>
</filter>
</svg><div class="g-triangle"></div>
<div class="g-triangle g-triangle-inset"></div>
<svg width="0">
<filter id="blur" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="10" />
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0 10"/>
</feComponentTransfer>
</filter>
</svg>
2、css代码:
html, body {
width: 100%;
height: 100%;
}
body {
display: flex;
}
.g-triangle {
position: relative;
margin: auto;
width: 1px;
height: 1px;
padding-top: 300px;
animation: change 10s infinite linear;
}
.g-triangle::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 60px solid transparent;
border-left: 120px solid #f48;
filter: url(#blur);
}
.g-triangle::after {
content: "";
position: absolute;
top: 12px;
left: -5px;
width: 0;
height: 0;
border: 60px solid transparent;
border-left: 120px solid #f48;
transform: scale(.75);
filter: blur(8px);
}
.g-triangle-inset::before {
filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blur' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 10'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#blur");
}
@keyframes change {
100% {
filter: hue-rotate(360deg);
}
}
以上是编程学习网小编为您介绍的“借助SVG滤镜实现三角播放箭头定时变色”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:借助SVG滤镜实现三角播放箭头定时变色
基础教程推荐
猜你喜欢
- JavaScript将相对地址转换为绝对地址示例代码 2024-02-11
- Ajax的jsonp方式跨域获取数据的简单实例 2022-12-28
- Ajax中post方法直接返回以0开头数字出错问题分析 2023-01-31
- 兼容各个浏览器的技巧 2022-10-16
- css实现鼠标滑过改变文字(中文变英文) 2024-01-20
- threejs后期处理的基本使用方法之加特效 2024-01-07
- 魔兽世界火法神器故事全面介绍_wow火法神器获得方法推荐 2024-03-09
- 如何使用linux命令行发送HTML电子邮件 2023-10-25
- date.parse在IE和FF中的区别 2024-01-08
- cookie的优化与购物车实例 2024-04-15