![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
土垚金鑫
软件
展开
-
引导页-使用box-shadow作为遮罩层
引导页-使用box-shadow作为遮罩层,能让中间部分为空白height: 70px; width: 130px; padding: 20px; position: absolute; top: 25px; left: 1213.3px; z-index: 999998; box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 1px 898px; border: 1px solid red;...原创 2021-01-11 16:56:05 · 635 阅读 · 0 评论 -
vue项目登录页-实现字体动画案例
vue项目登录页-实现字体动画案例实现思路:1,让每个字都包含在span标签中,span标签的display:inner-block2,页面刚生成时(动画之前)设置margin宽度为80px,opacity为0.23,页面渲染完后(mounted方法)设置一个setTimeout,添加一个css样式,css样式中含有动画效果,主要代码如下所示mounted方法mounted() { setTimeout(()=>{ this.wor原创 2021-01-05 19:09:05 · 1506 阅读 · 0 评论 -
vue项目开发引导页-带有动画效果
vue项目开发引导页-带有动画效果,如下图所示本案例实现步骤是:1,先开发一个全局的弹框(遮罩层)全局弹框代码-遮罩层2,添加背景图-使用绝对定位实现元素定位3,开发带有动画效果的组件实现动画效果的代码如下所示,PositionGuide.vue:<template> <div class="re-guide"> <div class="re-content"> <div class="re-cbtn"原创 2021-01-05 16:58:19 · 3833 阅读 · 4 评论 -
css使用animation逐帧实现动画效果
css使用animation逐帧实现动画效果,如图所示:由上图所示,它是一帧一帧无限循环实现的代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background:#000; }原创 2020-12-30 19:09:35 · 588 阅读 · 0 评论 -
vue项目添加animation动画-抖动效果案例
vue项目添加animation动画效果,如下图所示主要代码如下:<div class="lo-main" :class="[sharkFlag ?'my-shark' :'']" id="myShark"></div>mounted() { setTimeout(()=>{ this.sharkFlag = true; },2000) const sharkDiv = document.getElementById("myShark");原创 2020-12-30 18:58:25 · 2090 阅读 · 0 评论 -
解决浏览器中点击input框后出现历史数据下拉框
浏览器中点击input框后出现历史数据下拉框,如下图所示,解决方法是在input框中添加autocomplete=“off” 属性<input id="title" type="text" autocomplete="off" class="form-control" v-model="dualSelect.title" placeholder="标题"/>...原创 2020-11-30 10:04:15 · 2392 阅读 · 1 评论 -
js文本内容显示6行,超出6行出现显示更多按钮,css样式超出行数只能使用...去替代
js处理文本内容显示6行,超出6行出现显示更多按钮,对于网上说的css样式处理,基本上都是超出6行使用…去处理,不符合需求,先看结果,再看需求:如下先看实现结果,如下图所示:需求:产品经理提出详情信息中默认只展示6行,超出6行后,显示“展示更多”按钮。分析:小编接到这个需求也是一脸懵,经过几天的闲时思考,终于实现!对于网上说的css样式处理,基本上都是超出6行使用…去处理,不符合需求,所以还得分析,如下1,宽度不定(移动端),高度不定,文本内容不定(文字可以是汉子,字母,数字等),几乎什么都不确原创 2020-06-20 00:14:55 · 4827 阅读 · 1 评论 -
解决el-dialog弹框出现后页面滚动条可滚动问题
问题:el-dialog弹框出现后页面纵向滚动条可滚动问题实现效果:当弹框出现后,滚动条不可使用即不可纵向滚动发现问题:在开发中在body元素上添加overflow: hidden;发现不起作用,以为滚动条出现在body下的某个div上,经过大量时间的排查,最后发现滚动条是出现在html标签上。于是在html上使用“overflow: hidden;”后,将body的标签上使用overflow: auto;解决问题:使用如下标签:html {overflow: hidden;height: 10原创 2020-05-26 18:19:37 · 11468 阅读 · 0 评论 -
将网站主题变成灰色
filter: grayscale(100%);如下图所示:原创 2020-05-13 16:22:24 · 239 阅读 · 0 评论 -
css文字过长时超过宽度使用省略号
css文字过长时超过宽度使用省略号关键代码块:overflow: hidden;text-overflow:ellipsis;white-space: nowrap; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; max-width: 260px;...原创 2020-04-23 17:26:43 · 558 阅读 · 0 评论 -
修改浏览器滚动条,滚动条背景为白色
修改浏览器滚动条,滚动条背景为白色如图所示:代码如下:::-webkit-scrollbar { width: 5px; height: 5px;}::-webkit-scrollbar-thumb { height: 30px; background-color: #999; -webkit-border-radius: 7px; o...原创 2020-04-09 10:11:36 · 1799 阅读 · 0 评论 -
div中字体足够长时自动换行
div中字体足够长时自动换行使用word-break:break-all原创 2020-04-08 17:24:48 · 195 阅读 · 0 评论 -
Css3- flex布局管理
Css3- flex布局管理CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行/列。对于许多应用程序,弹性盒子模型提供了对块模型的改进,因为它不使用浮动,flex容器的边缘也不会与其内容的边缘折叠。**弹性盒模型,分老版与新版老版本的我们通常称之为box新版本...原创 2020-02-06 12:07:26 · 188 阅读 · 0 评论 -
css3 transform(2D)的使用
transform的使用transform 属性允许你修改CSS视觉格式模型的坐标空间transform 属性 , 只对 block 级元素生效!transfrom的基本属性有:①translate:平移②rotate:旋转③skew:倾斜④transform-origin:基点的变换⑤scale:缩放⑥matrix:矩阵。旋转;平移;缩放;(1) translate的用法X...原创 2020-02-05 13:24:29 · 203 阅读 · 0 评论 -
css去掉 ul li标签的前的点
开发中ul li标签前默认存在一个小点,去掉默认点使用list-style-type: none;即可list-style-type: none;原创 2020-01-20 14:12:24 · 13567 阅读 · 0 评论 -
css3中 flex:1的使用
案例1:设置div的flex:1 会得到剩余的宽度假设a是父组件,用flex布局设置子控件左右居中,width:400px;display:flex;b是子控件,居左。width:150px;c是子控件,居右。width不给,设置flex:1;那么c.width = a.width-(a的margin和padding[左右])-b.width–(b的margin和padding[左右])-...原创 2020-01-08 10:13:31 · 11288 阅读 · 0 评论 -
css 修改浏览器滚动条样式
本文是基于谷歌浏览器将原有的滚动条样式进行修改,修改结果如下所示。代码如下:<style> ::-webkit-scrollbar{ width: 5px; height: 5px; } ::-webkit-scrollbar-track-piece{ background-color: rgba(0,0,0...原创 2020-01-07 16:24:38 · 296 阅读 · 0 评论 -
div+css 元素水平居中 及垂直居中的几种写法
CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法。 谈及HTML元素居中展示,涉及到水平居中和垂直居中,以及水平垂直居中。由于HTML文档流是水平方向的,所以水平方向上的布局控制比垂直方向要简单很多,居中也是如此。不过(水平)垂直居中还是有很多种写法,至少一只手是数不过来了,本文列出几种,并进行简单比较。一、水平居中 使用CSS控制水平居中很简单:...原创 2020-01-03 10:08:36 · 1051 阅读 · 0 评论 -
vue项目中引入全局样式 覆盖el-tree样式
1,如何引入全局样式①创建一个styl文件,app.styl②在main.js(项目的主文件)文件中引入import ‘./app.styl’ 文件如我的项目中2 覆盖el-tree的样式.app{ .el-checkbox .is-checked .el-checkbox__inner{ background-color: green; /* backgrou...原创 2019-12-24 20:39:36 · 1285 阅读 · 0 评论 -
使用css开发常用形状
1,正方形 Title ![正方形](https://img-blog.csdnimg.cn/20191126192812119.png)原创 2019-11-26 19:30:39 · 104 阅读 · 0 评论