![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
一个假的前端男
一个 迷迷糊糊的前端
展开
-
简单的图片跑马灯效果
效果展示:gif 因速度太快展示不够流畅。原创 2023-12-22 14:56:10 · 488 阅读 · 0 评论 -
如何彻底取消input color的边框?
【代码】如何彻底取消input color的边框?原创 2023-12-22 14:51:38 · 447 阅读 · 0 评论 -
如何彻底取消input color的边框?
【代码】如何彻底取消input color的边框?原创 2023-12-11 15:16:03 · 504 阅读 · 0 评论 -
uniapp 下拉效果显示
弹框的思路1、通过固定定位 + animation 实现动画效果2、通过绑定动态绑定类 :class 实现动画的交替 .anim { animation: tobottom 1s ease-in; animation-fill-mode: forwards; } @keyframes tobottom { from { top: -90px; } to { top: 65px; } }2、 通过 animation-fill-mode: .原创 2021-06-02 11:57:35 · 3639 阅读 · 1 评论 -
li 修改前面小圆点的颜色
通过修改伪类 实现li::marker { color: #3860f4; }原创 2021-04-13 13:33:13 · 589 阅读 · 0 评论 -
ps 如何使文字弯曲
1、通过椭圆选框 画一个圆2、通过路径下方的从选区生成工作路径3、点击文字工具移至你圆上出现下方符号4、输入文字即可如果想在圆的下方生成文字 如图则需要在上方步骤下 通过路径选择工具具体操作如下图...原创 2021-01-26 16:33:29 · 4968 阅读 · 0 评论 -
table 标签边框如何正常显示
这里是引用<table class="my-table"> <tbody> <tr> <td>告警ID:</td> <td>{{tableDataDetail.alarmSensitive.id}}</td> <td>源IP:</td> <td>{{t..原创 2021-01-25 18:07:58 · 403 阅读 · 1 评论 -
css实现边框梯形
html代码<div class="title"> <div class="oricl"> <span></span> </div> <div class="oricl1"> <span></span> </div> </div>css 代码.title{ width: 50%; border: 1px solid green;原创 2021-03-02 15:41:28 · 2695 阅读 · 0 评论 -
css 流动边框,蚂蚁线
蚂蚁线的效果蚂蚁线的解剖效果通过4条虚线的移动产生效果1、盒子相对定位 4条虚线绝对相对2、通过 transform: translateX(-200px); -200px 是使转载 2021-01-20 22:03:23 · 1019 阅读 · 0 评论 -
使用css3的linear-gradient线性渐变实现虚线图形
开发过程中,有画出虚线的需求:果使用border的dashed的属性,虽然也是虚线,但是不能控制每一个虚线的宽度可以使用css3的linear-gradient进行虚线的绘制:html:<div class="dashedBorder"></div>css:.dashedBorder{ height: 1px; background:linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.1)转载 2021-01-20 11:48:58 · 647 阅读 · 0 评论 -
css字体强制换行
word-wrap: break-word;word-break: break-all;原创 2021-01-14 15:43:26 · 196 阅读 · 0 评论 -
css3 字体拉伸
添加链接描述原创 2021-01-06 17:36:30 · 410 阅读 · 0 评论 -
css3 盒子四角边框的实现
重点1、:父相子绝 2、通过伪类before after 添加相应方向的边框实例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2021-01-04 20:57:53 · 753 阅读 · 0 评论 -
css重叠线
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 500px;原创 2020-12-31 15:58:48 · 229 阅读 · 0 评论 -
css3 文字卡片折叠效果
主要代码说明包裹字体的卡片必须display: inline-block; display: flex;transform: skewY(-20deg); /扭曲属性/nth:-child(odd)odd代表奇数 even代表偶数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev原创 2020-12-30 15:21:33 · 356 阅读 · 1 评论 -
css3----------3D文字
主要取决 text-shadow这个属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {原创 2020-12-30 14:21:41 · 139 阅读 · 0 评论 -
瀑布流的实现
瀑布流的特点:等宽不等高瀑布流实现1、获取图片的宽度2、获取屏幕的宽度3、获取展示的列数(屏幕宽度/图片宽度)4、定义一个数组 存放图片的高度5、遍历所有的图片 目的:定位图片的位置代码 $(function() { waterFall() }) function waterFall() { var ImgWidth = $('imgs').width() //获取图片宽度 var screenWidth = .原创 2020-10-22 10:06:39 · 80 阅读 · 0 评论 -
vue 标签动态绑定滑动效果
html思想:通过:class 动态绑定类再通过transform: translateX(); transition: ; <!-- 字体 --> <div style="display:flex; flex-direction: row; align-items: center;font-size:20px;margin-top:40px" > <div style=" width: 80px;" @c原创 2020-09-09 09:36:29 · 404 阅读 · 0 评论 -
vue 动态控制input的disabled属性的方法
html代码 <el-input v-model="ruleForm.price" type="number" v-bind:disabled='ruleForm.name===""'></el-input>主要是通过 v-bind:disabled 绑定 ruleForm.price 的值来动态判断是否添加 disabled 属性,而 ruleForm.price 的默认初始值为0,新增时不会添加此属性;当点击修改时,ruleForm.price的值就是当前所要修改的数据记原创 2020-09-07 22:38:17 · 3952 阅读 · 0 评论 -
css div占满整个屏幕
.box{ position: fixed; width: 100%; height: 100%;}原创 2020-08-11 11:09:12 · 294 阅读 · 0 评论 -
设置遮罩层样式
如下图html代码如下//这段代码放置所有代码最前面<view class="FEX"> <view class="pop"> <image src="{{'https://statics.zhuishushenqi.com'+data1.cover}}" class="tupi"></image> </view></view>css代码.FEX{ position:fixed; z-index: 99;原创 2020-08-10 17:28:15 · 312 阅读 · 1 评论 -
实现满足多行 显示省略号
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; /*多行在这里修改数字即可*/ overflow:hidden; /* autoprefixer: ignore next */ -webkit-box-orient: vertical;原创 2020-08-06 10:30:37 · 247 阅读 · 0 评论 -
网格布局之5个格子填充
最近做的一个项目使关于5个图片的布局 如下图1、以行顺序自动填充话不多说代码放下HTML代码如下: <div class="box"> <div v-for="(item,index) in leisure" :key="index" class="img1"> //循环获取数据 <img :src="item.image" style="width:100%"/> </div> </div>CS原创 2020-07-21 23:26:09 · 1169 阅读 · 0 评论