首页 > 其他分享 >CSS背景过滤器-毛玻璃属性(backdrop-filter)

CSS背景过滤器-毛玻璃属性(backdrop-filter)

时间:2023-02-19 23:56:09浏览次数:49  
标签:hue filter CSS backdrop 0px border 毛玻璃

例如做一个边框特效

@keyframes huerotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rorate(360deg);
  }
}
.border{
  border-bottom: 1px solid #aaa;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-image: linear-gradient(45deg, gold, deeppink) 1;
  clip-path: inset(0px round 10px);
  animation: huerotate 6s infinite linear;
  backdrop-filter: blur(1px);//毛玻璃属性
  filter: hue-rotate(360deg);
}

标签:hue,filter,CSS,backdrop,0px,border,毛玻璃
From: https://www.cnblogs.com/echohye/p/17135977.html

相关文章

  • Optimizing Top-N Collaborative Filtering via Dynamic Negative Item Sampling
    目录概符号说明MotivationDynamicNegativeSamplingZhangW.,ChenT.,WangJ.andYuY.Optimizingtop-ncollaborativefilteringviadynamicnegativeitemsamp......
  • java的filter如何实现utf-8编码转换
    importjavax.servlet.*;importjavax.servlet.annotation.WebFilter;importjavax.servlet.http.HttpServletRequest;importjava.io.IOException;@WebFilter("/*")......
  • 前端-css篇
    概念构建CSS盒模型标准盒子模型ie盒子模型margin重叠问题官方解释:块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距,其大小为单个......
  • uni-app:template、js、css中判断平台(hbuilderx 3.6.18)
    一,代码:<template><viewstyle=""><viewstyle="margin-top:30rpx;width:710rpx;margin-left:20rpx;text-align:center;font-size:50rpx;"><......
  • 摄像头视频云台控制PTZ前端html css原生样式源码分享
        ​<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • css表盘刻度
    画表盘刻度有如下思路1.刻度使用真实节点矩形实现(节点多)若配合投影,可以减少至1/4的节点。1.1若节点定位在0点,则旋转源点必须是圆心,用transform-origin带上半径处理......
  • Java Web(三)HTML 和 CSS
    HTML和CSS什么是HTML?HTML是一门语言,所有的网页都是用HTML这门语言编写出来的HTML(HyperTextMarkupLanguage):超文本标记语言 超文本:超越了文本的限制,比普通文本更强大......
  • JCB Excavator 3CX 4CX Changing the Oil and Filter Guide
    WhendrainingJCB760SeriesPowershiftgearboxesitisrecommendedthattheoilisdrainedthroughthecoverplateAtomakesurethatthedebriscollectedin......
  • 使用Animate.css制作超炫的CSS3动画
    Animate.css是一个超强的CSS3动画库,它使用简单,只需要将相关效果对应的class加入页面元素中,就能实现翻转、滑动、旋转等等复杂超炫的跨浏览器的动画效果,它让开发这制作页面动......
  • css3实现一个div设置多张背景图片及background-image属性
    引子以前做网页布局的时候,一个div只能设置一张背景图片,设置多个背景的话,要用多个div嵌套才能实现,这样兼容性比较好。若您的网站要求兼容浏览器低版本,建议用这种方法。css3的......