![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
不靠谱的作曲家
这个作者很懒,什么都没留下…
展开
-
倒计时动效
倒计时动效原创 2023-08-21 18:06:11 · 901 阅读 · 3 评论 -
fontawesome图标文件使用
fontawesome图标文件使用。原创 2023-05-16 10:53:54 · 111 阅读 · 0 评论 -
web常用UI组件
目录1.按钮2.标签3.单选框4.多选框5.加载中6.开关7.面包屑8.输入框9.下拉框10.表单11.文字链接12.弹窗13.状态页面14.上传15.相关图片内容**按钮**<button type="button" class="ub-button ub-button--default"> 默认按钮</button><button type="button" class="ub-button ub-button--primary"原创 2021-11-04 11:31:39 · 588 阅读 · 0 评论 -
css 旋转图标
.rotate { animation: rotate 1s infinite; -webkit-animation: rotate 1s infinite;}@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}原创 2021-06-10 09:37:43 · 290 阅读 · 0 评论 -
css3动画—旋转
css3动画旋转,内圆顺时针旋转,外圆逆时针旋转1、html<img src="img/about-img07.png" class="circle01 circle-pst"><img src="img/about-img06.png" class="circle02 circle-pst">2、css.circle01 { animation: rotate1 5s infinite ease-in-out;}@keyframes rotate1 { fro.原创 2020-09-28 17:11:11 · 683 阅读 · 0 评论 -
通用模态框
很多场景需要用到模态框进行一下数据展示、提醒,索性就借鉴小程序的风格写个通用的模态框HTML<div class="mask"></div><div class="model"> <div class="model-box"> <p class="model-title">标题</p> <p class="model-content">这是一个模态框</p> </div> <原创 2020-05-20 14:55:13 · 229 阅读 · 0 评论 -
flex弹性盒布局,最后一行左对齐
使用flex布局,如果是九宫格的话正好可以平分,如图如果是我们只需要八块,如图但是我们想让最后一块左对齐,依次排列在这里插入代码片原创 2020-05-07 09:34:31 · 2525 阅读 · 1 评论 -
立体按钮点击手机震动
1.HTML<button class="lu-btn-3d" onclick="btn()"> 点击<br />抢答</button>2.CSSbutton { outline: none;} .btn { width: 148px; height: 148px; font-size: 32px; border-radius: ...原创 2019-12-31 09:32:42 · 182 阅读 · 0 评论 -
移动端禁止长按复制
*{-webkit-touch-callout:none; /系统默认菜单被禁用/-webkit-user-select:none; /webkit浏览器/-moz-user-select:none;/火狐/-ms-user-select:none; /IE10/user-select:none;}原创 2019-11-26 16:45:21 · 242 阅读 · 0 评论 -
switch开关
1.html<input class="switch switch-anim" @click="clickSwitch(event)" type="checkbox">2.css.switch { width: 57px; height: 28px; position: relative; border: 1px solid #dfdfdf; ...原创 2019-11-13 15:00:56 · 178 阅读 · 0 评论 -
多行文本溢出用省略号代替
1.单行文本溢出overflow:hidden; //溢出隐藏 white-space:nowrap; //让文本不换行text-overflow: ellipsis; //溢出的文本用省略号代替2.多文本溢出display: -webkit-box; //对象作为弹性伸缩盒子模型显示 -webkit-box-ori...原创 2019-10-30 15:51:59 · 432 阅读 · 0 评论 -
css之文本两端对齐
css.pay_slogan li label{ width: 20%; display: inline-block; text-align: justify; overflow: hidden; line-height: 20px; height: 20px;}.pay_slogan li label:after { content: ''; ...原创 2019-09-11 14:49:21 · 157 阅读 · 0 评论