几个实用的CSS代码段总结
废话不多说,直接上代码,希望能帮到有需要的小伙伴
①:遮罩
position: fixed;
background: rgba(0, 0, 0, .4);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
width: 100%;
height: 100%;
②:三角(下面三角的代码按照下图上右下左的顺序排列)
display: inline-block;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent transparent #000 transparent;
display: inline-block;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: #000 transparent transparent transparent;
display: inline-block;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent #000 transparent transparent;
display: inline-block;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent #000 transparent transparent;
③:圆形
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #f6ad03;
注:设置 border-radius 的值为宽高的一半,或者直接设置50%的百分比来制作圆形
④:图标
width: 24px;
box-shadow: 0 10px 0 2px #999, 0 20px 0 2px #999, 0 30px 0 2px #999;
⑤:文字超出隐藏
width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
⑥:垂直居中
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
注:针对元素有固定宽高的情况
position: fixed;
top: 50%;
left: 50%;
z-index: 999;
transform: translate(-50%,-50%);
注:针对元素无固定宽高的情况
⑦:巧妙运用伪类::after,给元素添加边框,如下图
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 15px;
height: 1px;
background-color: #c8c7cc;
注:不要忘记上面截图中的a标签要设置相对定位position:relative; 因为用伪类添加的边框是相对父元素a标签定位的
⑧:用CSS3的animation属性制作loading动画效果
.loading {
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid #ddd;
border-left-color: #FFB5BF;
animation: loading-animation 1s linear infinite;
}
@keyframes loading-animation{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
⑨:气泡效果
<div class="bubble">
<div class="triangle common"></div>
<div class="cover common"></div>
<!-- 用来覆盖的倒三角 -->
</div>
.bubble {
width: 200px;
height: 40px;
border: 5px solid #FFB5BF;
position: relative;
} .common {
width:;
height:;
position: absolute;
/* 使用绝对定位 */
left: 50%;
transform: translate(-50%, 0);
/* 水平居中 */
} .triangle {
bottom: -20px;
border-top: 20px solid #FFB5BF;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
} .cover {
bottom: -13px;
border-top: 20px solid #94E8FF;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
} .cover {
border-top: 20px solid #fff;
}
几个实用的CSS代码段总结的更多相关文章
- 实用的JS代码段(表单篇)
整理了下比较实用的Javascript代码段,完整的代码参考 1 多个window.onload方法 由于onload方法时在页面加载完成后,自动调用的.因此被广泛的使用,但是弊端是只能实用onloa ...
- 50个实用的jQuery代码段让你成为更好的Web前端工程师
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
- 50个实用的jq代码段整理
个人博客: http://mcchen.club 1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查 ...
- css代码段
css文字超出省略 .demo{ display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; ...
- 让div显示在屏幕中央的css代码段
.popup{ width:500px; height:400px; position:absolute; top:50%; left:50%; margin-top:-200px; /*注意 ...
- 一些比较实用的css片段
新看了一个帖子,里面好多实用的css代码块,可拿出来当做功能库.先附上该文地址http://segmentfault.com/a/1190000002773955 里面的内容很多我挑了几个经过我验证的 ...
- 超实用的HTML代码段(赵荣娇)
第1章 创建HTML文档 11.1 HTML文档的基本结构 2 <html> <head> <title>Title of page</title> & ...
- 50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段
50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段 本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从j ...
- 很实用的50个CSS代码片段
原文:50 Useful CSS Snippets Every Designer Should Have 面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...
随机推荐
- C51汇编典型代码&一些org-mode技巧
C51汇编典型代码&一些org-mode技巧 文档存放 具体内容可见存放的数据. 下面主要介绍关键代码. ASM 部分 1;; LCD数据发送========================= ...
- mysql导出导入数据
使用sql语句导出数据: 导出时如果不写绝对路径,会提示The MySQL server is running with the --secure-file-priv option so it can ...
- JS Object.defineProperties()方法
JS Object.defineProperties()方法 描述: Object.defineProperties()方法为目标对象同时配置多个属性. 语法: Object.defineProper ...
- 转存下链接--- Java awt Swing 进行拖拽实现布局
http://blog.csdn.net/vpingchangxin/article/details/8673825 swing开发图形界面工具,eclipse swing图形化操作界面工具配置
- ES6 学习之旅
最常用的ES6特性 1.let, const 2.class, extends, super 3.arrow function (箭头函数) 4.template string (用反引号(`)来标识 ...
- 剑指offer PART 2
剑指offer PART 2 书点击自取 提取码: njku 标签(空格分隔): 笔记 C++知识点: 1.面向对象的特性 2.构造函数 3.析构函数 4.动态绑定 5.常用的设计模式 6.UML图 ...
- windowsSevice程序和topshelf程序创建服务对比
文章原地址:http://www.80iter.com/blog/1451523192435464 Topshelf 创建.net服务整理和安装步骤 windowsService和topshelf服务 ...
- ES6使用fetch请求数据
ie是完全不支持fetch的. fetch(url,{method:"get/post"}).then(res=>{ }) 如果请求返回的status是200,body是 ...
- 索引Log
最左前缀原则 B+ 主键索引ID =>ID树 非主键索引K 先K树=>ID树 主键自增索引
- 大数据项目测试<二>项目的测试工作
大数据的测试工作: 1.模块的单独测试 2.模块间的联调测试 3.系统的性能测试:内存泄露.磁盘占用.计算效率 4.数据验证(核心) 下面对各个模块的测试工作进行单独讲解. 0. 功能测试 1. 性能 ...