CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

时间:2021-07-10 00:45:18

---恢复内容开始---

一、CSS3新增选择器

1、nth-chlid(n)用法

  selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.box p,.main p{
background:red;
color:#fff;
margin-top:10px;
}
/*找到类为box下的第三个子元素并该元素为p标签的*/
.box p:nth-child(3){
background:gold;
}
.box p:nth-of-type(3){
background:gold;
}
/*找到类为main下的第三个子元素并该元素为div标签的*/
.main div:nth-child(3){
background: pink;
}
/*找到类为main下的第三个p标签*/
.main p:nth-of-type(3){
background:green;
}
</style>
</head>
<body>
<div class="box">
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
</div>
<div class="main">
<p>段落1</p>
<p>段落2</p>
<div>这是一个div</div>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
</div>
</body>
</html>

2、nth-last-chlid(n)用法

  selector:nth-last-chlid(n)指找到倒数第n个子元素并且该元素为selector标签

3、selector:enabled可用的表单控件

4、selector:disabled不可用的表单控件

 <style>
input:disabled{
background:red;
}
input:enabled{
background:gold;
}
/*选择复选框,紧邻文字变为空色*/
input:checked + label{
color:red;
}
</style>
<body>
<form>
<input type="text" placeholder="请输入用户名" disabled>
<input type="password" placeholder="请输入密码">
<input type="checkbox"><label>记住用户名</label>
</form>
</body>

5、E>F  E元素下的第一层子集

6、E~F E元素后面的兄弟元素

7、E+F 紧挨着的兄弟元素

8、属性选择器 E[data-attr]含有data-attr属性的元素

  a、E[data-attr='ok'] 含有data-attr属性的元素且它的值为"ok";

  b、E[data-attr^='ok']含有data-attr属性的元素且它的值开头含有"ok";

  c、E[data-attr$='ok']含有data-attr属性的元素且它的值结尾含有"ok";

  d、E[data-attr*='ok']含有data-attr属性的元素且它的值中含有"ok";

eg  div[data-attr = "ok"]{

  color:red;

}

二、CSS3圆角

1、设置某一个角的圆角:border-radius:左上角 右上角 右下角 左下角;

  比如设置左上角的圆角:border-top-left-radius:30px 60px;

2、同时设置四个角:border-radius:30px 20px 10px 50px;

3、设置四个角相同(常用):border-radius:20%;border-radius:50%;(是正圆)

三、CSS3阴影

1、box-shadow:水平偏移  垂直偏移  羽化大小  扩展大小  颜色  是否内阴影

注:正值向右偏移,向下偏移,默认为外阴影

box-shadow:10px 5px 20px 2px pink;

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

如果做内阴影的话,可以把偏移量设为0
box-shadow:0 0 20px 2px red inset;

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

四、CSS3 透明度rgba(新的颜色值表示法)

1、盒子透明度表示法:opacity:0.1;filter:alpha(opacity=10)(兼容IE)

2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

五、transition过渡动画 (需要触发)

transition:过渡属性  时间  运动方式  动画延迟

1、transition-property  设置过渡的属性,比如:width  height  background-color(是在宽度上做动画还是在高度上亦或是背景上)

2、transition-duration  设置过渡的时间,比如:1s  500ms

3、transition-time-function  设置过渡的运动方式

  a、linear  匀速

  b、ease  开始和结束慢速

  c、ease-in  开始时慢速

  d、ease-out  结束时慢速

  e、ease-in-out 开始和结束时慢速

4、transition-delay  设置动画的延迟

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

制作图片文字遮罩

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

六、transform变换(一般配合transition使用,有个过渡效果不至于太突兀)

1、translate(x,y) 设置盒子位移    如:transform:translate(200px,300px);

2、scale(x,y) 设置盒子缩放          如:transform:scale(1.2,1);

3、rotate(deg) 设置盒子旋转        如:transform:rotate(360deg);

4、skew(x-angle,y-angle) 设置盒子倾斜     如:transform:skew(20deg,30deg);

5、perspective 设置透视距离(近大远小) 如:transform:perspective(800px) rotateX(30deg);

6、transform-style flat| preserve-3d 设置盒子是否按3d空间显示  如:transform-style:preserve-3d;

