--------------------CSS3新增选择器--------------------
#E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
#E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
#E:first-child：匹配元素类型为E且是父元素的第一个子元素
#E:last-child：匹配元素类型为E且是父元素的最后一个子元素
#E:only-child：匹配元素类型为E且是父元素中唯一的子元素
#E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
#E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
#E:first-of-type：匹配父元素的第一个类型为E的子元素
#E:last-of-type：匹配父元素的最后一个类型为E的子元素
#E:only-of-type：匹配父元素中唯一子元素是E的子元素
#E:empty 选择一个空的元素
#E:enabled 可用的表单控件
#E:disabled 失效的表单控件
#E:checked 选中的checkbox
#E:not(s) 不包含某元素
#E:target 对应锚点的样式
#E > F E元素下面第一层子集
#E ~ F E元素后面的兄弟元素
#E + F 紧挨着的兄弟元素
#属性选择器：
　　1、E[data-attr] 含有data-attr属性的元素
　　2、E[data-attr='ok'] 含有data-attr属性的元素且它的值为“ok”
　　3、E[data-attr^='ok'] 含有data-attr属性的元素且它的值的开头含有“ok”
　　4、E[data-attr$='ok'] 含有data-attr属性的元素且它的值的结尾含有“ok”
　　5、E[data-attr*='ok'] 含有data-attr属性的元素且它的值中含有“ok”

--------------------CSS3圆角、阴影、rgba--------------------
#CSS3圆角：
　　1、设置某一个角的圆角，比如设置左上角的圆角： border-top-left-radius:30px 60px;

　　2、同时分别设置四个角： border-radius:30px 60px 120px 150px;

　　3、设置四个圆角相同： border-radius:50%;

#CSS3阴影：
box-shadow：h-shadow v-shadow blur spread color inset;分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

#rgba（新的颜色值表示法）：
1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

代码示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>圆角的练习</title>

     <style type="text/css">

         .box{

             width: 200px;

             height: 300px;

             background-color: rgba(0,0,0,0.5);/*red green blue 透明度*/

             margin:50px auto 0px;

             text-align: center;

             line-height: 300px;

             /*左上角，圆角

             border-top-left-radius: 30px;

             上左、上右、下右、下左

             border-radius:30px 30px 20px 50px;*/

             border-radius: 50%;/*圆角设置*/

             box-shadow: 10px 10px 5px 2px #ddd;/*阴影设置*/

         }

         /*内部阴影设置*/

         .box2{

             width:300px;

             height:50px;

             background-color: #f80;

             box-shadow: 0px 0px 20px 5px red inset;

             margin: 50px auto 0px;

         }

     </style>

 </head>

 <body>

     <div class="box">

         圆角、阴影、rbga测试

     </div>

     <div class="box2">

     </div>

 </body>

 </html>

CSS3圆角、阴影、rgba练习

--------------------CSS3 transition动画--------------------
#transition-property 设置过渡的属性，比如：width height background-color
#transition-duration 设置过渡的时间，比如：1s 500ms
#transition-timing-function 设置过渡的运动方式
1、linear：匀速
2、ease：开始和结束时慢速
3、ease-in：开始时慢速
4、ease-out：结束时慢速
5、ease-in-out：开始和结束时慢速
6、cubic-bezier(n,n,n,n)：
比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
曲线设置网站：https://matthewlein.com/ceaser/
#transition-delay 设置动画的延迟
#transition: property duration timing-function delay 同时设置四个属性

代码示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css对应transition动画练习</title>

     <style type="text/css">

         .box{

             width: 200px;

             height: 100px;

             background-color: gold;

             margin: 2px 0 0 5px;

             /*

             transition-property: all;

             transition-duration: 1s;

             transition-timing-function: ease;*/

             transition:width 1s ease ,height 1s ease 1s,background-color 1s ease 2s;

         }

         .box:hover{

             width: 500px;

             height: 500px;

             background-color: red;

             margin: 2px 0 0 5px;

         }

     </style>

 </head>

 <body>

     <div class="box">

     </div>

 </body>

 </html>

CSS3对应transition动画练习

