一、css3的选择器

1、 父子选择器

直接关系 .box>.com

2、 兄弟选择器

相邻关系 .box+.com

<span>hello</span>

<p>world</p>

span+p{color:red;}

这里通过span 找到p里面的元素 目的是p

3、通用兄弟选择器

属于同一个父元素E~F

跟E同属于一个父元素的所有的F

4、群组选择器

把具有相同样式租在一起中间用,隔开,也是常用的选择器

5、P[class=^box] 以box开头的类

6、P[class~box] class里面有一个名字为box的类 这个类也可以有其他的类名

7、P[class$=box] 以box结尾的类

8、P[class*=box] 模糊匹配 里面只要具有box三个字母链接起来的类名都可以

9、div:not([class]){} 没有class属性的div

二、伪类选择器

css伪类用于向某些选择器添加特殊效果

UI中的伪类

:enabled{} 选择可用的元素

:disabled{} 不可用的元素

:checked{}  默认被选中 或者被选中

三、css中的nth选择器

1、:first-child{}  第一个子元素

2、:last-child{}  最后一个子元素

3、:nth-child(n){}  第n个孩子

4、:nth-child(odd){}   第奇数个子元素

5、:nth-child(even){}  第偶数个子元素

6、:only-child{}      独生子

考点:

:nth-of-type{...}和 :nth-child{.....}的区别

前者可以不在同一个父元素里面但是后者必须在同一个父元素里面

伪元素:默认呈现一个行内元素

div:: after{....}  正规写法

为了兼容旧版本的浏览器一般是写一个冒号div:after{....}

但是它与伪类的区别就在于一个冒号和两个冒号

常见的伪元素

1、div::after{

content:"内容";

display:"block";

}

2、div::after{...}

3、::first-letter 第一个字母

4、::last-letter  第一行

5、::selection 被选中时候

四 CSS的重要属性和样式

1、关于透明度

opacity:0~1;

做兼容 :filter;alpha(opcity...)取值在0-100;

这个的透明度是整体的透明度改变包括图片和文字而 rgba的只是改变他的背景

2、关于阴影效果

2.1、文本阴影

text-shadow:h-shadow v-shadow blur color ;

水平阴影的位置向右为正向左为负

垂直方向的位置向上为正向下为负值

模糊距离

背景颜色

2.2 盒子阴影

box-shadow: x轴 y轴 模糊半径 扩展半径 颜色 投影方式 [inset]\[outset]

3、文字相关的样式

字体的引入

css3 @font-face命名规则

@font-face{

font-family:自己定义的字体名字;

src:url(路径);

需要给字体的格式做兼容

}

4、 圆角 border-radius

一个值的时候为四个角的一样 一般是圆形的话就写50%;

两个值的时候显示的样式是对角 值1 表示左上角和右下角  值2 表示右上角和左下角

四个值的时候表示顺时针 上左 上右 下右 下左

三个值的时候 值1 表示左上  值2  右上 左下  值3 右下

有的人还会写 border-radius: 10px  20px /30px  40px;

这是把一个叫分割成为水平方向和垂直方向上的 斜线前面表示水平方向的 后面表示垂直方向上的

5、 关于给边框加背景图片

border-image-source:url(路径);

border-image-slice:数值 取值个数 1-4 fill;

border-image-repeat:是否平铺 默认被拉伸

repeat: 平铺 从中心开始平铺 会有半个图片的情况

stretch: 拉伸

round : 铺满

border-image:url() 27 fill;

border-image-width: 边框图片的宽度

border-image-outset 边框图片外凸

6、CSS3多背景图片

background-image: url() , url(),url();

7、 背景渐变——现行渐变

background: linear-gradient(angle,颜色 0%, 颜色 50% , 颜色 100%)

angle: left right top bottom.

30deg to left(以偏移30度的方向向左)

to top left (向左上角偏移);

repeat-linear-grandient: 重复渐变

8、 兼容问题

-webkit-height: ; 谷歌 苹果

-moz-height: ; 火狐

-ms-height: ; ie

-0-height : ; 欧朋

五、关于变换 transform

变换: transform;

transform: rotate| scale | skew | translate

属性之间用空格隔开

rotate 旋转

scale 缩放

skew 扭曲

translate 移动

a、 transform:translateX(值);

如果不写xyz默认x

transform=translate(值1,值2); 值1 是水平方向上的位移 值2是垂直方向上的位移

b、 transform:rotateX(60deg) 在x轴旋转60度, 如果不写XYZ的话是默认沿着Z轴旋转。

c、 scale 缩放

transform: scaleX (0.5)水平方向上的是x缩放

括号里的值为一个数的时候默认水平缩放和垂直缩放都是这个值

括号里有两个值的时候第一个值为水平方向的缩放 第二个值为垂直方向的缩放。

d、 扭曲 skew

transform : skew(45deg);

默认情况下绕着X 轴扭曲

transform: center center;

改变基点

transform-oligin:top center; 这里的值除了可以是带有方位词 还可以是带有百分号的像素

六 、三种位置居中的方法

第一种、

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

第二种、

position=absolute;

left:50%;

top:50%;

margin-top:负的标签宽度的一半;

margin-left:负的标签高度的一半;

第三种、

position=absolute;

left:50%;

top:50%;

translate(-50%,-50%);

七、 关于过渡 transition

1、transition的属性和值

transition: all 5s ease 0s;

all 表示改变多个属性

5s   表示改变这个属性的总时间