7、translateX、translateY、rotateZ 设置三维移动

8、rotateX、rotateY、rotateZ 设置三维旋转

9、scaleX、scaleY、scaleZ 设置三维缩放

10、transform-origin 设置变形的中心点  如:transform-origin:left top;transform-origin:20px 50px;

11、backface-visibility 设置盒子背面是否可见  如:backface-visibility:hidden;

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

例:翻面效果(正面是图片,鼠标点击图片之后,会翻转180度背面出现文字说明)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻面效果</title>
<style>
*{
margin:0;
padding:0;
}
.con{
width:200px;
height:144px;
border:1px solid #ccc;
margin:100px auto;
position: relative;
transform-style: preserve-3d;
transform:perspective(800px) rotateY(0deg);
}
.pic,.info{
width:200px;
height:144px;
position:absolute;
left:0;
top:0;
transform:perspective(800px) rotateY(0deg);
backface-visibility: hidden;
transition:all 500ms ease;
}
.info{
background:gold;
text-align: center;
line-height: 144px;
backface-visibility: hidden;
transform:translateZ(2px) rotateY(180deg);
}
.con:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.con:hover .info{
transform:perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="con">
<div class="pic">
<img src="../images/furit_01.jpg" alt="">
</div>
<p class="info">图片文字说明</p>
</div>
</body>
</html>

七、CSS3 animation动画(直接进行动画,不需要触发)

animation:动画名称 动画持续时间 动画运动方式 动画开始延迟时间 动画应用次数 动画结束后是否按原路返回 动画前后的状态;同时设置多个属性

如:animation:moving 1s ease 1s 6 alternate forwards;

1、@keyframes 定义关键帧动画

如:@keyframes  动画名{

    from{属性:属性值}

    to{属性:属性值}

}

2、animation-name  动画名称

3、animation-duration  动画时间

4、animation-timing-function 动画曲线

  a、linear  匀速

  b、ease  开始和结束慢速

  c、ease-in  开始时慢速

  d、ease-out  结束时慢速

  e、ease-in-out 开始和结束时慢速

  f、steps 动画步数

5、animation-delay 动画延迟

6、animation-iteration-count 动画播放次数 n|infinite

7、animation-direction:normal 默认动画结束不返回/alternate 动画结束后返回

8、animation-play-state 动画状态

  a、paused 停止

  b、running 运动

9、animation-fill-mode  动画前后的状态

  a、none 不改变默认行为

  b、forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)

  c、 backwards 在animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

例:loding动画,代码如下:

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading动画</title>
<style>
*{
margin:0;
padding:0;
}
.con{
width:300px;
height:100px;
margin:50px auto;
border:1px solid #ccc;
position: relative;
}
.con div{
width:30px;
height:50px;
background:gold;
margin:15px;
float:left;
border-radius: 10px;;
}
.con p{
position: absolute;
left:0;
bottom:0;
width:100%;
text-align: center;
}
.con div:nth-child(1){
background:red;
animation:loading 500ms ease 0s infinite alternate;
}
.con div:nth-child(2){
background:orangered;
animation:loading 500ms ease 100ms infinite alternate; }
.con div:nth-child(3){
background: blue;
animation:loading 500ms ease 200ms infinite alternate; }
.con div:nth-child(4){
background: green;
animation:loading 500ms ease 300ms infinite alternate; }
.con div:nth-child(5){
background: cyan;
animation:loading 500ms ease 400ms infinite alternate; }
@keyframes loading {
from{
transform:scale(1);
}
to{
transform: scale(0.5);
}
}
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Loading...</p>
</div>
</body>
</html>

八、CSS3浏览器样式前缀

1、为了让CSS3样式兼容,需要将某些样式加上浏览器前缀

a、-ms- 兼容IE浏览器

b、-moz- 兼容firefox

c、-o- 兼容opera

d、-webkit- 兼容chrome和safari

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

2、Sublime text编辑器自动添加浏览器前缀

