CSS3--j惊艳到你的新前端

一、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);

}

}

时间: 2024-11-05 19:41:07

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

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

转自: DBAplus社群 http://www.toutiao.com/m5762164771/ 迄今最安全的MySQL?细数5.7那些惊艳与鸡肋的新特性(上) - 今日头条(TouTiao.com)http://toutiao.com/a6300616158581604609/?tt_from=mobile_qq&utm_campaign=client_share&app=news_article&utm_source=mobile_qq&iid=4592472790&

css3制作惊艳hover切换效果

css3制作经验hover切换效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"&g

web前端入门到实战:用css3实现惊艳面试官的背景即背景动画(高级附源码)

我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易.这篇文章就让我们汇总一下使用Css3实现的各种特效. 1.实现内部虚线边框知识点:outline 核心代码 .dash-border{ width: 200px; height: 100px; line-height: 100px; outline: 1px dashed #fff; outline-o

CSS3中惊艳的gradient

html5 figcaption和css3制作8种惊艳的图片标题hover效果

一款利用html5的figcaption标签和css3 3d transform,css3 transition等技术制作的图片标题hover效果,共有8种不同的惊艳效果. 下载演示地址

从未如此惊艳!你好,SuperTextView

欢迎使用 SuperTextView,这篇文档将会向你展示如何使用这个控件来提高你构建项目的效率. SuperTextView 继承自 TextView,它能够大量的减少布局的复杂程度,并且使得一些常见的效果变得十分容易实现且高效.同时,它内置了动画驱动,你只需要合理编写Adjuster,然后startAnim()就可以看到预期的动画效果.它仅仅是一个控件,所以你可以不费吹灰之力的在你的项目中集成使用. 2 特点 你从此不必再为背景图编写和管理大量<shape>文件了. 重新优化的状态图功能使

《古墓丽影10》PC版重磅更新:DX12画质惊艳!

<古墓丽影10>PC版重磅更新:DX12画质惊艳! <古墓丽影>系列的最新作品<古墓丽影:崛起>已经上市一周有余,相信不少玩家都已经通关.但现在,官方给了PC版玩家一个再度通关的绝佳理由--画质大幅提升. 今天,<古墓丽影:崛起>开发商面向PC版推送了重磅更新,主要加入对于DX12和VXAO技术支持,从而使游戏光影.细节纹理表现获得全面增强,而且画面流畅性也有所改善. 官方公布的数据显示,测试机型配置为I7-2600,GTX970显卡.在DX11的环境下,游

漂亮的女人惊艳世界,伟大的女人改变世界

生而为人,多数人都不是含着金钥匙出生于名门望族,也并非出身于三餐不饱的寒门之地. 我们多是像她一样,生来就是平凡的普通人. 这个叫萨尔玛·贝娜妮的姑娘于1978年5月10日出生在北非国家摩洛哥.跟你我一样,她是一个再平凡不过的姑娘,但3岁那年母亲去世,让她比普通人更加可怜. 年幼的姑娘离开她那当老师的父亲,跟随外婆长大. 人总要努力一些,珍惜生命中所有的机会,才能活出自己想要的样子. 在阿拉伯国家摩洛哥,女性的地位低得可怜,有多可怜?就连国家的第一夫人都不能在公众场合抛头露面,至于平民家的女性?

中科燕园GIS外包团队(手机:13261043797,QQ:1216807928)arcgis10.3惊艳亮相

美国时间2014年12月10日,ArcGIS 10.3正式发布.这是Esri自2012年发布ArcGIS 10.2之后,历时两年的成果结晶.ArcGIS 10.3,隆重推出以用户为中心(Named User)的全新授权模式,超强的三维“内芯”,革新性的桌面GIS应用,可配置的服务器门户,即拿即用的Apps,更多应用开发新选择,数据开放新潮流,为构建新一代Web GIS应用提供了更强有力的核“芯”支持. 惊艳1:以用户为中心(Named User)的授权模式 ArcGIS 10.3采用了全新授权模