css小例子
小怪兽学前端
这个作者很懒,什么都没留下…
展开
-
input限制最大值不超过60
input限制最大值不超过60<input type="number" class="inputBj" v-model="chargingTimeMinute" placeholder="请输入" oninput="if(value>60)value=60"/>原创 2021-07-21 19:13:38 · 2115 阅读 · 0 评论 -
总结:前端好用的的特效动画库
总结:前端好用的的特效动画库1、Animate.css最全的css动画库2、http://elrumordelaluz.github.io/csshake/这个主要是摇动的效果3、https://www.animaapp.com/4、https://www.minimamente.com/cssboxshadow/可视化调试边框阴影,直接复制代码https://www.minimamente.com/yopalette/取色卡上的颜色...原创 2021-05-22 09:18:57 · 853 阅读 · 0 评论 -
width:fit-content;属性,盒子正好等于内容宽度,太好用了!!!!
width:fit-content;属性,盒子正好等于内容宽度原创 2021-04-01 13:55:30 · 1213 阅读 · 1 评论 -
彩虹文字效果css,会动哦!
彩虹文字效果css,会动哦!@import url("https://fonts.googleapis.com/css?family=Lato:300");body { display: flex; height: 100vh; justify-content: center; align-items: center; text-align: center; background: #222;}.rainbow { letter-spacing: 0.2rem;原创 2021-03-10 14:08:23 · 428 阅读 · 0 评论 -
CSS文本超过三行用省略号代替
CSS文本超过三行用省略号代替overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; // 控制多行的行数 -webkit-box-orient: vertical;原创 2020-12-17 16:30:33 · 2671 阅读 · 0 评论 -
修改checkbox默认样式
修改checkbox默认样式input[type="checkbox"] { text-align: center; position: relative; width: 0.6rem; height: 0.6rem; } input[type="checkbox"]::before { content: ""; position: absolute; top: 0; left: 0; background: #07c3e5; width: 100%;原创 2020-12-03 17:12:42 · 301 阅读 · 0 评论 -
用div来模拟textarea的实现
用div来模拟textarea的实现<style>div{ width: 400px; min-height: 100px; max-height: 300px; _height: 100px; //IE6 margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-si原创 2020-11-30 19:43:12 · 233 阅读 · 0 评论 -
CSS 实现自动换行、强制换行、强制不换行的属性
CSS 实现自动换行、强制换行、强制不换行的属性实现效果1.自动换行:p{word-wrap:break-word;word-break:normal; }2.强制换行:word-break:break-all; 按字符截断换行 /* 支持IE和chrome,FF不支持*/word-wrap:break-word; 按英文单词整体截断换行 /* 以上三个浏览器均支持 */* 注意:单词换行需要父盒子为块级元素 3.强制不换行:white-space:nowr原创 2020-11-20 18:30:08 · 362 阅读 · 0 评论 -
CSS文本超出显示省略号
CSS文本超出显示省略号.mydiv{ width: 300px;/*定义块元素的宽度*/ white-space: nowrap;/*内容超宽后禁止换行显示*/ overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/*文字超出部分以省略号显示*/}<div class="mydiv"></div>...原创 2020-11-18 21:42:42 · 206 阅读 · 0 评论 -
常用的css小例子
常用的css小例子第一种效果:录制GIF有点卡,但是你单纯运行代码美滋滋哦!上代码:<span class="shake">弹</span><style>.shake{ width:40px; height:40px; display:block; background:lightgreen; border-radius:50%; margin:5px; color:#fff; font-siz原创 2020-11-17 23:30:59 · 545 阅读 · 0 评论 -
纯css实现文字下的动画
纯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> div {原创 2020-11-16 19:28:25 · 266 阅读 · 0 评论 -
用CSS动画实现省略号动画
用CSS动画实现省略号动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>省略号动画</title> <style> .loadi原创 2020-11-15 18:07:30 · 988 阅读 · 0 评论 -
最常用的css实现垂直水平都居中
最常用的css实现垂直水平都居中一,定位,分两种1.absolute,calc<style>/* 定位代码 */.content { position: relative;}.box { position: absolute;; top: calc(50% - 50px); left: calc(50% - 50px);}</style><div class="content"> <div class="原创 2020-11-15 17:41:05 · 68 阅读 · 0 评论