目前,有些CSS3属性需要加前缀,有些不需要加,有些只需要加一部分,这些加前缀的工作可以交给插件来完成,比如安装autoprefixer
Sublime text中安装autoprefixer
  a、在preferences/key Bindings-Users
    设置快捷键{"key":["ctrl+alt+x"],"command":"autoprefixed"}通过此工具可以按照最新的前缀使用情况给样式自动加前缀
    说明:last 7 versions:最新的浏览器的7个版本
    cascade:缩进美化属性值
  b、在preferences/package setting>autoprefixer>setting-user{
    "browsers":["last 7 versions"],
    "cascade":true,
    "remove":true
  }

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画的更多相关文章

  1. 19 01 04 CSS3 圆角 grba&lpar;带通明的&rpar; tansition动画 transform变换 animation动画

    CSS3圆角 设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px; 同时分别设置四个角: border-radius:30px 60px 120 ...

  2. css3之transition、transform、animation比较

    css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解.    其实, ...

  3. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  4. 综合CSS3 transition、transform、animation写的一个动画导航

    打算好好写博客开始,就想把博客给装修下,近几个月一直处在准备找工作疯狂学习前端的状态.感觉博客装修要等到工作稳定下来才有时间和经历去想想要搞成什么样的了.也看过一些博主的博客导航有这种样式的,趁着回顾 ...

  5. CSS3圆角&comma;阴影&comma;透明

    CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. ...

  6. css3新增边框、阴影、边框、背景、文本、字体

    css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...

  7. CSS3 02&period; 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  8. 认识CSS3新增选择器和样式

    前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...

  9. CSS3 新增选择器

    CSS3 新增选择器 结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 ...

随机推荐

  1. HTML之JS学习

    提示篇 function fun(){ var is = confirm('选择对话框');/*确定取消对话框*/ if(is == true){ document.write('真');/*网页输出 ...

  2. 用DateTime的ParseExact方法解析特殊的日期时间

    今天遇到一个特别的需求,需要从下面的字符串中转换成一个DateTime对象: [07-13 15:50:42] 主要问题是这个时间不是标准的时间,而是自定义的格式,即开头是月-日,然后是时间. 使用最 ...

  3. SSH&plus;Oracle10G抛Disabling contextual LOB creation as createClob&lpar;&rpar; m

    在使用Oracle10G时候,实体类使用了CLOB字段,结果抛了Disabling contextual LOB creation as createClob() method threw error ...

  4. 如何使用开源库&comma;吐在VS2013发布之前&comma;顺便介绍下V2013的新特性&quot&semi;Bootstrap&quot&semi;

    如何使用开源库,吐在VS2013发布之前,顺便介绍下VS2013的新特性"Bootstrap" 刚看到Visual Studio 2013 Preview - ASP.NET, M ...

  5. Intel DPDK 全面解读

    高性能网络技术 随着云计算产业的异军突起,网络技术的不断创新,越来越多的网络设备基础架构逐步向基于通用处理器平台的架构方向融合,从传统的物理网络到虚拟网络,从扁平化的网络结构到基于 SDN 分层的网络 ...

  6. RFID概述

    自动识别技术的本质在于利用被识别物理对象的一些具有辨识度的特征来对物理对象进行区分和识别.因此,这些具有辨识度的特征可以是物理对象自带的特征,如指纹,人脸,语言,视网膜,心跳等,也可以是通过第三方赋予 ...

  7. SQL Server DATA文件夹下audittrace20180124152845&lowbar;52&period;trc类文件异常增多

    同事告知某现场SQL Server2008R2数据库的DATA文件夹下audittrace开头的trc文件不断增多,占用较大空间,因此需要关停,尝试解决步骤如下: 1.查看是否有后台开启的trace ...

  8. 001&lowbar;ajax学习

    1,XMLHttpRequest 2,window.ActioveXObject(ie浏览器) 3,new ActiveXObject("Microsoft.XMLHTTP") 4 ...

  9. jmeter ---断言持续时间&lpar;Duration to Assert &rpar;和断言文件大小

    jmeter ---断言持续时间(Duration to Assert )和断言文件大小 1.断言持续时间(Duration to Assert ) Duration to Assert -- 允许的 ...

  10. Oracle 11g超详细安装步骤

    一.首先是Oracle的安装 软件请自行到网上下载 18.等待,出现选择项时点击next 二.打开服务 三.验证数据库是否安装成功