ease 是指这个改变的速度

0s  表示除法事件延迟的时间

transition-property: 过度属性;

transition-duration: 持续时间

transition-timing-function:   速度

transition-delay:    延迟时间

tramsition: 改变属性 持续时间 速度  延迟时间

2、 transition的速度的值

ease: 逐渐变慢;

linear: 匀速;

ease-in: 匀加速

ease-out: 匀减速

ease-in-out: 先加速在减速

cubic-bezien: 自定义贝塞尔曲线

3、关于transition 的位置

改变谁hover 时候的样子一般就放在这个元素里面

li{

transition: all 5s ease 0s;

}

放在li{} 和li:hover{} 里面的区别

如果放在li{} 里面那么过去了之后他自己会向刚刚过去的样子一样再回到原来的位置

如果放到li:hover{} 里面那么过去了之后在哪就在那 不会再回来

八、 自定义动画 animation

animation:'my' 20s linear 2s infinite animation-interation-count;

动画名字 持续时间 速度  循环次数  循环的方向

1、 animation的属性和值

animation-name: 名字;

animation-duration:  时间

animation-timing-function: 速度

animation-delay:   延迟

animation-interation-count: 次数 当为infinite的时候为无限次

animation-direction: 方向 当为alternate 是来回运动  当为reverse的时候反向运动

animation-fill-mode:            默认值为 none 不改变默认行为

forwords :向前走 停在结束的位置

backwords:向后走 停在开始位置

both     :走到哪 听到那

2、设置关键帧

例子是摩天轮的关键帧

@keyframe myname{

0%{

transform: rotate(0deg);

}

100%{

transform: rotate(360deg);

}

}

CSS3--j惊艳到你的新前端的更多相关文章

  1. 迄今最安全的MySQL?细数5.7那些惊艳与鸡肋的新特性(上)【转载】

    转自: DBAplus社群 http://www.toutiao.com/m5762164771/ 迄今最安全的MySQL?细数5.7那些惊艳与鸡肋的新特性(上) - 今日头条(TouTiao.com ...

  2. CSS3中惊艳的gradient

    以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...

  3. css3制作惊艳hover切换效果

    css3制作经验hover切换效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...

  4. FineUIPro v4.0.0 发布了,全新 CSS3 动画惊艳登场!

    FineUI(专业版)v4.0.0 即将于 2017-10-23 发布! 这个版本将引入了激动人心的 CSS3 动画,只需要开启全局属性 EnableAnimation 即可,先睹为快: 1. 菜单动 ...

  5. 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?

    本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...

  6. 惊艳!9个不可思议的 HTML5 Canvas 应用试验

    HTML5 <canvas> 元素给网页中的视觉展示带来了革命性的变化.Canvas 能够实现各种让人惊叹的视觉效果和高效的动画,在这以前是需要 Flash 支持或者 JavaScript ...

  7. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  8. uperTextView-从未如此惊艳!一个超级的TextView

    简介 下载:http://www.see-source.com/androidwidget/detail.html?wid=1273 欢迎使用SuperTextView,这篇文档将会向你展示如何使用这 ...

  9. ( 转 )超级惊艳 10款HTML5动画特效推荐

    今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些HTML5动画和jQu ...

随机推荐

  1. Nodejs 如何制作命令行工具

    # 全局安装,安装报错是需要前面加上sudo $ sudo npm install -g xxxb # 输出帮助 $ xxxb -h Usage: xxxb 这里是我私人玩耍的命令哦![options ...

  2. .NET开源工作流RoadFlow-表单设计-HTML编辑器

    roadflow目前采用的html编辑器为ueditor编辑器(和表单设计器的编辑器相同). 绑定字段:与数据表的某个字段对应. 宽度:编辑器的宽度. 高度:编辑器的高度. 运行效果如下:

  3. python 初识

    一.Python介绍 Python简介 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...

  4. Git学习1:Git起步

    本系列文章部分原理和命令相关内容是从 https://git-scm.com/book/zh/v2 摘录,软件实际使用是总结自己的实践经验成文. 1. 关于版本控制 版本控制是一种记录一个或若干文件内 ...

  5. solidity语言5

    结构体 pragma solidity ^0.4.11; // 众筹合约 contract CrowdFunding { // 投资者 struct Funder { address addr; ui ...

  6. Flask中数据库关联与分页与cache缓存(十二)

    1 一对多(One To Many) 表示一对多的关系时,在子表类 Post 中需要通过 foreign key (外键)引用父表类 User 在Post类中指定ForeignKey: class P ...

  7. php之Apache压力测试

    1,测试本机是否已经安装好Apache ①进入自己的Apache目录下面的bin目录,然后执行ab -V.如果返回Apache版本则表示已经装好 2,执行压力测试命令,ab -n 1000(请求总数) ...

  8. ThinkPHP5专题

    TinkPHP5中 1. model中select()后的查询结果是对象而不是数组 2. model中 假如有 $result=$this->field($fields)->where($ ...

  9. Linux--VSFTP服务搭建

    Vsftp服务 服务功能:文件传输 1.环境部署 ip=192.168.1.50 [root@localhost /]# rpm -ivh /mnt/Packages/vsftpd-2.2.2-11. ...

  10. 【转】vector中对象指针的排序

    原文:http://blog.csdn.net/tanlijun37/article/details/1948493 vector中对象指针的排序,初步想法是1: 把对象指针存到vector,重载bo ...