分类:css

css

css特效之炫酷的发光按钮

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

yekong 1年前 (2023-08-30) 喜欢

css 实现水波纹效果

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

yekong 1年前 (2023-08-30) 喜欢

css特效卡片边缘流光效果

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

yekong 1年前 (2023-08-30) 喜欢

css 实现内发光效果

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

yekong 1年前 (2023-08-11) 喜欢

vue文字依次显示的效果

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

yekong 1年前 (2023-08-11) 喜欢

css 实现倾斜的斑马线效果

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

yekong 1年前 (2023-08-01) 喜欢

css 背景图片自适应不变形的实现思路

css 背景图片自适应不变形的实现思路
在项目开发过程中,一般背景图片使用一个背景图就可以了,但是在实际项目开发中,会遇到各种情况,比如同一个组件需要在不同的宽高下使用,这时候如果复用同一个背景图那么图片就会变形。 多背景图拼接 在之前的项目开发中,遇到这种情况会使用vue 实现安卓.9图片类似的效果九宫格图片,这种类...

yekong 1年前 (2023-07-29) 喜欢

css 进度条扫光效果

css 进度条扫光效果
通过css实现从左到右的扫光动画效果,可以用在进度条上,让进度条更加酷炫。 动画效果 代码 <div class="xiaoguo"> <span>测试</span> </div> <style...

yekong 1年前 (2023-07-21) 喜欢

css中calc的作用及使用

css中calc的作用及使用
在CSS中,calc()函数用于执行数学运算,它可以在CSS属性中计算值。calc()函数允许你使用加减乘除等数学操作符来组合不同类型的长度、百分比、视口单位和数值,生成最终的计算结果作为CSS属性的值。 以下是calc()函数的一些常见用途和作用: 动态计算长度值:calc(...

yekong 1年前 (2023-07-19) 喜欢