--------------------CSS3 transform变换--------------------
#translate(x,y) 设置盒子位移
#scale(x,y) 设置盒子缩放
#rotate(deg) 设置盒子旋转
#skew(x-angle,y-angle) 设置盒子斜切
#perspective 设置透视距离
#transform-style flat | preserve-3d 设置盒子是否按3d空间显示
#translateX、translateY、translateZ 设置三维移动
#rotateX、rotateY、rotateZ 设置三维旋转
#scaleX、scaleY、scaleZ 设置三维缩放
#tranform-origin 设置变形的中心点
#backface-visibility 设置盒子背面是否可见

代码示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>transform练习 实现翻面效果</title>

     <style type="text/css">

         .box{

             width: 200px;

             height: 300px;

             position: relative;

             margin: 50px auto 0;

             transform-style: preserve-3d;

             border: 1px solid #ddd;

         }

         .box div{

             width: 200px;

             height: 300px;

             position: absolute;

             top: 0;

             left: 0;

         }

         .font{

             width: 200px;

             height: 300px;

             position: absolute;

             transform: perspective(800px) rotateY(-180deg);

             backface-visibility: hidden;

             transition: all 500ms ease;

         }

         .back{

             widows: 200px;

             height: 300px;

             position: absolute;

             text-align: center;

             line-height: 300px;

             transform: perspective(800px) rotateY(0deg);

             transition: all 500ms ease;

         }

         .box:hover .font{

             transform: perspective(800px) rotateY(0deg);

         }

         .box:hover .back{

             transform: perspective(800px) rotateY(180deg);

         }

     </style>

 </head>

 <body>

     <div class="box">

         <div class="font"><img src="../banner01.jpg"></div>

         <div class="back">显示文字</div>

     </div>

 </body>

 </html>

CSS3transform练习 实现翻面效果

--------------------CSS3 animation动画--------------------
#@keyframes 定义关键帧动画
#animation-name 动画名称
#animation-duration 动画时间
#animation-timing-function 动画曲线
1、linear 匀速
2、ease 开始和结束慢速
3、ease-in 开始是慢速
4、ease-out 结束时慢速
5、ease-in-out 开始和结束时慢速
6、steps 动画步数
#animation-delay 动画延迟
#animation-iteration-count 动画播放次数 n|infinite
#animation-direction
1、normal 默认动画结束不返回
2、Alternate 动画结束后返回
#animation-play-state 动画状态
1、paused 停止
2、running 运动
#animation-fill-mode 动画前后的状态
1、none 不改变默认行为
2、forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
3、backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
4、both 向前和向后填充模式都被应用
#animation:name duration timing-function delay iteration-count direction;同时设置多个属性

