![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
一 者
这个作者很懒,什么都没留下…
展开
-
css3骚操作记录
如果你们自己能动手运行,收获会很大1.用CSS动画实现省略号动画.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026"; /* ascii code for the ellipsis character */ } @k原创 2021-09-14 16:03:24 · 122 阅读 · 0 评论 -
h5配合css和js如何自定义单选框
既然是自定义单选框所以要清除原生的单选框样式input, textarea { //清除所有input和textarea的原生样式 border: 0; -webkit-appearance: none; -moz-appearance: none;}html5 <div class="radioBox"> <div class="radioItem"> <label> <div原创 2021-05-17 09:57:31 · 387 阅读 · 0 评论 -
隐藏滚动条或更改滚动条样式加制作三角形
.scroll-container { width: 500px; height: 150px; border: 1px solid #ddd; padding: 15px; overflow: auto; /*必须*/ } .scroll-container::-webkit-scrollbar { width: 8px.原创 2021-04-25 09:41:47 · 559 阅读 · 0 评论 -
css3如何实现倒影效果
直接上代码 -webkit-box-reflect: below -357px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(250, 250, 250, 1)));原创 2020-12-29 11:16:37 · 176 阅读 · 0 评论 -
如何让文字溢出自动变成省略号
在你的p标签或者是什么上面加入这段代码 display:-webkit-inline-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; /*方向*/ -webkit-line-clamp:2; /*显示多少行文本*/原创 2020-12-18 15:59:14 · 391 阅读 · 1 评论 -
如何修改textarea中placeholder的字体
textarea::-webkit-input-placeholder { /* WebKit browsers */ /* placeholder颜色 */ color: #ff0000; /* placeholder字号 */ font-size: 0.14rem; } textarea:-moz-placeholder { /* Mo...原创 2020-11-19 16:45:35 · 1098 阅读 · 0 评论 -
获取滚动条距离底部的高度
今天写移动端遇到了需求要获取滚动条距离底部的高度 var wHeight = $(document).height(); var scrollHeight = wHeight - $(document).scrollTop(); //获取滚动条距离底部的高度原创 2020-11-18 14:56:24 · 653 阅读 · 0 评论 -
如何去除bootstrap中按钮的黑线边框
.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus { outline: none; box-shadow:none;}原创 2020-11-14 17:33:13 · 1448 阅读 · 0 评论 -
如何操控输入框中的placeholder属性
直接上代码::-webkit-input-placeholder{ position:relative; top:3px; padding-left:40px; font-family: '微軟正黑體'; font-weight:bold; font-size:20px; }:-ms-input-placeholder { position:relative; padding-left:40px; font-famil原创 2020-11-14 13:03:36 · 503 阅读 · 0 评论 -
清除浮动代码
.clearfix::after{ content: "."; display: block; height: 0; line-height: 0; visibility: hidden; clear: both;}.clearfix::before{*zoom:1}切记after和before的顺序不要写反了,不然会失效原创 2020-11-10 11:04:10 · 1431 阅读 · 0 评论 -
关于如何安装less
首先安装nodejs,以为less基于nodejs的,安装成功后cmd查看,如果配置了环境变量可以用全局查看,没有的话就需要进入到node安装目录下去cmd查看然后通过npm install -g less安装lessc,因为less转换成css需要借助lessc然后进入到有less文件的目录去cmd然后这是main.less写的内容转换成功...原创 2020-11-09 16:02:18 · 200 阅读 · 0 评论 -
如何实现移动端轮播图的左滑右滑效果
既然是滑动的话肯定是touch事件,需要获取触摸屏幕开始的X值,和结束的值,怎样才算结束的值?就是在屏幕中移动的值并将手抬起的X值,然后通过touchend介绍事件进行判断操作 //1.先获取手指在轮播图上的滑动方向 //手指触摸开始时记录一下手指所在的坐标X //结束触摸一瞬间记录最后的手指所在坐标X //获取界面上的轮播图容器 var $carousels = $('.carousel'); var startX;原创 2020-11-08 20:32:54 · 1111 阅读 · 1 评论 -
如何解决用伪元素点击下拉列表触发不了事件的问题
当用伪元素浮动起来写下拉箭头的时候会出现点击箭头下面的列表不出现,怎么去解决呢?添加一行代码就行 pointer-events: none;效果图原创 2020-11-04 15:57:08 · 362 阅读 · 0 评论 -
jquery中如何实现一个li里面一排6张图片进行切换
本人前端小白,近日遇见这个需求不分多个li,把图片放在一个li里面操作,见效果图第一页点击之后下一页可根据内容动态生成可点击的页数比如一页6张图,我这里只有11张所以不能点击下一页了,如果是13张图的话还可以点击的。html代码<div class="slider"> <ul class="clearfix"> <li> <a href="#"><img src="../test2/image原创 2020-10-29 21:09:02 · 796 阅读 · 0 评论 -
如何在bootstap中修改checkbox的样式
最近搞bootstrap的时候发现checkbox这个东西有点丑,改了一下。上代码html代码 <input type="checkbox" class="checkAll"/>css代码input[type="checkbox"]:hover,input[type="checkbox"]:focus { outline: none;}.checkAll { width: 28px; height: 28px; appearance: none;原创 2020-10-27 17:30:00 · 1088 阅读 · 0 评论 -
去除bootstrap中input输入框的蓝色光
一行css代码搞定就完事.form-control{ border-radius: 0px; border-color:#c0c0c0; box-shadow:none;}原创 2020-10-27 13:41:31 · 710 阅读 · 0 评论 -
placeholder如何实现换行
如图html代码<textarea placeholder="标题: 内容:"></textarea>只需要添加
;即可原创 2020-10-26 15:01:38 · 1176 阅读 · 0 评论