分类:css

css

多个字体eot woff2 woff otf ttf文件如何引入?

多个字体eot woff2 woff otf ttf文件如何引入?
我们在下载字体文件后会发现字体有很多种,格式也各不相同eot woff2 woff otf ttf都有,导致我们不知道如何引入了! 这里我们可以使用CSS的@font-face规则来引入多种字体文件格式。这样做的好处是,不同的浏览器可以选择支持的最佳文件格式来加载字体。以下是如何...

yekong 1周前 (09-17) 24℃ 0喜欢

css实现旋转动画效果

css实现旋转动画效果
数据可视化大屏项目中,会给图标增加一些旋转动画效果作为装饰,今天通过css来实现一个旋转动画效果。 动画效果 <div class="icons"> <div class="iconBg"></di...

yekong 2周前 (09-13) 42℃ 0喜欢

css从左到右多段背景色渐变

css从左到右多段背景色渐变
要从左到右创建多段背景色渐变,您可以在linear-gradient中定义多个颜色停靠点。每个颜色停靠点都可以有一个与其相关的位置,这决定了该颜色在渐变中的位置。 以下是一个示例,展示了如何从左到右创建一个多段的渐变,从红色到黄色(在25%的位置),然后到绿色(在50%的位置),...

yekong 2周前 (09-12) 33℃ 0喜欢

css特效之炫酷的发光按钮

css特效之炫酷的发光按钮
最近看到一个css特效之炫酷的发光按钮,感觉很不错,整理过来,将来可能会用到。 效果整理自:css特效之炫酷的发光按钮 效果截图 动态效果 效果代码 <!DOCTYPE html> <html lang="en"> <head...

yekong 4周前 (08-30) 65℃ 0喜欢

css 实现水波纹效果

css 实现水波纹效果
最近看到一个css 实现水波纹效果,感觉很不错,整理过来,将来可能会用到。 效果整理自:css特效之底部波浪动画 效果截图 动态效果 效果代码 <!DOCTYPE html> <html lang="en"> <hea...

yekong 4周前 (08-30) 52℃ 0喜欢

css特效卡片边缘流光效果

css特效卡片边缘流光效果
最近看到一个css特效卡片边缘流光效果,感觉很不错,整理过来,将来可能会用到。使用@keyframes rotation关键帧动画,让圆环从 0 度旋转到 360 度,实现发光彩色圆环特效的卡片 效果整理自:css特效之发光卡片 效果截图 动态效果 效果代码 <!DOC...

yekong 4周前 (08-30) 57℃ 0喜欢

css 实现内发光效果

css 实现内发光效果
数据可视化大屏 项目开发中,需要一个内部发光的效果,使用图片的话,在适配宽高的时候可能会变形,所以这里用css的内发光效果来实现效果。 效果截图 关键代码 .itemInfo { position: relative; width: 100%; height: 10...

yekong 2个月前 (08-11) 90℃ 0喜欢

vue文字依次显示的效果

vue文字依次显示的效果
动态效果 你可以使用CSS动画或JavaScript来实现文字依次显示的效果。以下是一个使用Vue和CSS动画的示例代码: <template> <div class="text-container"> <span...

yekong 2个月前 (08-11) 151℃ 0喜欢

css 实现倾斜的斑马线效果

css 实现倾斜的斑马线效果
倾斜的斑马线效果可以通过CSS中的linear-gradient和repeating-linear-gradient来实现。这里有一个例子: body { min-height: 100vh; display: flex; align-items: center; ...

yekong 2个月前 (08-01) 94℃ 0喜欢