代码示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>人物走路动画</title>

     <style type="text/css">

         @keyframes walking{

             from{

                 left:0px;

             }

             to{

                 left: -960px

             }

         }

         .box{

             width: 120px;

             height: 180px;

             border:1px solid #ccc;

             margin: 50px auto 0px;

             position: relative;

             overflow: hidden;

         }

         .box img{

             display: block;

             width: 960px;

             height: 182px;

             position: absolute;

             left: 0;

             right: 0;

             animation:walking 1.0s steps(8) infinite;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <img src="walking.png">

     </div>

 </body>

 </html>

人物走路动画

--------------------CSS3浏览器兼容前缀--------------------
　　-ms- 兼容IE浏览器
　　-moz- 兼容firefox
　　-o- opera
　　-webkit- chrome 和 safari

 1 div

 2 {

 3     transform: rotate(30deg);

 4     -ms-transform: rotate(30deg);        /* IE 9 */

 5     -webkit-transform: rotate(30deg);    /* Safari and Chrome */

 6     -o-transform: rotate(30deg);        /* Opera */

 7     -moz-transform: rotate(30deg);        /* Firefox */

 8 }

CSS3学习手记的更多相关文章

  1. uni-app官方教程学习手记

    本人微信公众号:前端修炼之路,欢迎关注 背景介绍 大概在今年的十月份左右,我了解到Dcloud推出了uni-app.当时下载了一个Hbuilder X,下载了官方提供的hello示例教程.经过一番努力 ...

  2. Linux.NET学习手记（7）

    前一篇中,我们简单的讲述了下如何在Linux.NET中部署第一个ASP.NET MVC 5.0的程序.而目前微软已经提出OWIN并致力于发展VNext,接下来系列中,我们将会向OWIN方向转战. 早在 ...

  3. Linux.NET学习手记（8）

    上一回合中,我们讲解了Linux.NET面对OWIN需要做出的准备,以及介绍了如何将两个支持OWIN协议的框架:SignalR以及NancyFX以OwinHost的方式部署到Linux.NET当中.这 ...

  4. 关于《Linux.NET学习手记（8）》的补充说明

    早前的一两天<Linux.NET学习手记(8)>发布了,这一篇主要是讲述OWIN框架与OwinHost之间如何根据OWIN协议进行通信构成一套完整的系统.文中我们还直接学习如何直接操作OW ...

  5. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  6. EF框架学习手记

    转载: [ASP.NET MVC]: - EF框架学习手记 1.EF(Entity Framework)实体框架EF是ADO.NET中的一组支持开发面向数据的软件应用程序的技术,是微软的一个ORM框架 ...

  7. ExtJS MVC 学习手记3

    在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...

  8. ExtJS MVC学习手记

    开始学习ExtJS的MVC了.这篇文章仅是用来做一个目录,为自己这个阶段的学习内容做个索引. 手记涉及的文章: EXTJS MVC结构(译自ExtJS4.0文档中的<MVC Architectu ...

  9. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

随机推荐

  1. DDD理论学习系列（13）-- 模块

    DDD理论学习系列--案例及目录 1. 引言 Module,即模块,是指提供特定功能的相对独立的单元.提到模块,你肯定就会想到模块化设计思想,也就是功能的分解和组合.对于简单问题,可以直接构建单一模块 ...

  2. ASP.NET Core - Razor 页面简介

    简介 随着ASP.NET Core 2 即将来临,最热门的新事物是Razor页面.在之前的一篇文章中,我们简要介绍了ASP.NET Core Razor 页面. Razor页面是ASP.NET Cor ...

  3. [bzoj 1409] Password 矩阵快速幂+欧拉函数

    考试的时候想到了矩阵快速幂+快速幂,但是忘(bu)了(hui)欧拉定理. 然后gg了35分. 题目显而易见,让求一个数的幂,幂是斐波那契数列里的一项,考虑到斐波那契也很大,所以我们就需要欧拉定理了 p ...

  4. 使用ExpressionVisitor进行lambadaExpression的动态拼接

    现有如下实体 public class User { public int Id { get; set; } public string Name { get; set; } } 根据这个实体创建一个 ...

  5. Redis-入门笔记-15min带你一览redis

            如果转载,请注明博文来源: www.cnblogs.com/xinysu/   ,版权归 博客园 苏家小萝卜 所有.望各位支持!       少年入门笔记,整理出来一起入坑!入门的视屏 ...

  6. [算法题] Search in Rotated Sorted Array ii

    题目内容 题目来源:LeetCode Suppose an array sorted in ascending order is rotated at some pivot unknown to yo ...

  7. C#的初学知识点

    初学C# 初见Hello,World 第一句源代码:Console.WriteLine("Hello,World");: 认识.Net: 编译工具:Visual Studio: 主 ...

  8. 记小白的一次基于vue+express+mongodb个人站开发

    学了vue和node一段时间了,折腾了一些零零散散的小东西.马上大四了要出去找工作了,所以早就想搭一个个人站作为一次较为全面的总结.因为没有设计功底,界面设计使我这种强迫症患者苦不堪言.幸而到最后花了 ...

  9. 微服务架构下的API网关

    顾名思义,是出现在系统边界上的一个面向API的.串行集中式的强管控服务,这里的边界是企业IT系统的边界,主要起到隔离外部访问与内部系统的作用.在微服务概念的流行之前,API网关的实体就已经诞生了,例如 ...

  10. Struts2学习笔记(四)——result结果类型

    当Action类的方法处理请求后,会返回一个字符串(逻辑视图名),框架根据这个结果码选择对应的result,向用户输出,所以需要在struts.xml提供<result>元素定义结果页面, ...