1. 选择类

 1.1 /* 鼠标选中区域,改变背景/字体颜色 */
/*遍历写法*/
div::selection {
background-color: red;
color: #fff; /* font-size、font-weight等 设置不起作用 */
} /*全局写法*/
::selection {
background: #000;
color: #fff;

2. 文字类

2.1 /* 伪元素选择器 */
    /* 第一个字母/汉字 */
      li::first-letter {
      color:red;
      background-color: yellow;
      }     /* 第一行 */
      div::first-line {
      background-color: green;
      }
    /*大小写转换*/
      .tit{
      /*text-transform: capitalize;/!*首字母大写*!/*/
      /*text-transform: uppercase;/!*所有单词转换为大写*!/*/
      text-transform: lowercase;/*所有单词转换为小写*/
      }  
2.2 /*文字多出部分省略号代替 仅适用于单行文本*/
p{
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
2.3 /*设置文本纵向排列*/
.title{
width: 20px;
writing-mode: tb-rl;
letter-spacing: 20px;
text-indent: 30px;
}

3. 外观样式类

3.1 /*设置单选框样式*/
input {
width: 20px;
height: 20px;
padding-left: 22px;
cursor: pointer;
background: url(images/check.png) no-repeat 2px 1px;
-webkit-appearance: none;
}

设置后的样式: 

3.2 /*设置div宽度100%,两边留白(也可设置于高度)*/
    .box{
    width: -webkit-calc(100% - 50px);
    width: calc(100% - 50px);
    height: 300px;
    margin: 0 auto;
    background: #ccc;
    overflow: hidden;
    }

设置后的样式:

 3.3 /*设置光标不能点击*/
.btn{
cursor: no-drop;
}

3.4 /* 设置textarea文本框不能拖拽缩放 */
textarea{
resize: none;
}
3.5 /* 圆角边框 */
.box{
width:100px;
height:100px;
border-radius: 10px 20px;
border: 1px solid red;
}
10px; 一个值的时候即为设置上下左右边框
10px 20px; 依次为:上下边框 左右边框
10px 20px 30px; 上边框 左右边框 下边框
10px 20px 30px 40px; 上边框 右边框 下边框 左边框

3.6 /* box-shadow 盒子阴影 */      /* text-shadow 文本阴影 */
  
box-shadow:2px 2px 4px red inset; /* X轴偏移量 Y轴偏移量 阴影距离 阴影颜色 内阴影(可以不设置内阴影,默认为外阴影) */
text-shadow 语法和box-shadow 一致

  

浏览器在编译数字或者字母的时候默认不会自动换行,解决方法:

  div{
width: 90px;
border: 1px solid red;
word-break: break-all;
word-warp: break-word;
}

4. 动画类

4.1 /* 加载loading */
CSS代码如下:
@keyframes bouncing-loader {
from {
opacity:;
transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
HTML代码如下:
<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>

实现效果如下: 

 

5. transform /*旋转 变形 */

 transform: rotate(-20deg); /*旋转*/
transform: skew(45deg); /*扭曲*/
transform: scale(0.8); /*缩放*/
transform: translate(50px, 100px); /*位移*/

6. animation /* 动画 */

HTML代码如下:
.yun{
position: absolute;
left: 0;
top: 90px;
background: url(http://gzzta.com.cn/images/gzkdqggjyyj_zt/yun1.png) repeat-x;
height: 100%;
width: 300%;
min-width:1200px;
-webkit-animation: cloud_one 100s linear infinite;
-moz-animation: cloud_one 100s linear infinite;
-o-animation: cloud_one 100s linear infinite;
animation: cloud_one 100s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
 CSS代码如下:

 @-webkit-keyframes cloud_one {
0% {
left: 0
}
100% {
left: 200px
}
}
@keyframes cloud_one {
0% {
left: 0
}
50% {
left: -100%
}
100% {
left: -200%
}
}

CSS3 神器总结的更多相关文章

  1. 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  2. 等比缩放之自适应神器——css3的rem

    1.rem简介   rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-si ...

  3. CSS3 图标神器 => content:"我是特殊符号"

    基本形状 ▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC ◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 260 ...

  4. CSS3伸缩盒Flexible Box

    这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...

  5. 网页前端开发:微博CSS3适用细节初探

    浏览器,作为一神器,帮我们打开了缤纷万千的网络世界窗口.而她发展到今天,也诞生了一个又一个的怀神版本,可能有人钟情于她的花哨,有人痴迷于她的速度……我们,作为重构工程师,必然要更关注他背后的技术革新, ...

  6. 利用CSS3 clip-path裁剪各种图形。

    'clip-path'是css3的一个强大属性,我们可以利用它来绘制各种各样的图形,当然不只是这些,接下来一起看看它的强大功能吧. 首先介绍的是clip-path里面的polygon功能,我们可以通过 ...

  7. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】

    <Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  8. CSS3:优雅地绘制不规则ICON

    早上在w3ctech上看到 中国第二届CSS Conf总结  的时候,真是开心极了: 自从去年在慕课网上看了第一届CSS conf 视频之后,整个人都震惊了,原来还有大会是专门用来讨论CSS的,而且分 ...

  9. 布局神器:Flexbox

    最近的工作内容大多是移动端网页的开发,百分比布局,Media Queries,Bootstrap等常规的响应式/自适应的开发技术皆一一试过,但觉以上都不够灵活,所以,一直再尝试寻求更加灵活的精确的移动 ...

随机推荐

  1. js reduce()方法使用

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. reduce() 可以作为一个高阶函数,用于函数的 compose. 注意: reduce() 对 ...

  2. 关于lnmp下 phalcon和tp框架下的nginx文件配置

    vim /etc/nginx/sites-available/default   进入修改目录 1.正常项目配置 server { listen 80 default_server; listen [ ...

  3. mingw-gcc-9.0.1-i686-posix-sjlj-201903

    -------------------------------------------------------------------------------gcc version 9.0.1 201 ...

  4. MAC本apache+php配置虚拟域名时踩的坑

    昨天在调试Mac自带的Apache+PHP配置域名时,调试的让我怀疑人生.顿时心里一万个草泥马,我就是配置个虚拟域名啊,这么让我受伤 . 1 首先检查一下Apache是否开启, qutao@bogon ...

  5. scrapy 爬取时很多重复 及日志输出

    日志输出参考:https://blog.csdn.net/weixin_41666747/article/details/82716688 首先 item 要设置循环外 第二,request 要设置下 ...

  6. webpack的三种用法

    1.直接命令行使用. 2.node.js API的使用方式. 3.webpack / webpack--config webpack. dev.config.js //根目录创建 webpack.co ...

  7. Java入门细则

    (一)一个完整的Java.源程序应该包括下列部分:  package语句,该部分至多只有一句,必须放在源程序的第一句.  import语句,该部分可以有若干import语句或者没有,必须放在所有的类定 ...

  8. django ajax 及批量插入数据 分页器

    ``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...

  9. boostrap日期时间插件datetimepicker使用过程的一些问题总结

    1.汉化问题 虽然有转门的汉化脚本,不过如果简单使用的话自己稍微改一下源码就行了: var dates = $.fn.datetimepicker.dates = { en: { days: ['Su ...

  10. 解决svn更新项目目录时“Error:svn: E155037: Previous operation has not finished; run 'cleanup' if it was interrupted”的报错问题

    今天在IDEA更新项目目录时,发现报错“Error:svn: E155037: Previous operation has not finished; run 'cleanup' if it was ...