
css
南有嘉念
一直在路上。
展开
-
利用伪元素制作字体图标并且鼠标经过时改变
1、下载字体图标2、将解压的项目放入到本地项目3、在解压后的iconfont.css文件引入到自己的项目中4、利用伪元素(此处用的after)来制作字体图标.box::after { position: absolute; right: 20px; top: 10px; content: "\e60c"; font-family: "iconfont";原创 2020-11-05 18:25:34 · 1242 阅读 · 0 评论 -
脚步加载效果-CSS3
最近项目上有这样一个需求,该项目的加载页需要有像踩雪一样的动作,像这样子。嗯哼,它到底是怎么踩得?首先将这4个脚印的图片以及动作分解,它的动作其实就是我踩、我收、我再踩、我再收…步骤1:首先我们需要绘制一个盒子来装该4四张图片(这里有一个小技巧就是4张图片的大小和该盒子的大小一样大,空白区域背景透明,再通过定位实现四张图片错位重叠)初步样子:步骤2:动画效果可以用CSS3中的透明度切换(opacity的0和1)、dispaly的none和block、或者利用缩放(scale中的0和1), 每原创 2020-07-17 15:28:04 · 310 阅读 · 0 评论 -
Vue的v-html样式更新
今天在写vue项目的时候,将后端获取的值赋值给v-html使用时,想对其v-html渲染的样式进行修改,然而尽管加了!important也修改无效。后来查询资料才知道,style标签中的scoped属性导致css仅对当前组件生效,而v-html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性。错误代码:<style lang="less" scoped>.ri...原创 2020-03-16 22:51:14 · 788 阅读 · 0 评论