1 CSS3 选择器

1.1 基本选择器

1.2 层级

  • 空格

  • >

  • + .item+li

  • ~ .item~p

1.3 属性选择器

  • [attr]

  • [attr=value]

  • [attr^=value]

  • [attr$=value]

  • [attr*=value]

  • [][][]

1.4 伪类选择器

  • :link

  • :visited

  • :hover

  • :active

  • :focus

  • :first-child .list li:first-child

  • :last-child

  • :nth-child() 从1开始 odd even

  • :nth-last-child() 从1开始

  • :only-child li:only-child

  • :first-of-type

  • :last-of-type

  • nth-of-type()

  • nth-last-of-type()

  • only-of-type

<ul>    <li></li>    <li></li>    <p></p>    <li>li:nth-of-type(3) </li> <li></li> <li></li></ul>​li:nth-of-type(3)   #选择到li:nth-child(3)   #没有满足条件的元素

1.5 伪元素选择器

  • ::before .item::before

  • ::after .clearfix::after {content:''; display:block; clear:both}

<div class="nav clearfix">     子元素浮动    [::after 此处是伪元素创建的]</div>​​<div class="banner"></div>

  • ::first-letter

  • ::first-line

  • ::selection

  • ::placeholder ::placeholder {color:red} <input placeholder="请输入用户名">

2 CSS3 基础

2.1 新增颜色单位

  • rgba() 不透明0~1

2.2 新增长度单位

  • rem

  • vw

  • vh

3 新增的CSS3属性

3.1 边框圆角

border-radius 长度单位border-top-left-radiusborder-top-righ-radiusborder-bottom-left-radiusborder-bottom-right-radius

3.2 布局

display: 值很多很多 .... table table-row...box-sizing: content-box（默认值） / border-box

3.3 外轮廓

outline:1px solid #cccoutline-styleoutline-coloroutline-width

3.4 不透明度

opacity: 0~1

3.5 阴影

box-shadow:水平偏移 垂直偏移;   偏移可以负值box-shadow:水平偏移 垂直偏移 颜色;box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>盒子阴影</title>
 6     <style>
 7         .item { 8             display: inline-block;
 9             margin:20px;
10             width: 100px;
11             height: 100px;
12             border: 1px solid #999;
13         }
14
15         .item01 {16             box-shadow: 10px 10px;
17         }
18         .item02 {19             box-shadow: 3px 3px #ccc;
20         }
21         .item03 {22             /*大部分 需要设置这几个值*/
23             box-shadow: 10px 10px 10px #ccc;
24         }
25         .item04 {26             /*外延值*/
27             box-shadow: 0px 0px 0px 120px #ccc;
28         }
29
30         .item05 {31             /*多重阴影*/
32             box-shadow: 0px 0px 3px 5px red,
33                         0px 0px 3px 10px orange,
34                         0px 0px 3px 15px yellow,
35                         0px 0px 3px 20px green,
36                         0px 0px 3px 25px cyan,
37                         0px 0px 3px 30px blue,
38                         0px 0px 3px 35px purple;
39         }
40     </style>
41 </head>
42 <body>
43     <h1>阴影</h1>
44     <hr>
45
46
47     <div class="item item01">01</div>
48     <div class="item item02">02</div>
49     <div class="item item03">03</div>
50     <div class="item item04">04</div>
51     <div class="item item05">05</div>
52     <div class="item item06">06</div>
53
54     <hr>
55
56
57 </body>
58 </html>

阴影

3.5 背景

background-size: cover / contain / 400px 300px / 100% 100%background: color image postion/size repeat attachment

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>背景</title>
 6     <style>
 7         .item { 8             /*display: block;*/
 9             width: 300px;
10             height: 300px;
11             border: 1px solid #ccc;
12             background: url("./images/meinv02.jpg") no-repeat;
13
14             /*设置背景图片的尺寸*/
15             /*background-size: cover; 优先 铺满元素。 多余的图片裁掉 保证原图比例*/
16             /*background-size: contain; 优先 保证图片显示完整，可能元素不能铺满。 保证原图比例*/
17
18             /*background-size:100px 200px;指定背景大小*/
19             /*background-size:100% 100%;*/
20
21
22             /*background: url('./images/meinv02.jpg') 10px 20px/cover;*/
23         }
24     </style>
25 </head>
26 <body>
27     <div class="item">
28
29     </div>
30 </body>
31 </html>

背景

3.6 CSS3变换

  • transform

    translatex() translatey()translate(x, y)rotate() 角度 degskewx()  角度degskewy()skew(x, y)

  • transform-origin 变换的原点。 对translate没有意义。 对rotate影响大

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变换</title>
 6     <style>
 7         .box { 8             display: inline-block;
 9             margin: 30px;
10             width: 100px;
11             height: 100px;
12             border:2px dashed orange;
13
14             vertical-align: middle;
15         }
16         .item {17             border: 1px solid #999;
18             background: #ccc;
19             height:99px;
20         }
21
22         .item01 {23             /*位移 移动*/
24             transform: translate(20px, 20px);
25             /*transform: translatex(10px) translatey(10px);*/
26             /*transform: translatey(10px);*/
27         }
28
29         .item02 {30             /*旋转 deg角度  0~360deg*/
31             transform: rotate(60deg)
32         }
33
34         .item03 {35             /*扭曲*/
36             transform: skewx(60deg) skewy(60deg);
37         }
38
39         .content {40             margin: 30px;
41             width: 100px;
42             height: 100px;
43             border: 1px solid #999;
44             transform: rotate(60deg);
45             transform-origin: left top;/*transform-origin 变换的原点*/
46         }
47     </style>
48 </head>
49 <body>
50
51     <div class="box">
52         <div class="item item01"></div>
53     </div>
54
55         <div class="box">
56         <div class="item item02">HELLO</div>
57     </div>
58
59         <div class="box">
60         <div class="item item03">HELLO</div>
61     </div>
62
63     <hr>
64
65
66     <div class="content">
67         HELLO
68     </div>
69
70 </body>
71 </html>

变换

3.7 过渡效果

哪些CSS属性可以过渡

长度 (padding margin width height  left/top/right/bottom border-width  background-position ...)颜色变换纯数字 (opacity、z-index)


 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3过渡</title>
 6     <style>
 7         .box { 8             width: 100px;
 9             height: 100px;
10             background: red;
11             /*display: block;*/
12             /*visibility: visible;*/
13
14             border:10px solid purple;
15
16
17             /*过渡*/
18             /* transition:3s; */
19             transition-property: width,height;
20             transition-duration: 5s;
21             transition-timing-function: ease;
22             transition-delay:3s;
23
24
25             transition: all ease 3s 1s;
26             transition: 4s;
27             transition: all 4s;
28
29
30         }
31         .box:hover {32             /*display: none;*/
33             /*visibility: hidden;*/
34             width: 200px;
35             height: 200px;
36             background: green;
37
38             border:20px dashed purple;
39
40         }
41     </style>
42 </head>
43 <body>
44     <h1>transition</h1>
45     <hr>
46     <div class="box">
47
48     </div>
49
50     <hr>
51
52     <p>
53         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore veritatis, ducimus maxime fugiat unde inventore aspernatur mollitia dolor doloribus facere eum libero repudiandae, quisquam, deserunt facilis magni error! Vero.
54     </p>
55 </body>
56 </html>

过渡

触发过渡

伪类触发  :hover  :focus  ....媒体查询   @mediaJS

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>过渡实例</title>
 6     <style>
 7         .item { 8             display: inline-block;
 9             width: 100px;
10             height: 100px;
11             border: 1px solid #ccc;
12             text-align: center;
13             line-height: 100px;
14             border-radius: 50px;
15             font-size:30px;
16             cursor:pointer;
17             color:#f66700;
18
19             /*过渡*/
20             transition: transform 1s;
21         }
22
23         .item:hover {24             transform: rotate(360deg)
25         }
26     </style>
27 </head>
28 <body>
29     <h1>同志</h1>
30     <hr>
31
32     <div class="list">
33         <div class="item">1</div>
34         <div class="item">2</div>
35         <div class="item">3</div>
36         <div class="item">4</div>
37         <div class="item">5</div>
38         <div class="item">6</div>
39         <div class="item">7</div>
40         <div class="item">8</div>
41     </div>
42 </body>
43 </html>

过渡实例

相关属性

transition-property  指定要过渡的属性 用,隔开。默认是 alltransition-duration  过渡持续时间transition-timing-function  过渡线性效果  默认 easetransition-delay   过渡延迟transition：property timing-function duration delay

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>纯CSS实现下拉菜单</title>
  6     <style>
  7         * {  8             padding: 0;
  9             margin: 0;
 10         }
 11         body { 12             font:14px "Microsoft YaHei",sans-serif;
 13         }
 14         ul { 15             list-style: none;
 16         }
 17         .container { 18             margin: 0 auto;
 19             width: 1000px;
 20         }
 21
 22         .nav { 23             /*margin-top: 60px;*/
 24             width: 100%;
 25             height: 40px;
 26             line-height: 40px;
 27             background: #333;
 28         }
 29
 30         /*一级菜单*/ /*该选择器会选择 所有li*/
 31         .nav li { 32             float: left;
 33             position: relative;
 34         }
 35
 36         /*一级菜单*/
 37         .nav li a { 38             display: block;
 39             width: 100px;
 40             text-align: center;
 41             color: #fff;
 42             text-decoration: none;
 43         }
 44
 45         /*二级菜单*/
 46         .nav li ul li a { 47             color: #333;
 48         }
 49         .nav li ul li { 50             /*覆盖前面设置  */
 51             float: none;
 52         }
 53         .nav li ul { 54             /*border: 1px solid #ccc;
 55             border-top: none;*/
 56             background: #fff;
 57             /*二级菜单先隐藏*/
 58             /*display: none;
 59 */
 60             /*绝对定位*/
 61             position: absolute;
 62             left:0;
 63             top:;
 64
 65             overflow: hidden;
 66             height: 0px;
 67
 68             /*过渡*/
 69             transition: height .5s;
 70         }
 71
 72
 73         /*划过那个li 哪个li就变红*/
 74         .nav li:hover { 75             background: red;
 76         }
 77         .nav li:hover ul{ 78         /*    display: block;*/
 79             height: 160px;
 80         }
 81
 82         /*设置banner*/
 83         .banner img { 84             width: 100%;
 85         }
 86     </style>
 87 </head>
 88 <body>
 89
 90     <div class="nav">
 91         <div class="container">
 92             <ul>
 93                 <li><a href="#">首页</a></li>
 94                 <li>
 95                     <a href="#">博客</a>
 96                     <ul>
 97                         <li><a href="#">同志博客</a></li>
 98                         <li><a href="#">小同志博客</a></li>
 99                         <li><a href="#">老同志博客</a></li>
100                         <li><a href="#">大同志博客</a></li>
101                     </ul>
102                 </li>
103                 <li>
104                     <a href="#">论坛</a>
105                     <ul>
106                         <li><a href="#">同志论坛</a></li>
107                         <li><a href="#">红色论坛</a></li>
108                         <li><a href="#">黄色论坛</a></li>
109                         <li><a href="#">绿色论坛</a></li>
110                     </ul>
111                 </li>
112                 <li><a href="#">关于我们</a></li>
113                 <li>
114                     <a href="#">举报我们</a>
115                     <ul>
116                         <li><a href="#">涉黄</a></li>
117                         <li><a href="#">涉黑</a></li>
118                         <li><a href="#">涉赌</a></li>
119                         <li><a href="#">涉毒</a></li>
120                     </ul>
121                 </li>
122             </ul>
123         </div>
124     </div>
125
126
127     <div class="banner">
128         <img src="../../dist/images_one/meinv02.jpg" alt="">
129     </div>
130 </body>
131 </html>

导航-下拉菜单

3.8 CSS3动画

关键帧

@keyframes 动画名字 {    0% {

    }    20% {

    }    40% {

    }    100% {

   }}

相关CSS属性

animation-name  指定动画的名字animation-duration  动画的执行时间animation-timing-function  执行效果速度  animation-delay   延迟animation-iteration-count   循环 次数  infinite(无限)animation-direction:  alternate （正向 反向 交替）\ reverse（反向）animation-play-state: running / pausedanimation 复合属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3动画</title>
 6     <style>
 7
 8         /*关键帧的语法*/
 9         @keyframes myanimate{10             from {
11                 background: red;
12                 width:200px;
13             }
14
15             50% {16                 width:400px;
17             }
18
19             to {20                 background: green;
21                 width:600px;
22             }
23         }
24
25         .box {26             width: 200px;
27             height: 200px;
28             border: 2px dashed orange;
29
30             animation-name: myanimate;
31             animation-duration: 1s; /*动画持续时间*/
32             animation-timing-function: linear;
33             animation-delay: 0s;
34             animation-iteration-count: infinite; /*无限循环*/
35             animation-direction: alternate; /*多次循环的时候，一次正向动画，一次反向动画*/
36
37             animation-play-state: paused;
38
39             animation: myanimate 2s linear 2 alternate;
40         }
41
42         .box:hover {43             animation-play-state: running;
44         }
45     </style>
46 </head>
47 <body>
48
49     <div class="box"></div>
50
51
52 </body>
53 </html>

css3动画

转载于:https://www.cnblogs.com/Roc-Atlantis/p/9433519.html

css3 变换、过渡效果、动画相关推荐

  1. css3变换、过渡与动画_带有CSS3过渡和变换的画布菜单

    css3变换.过渡与动画 Now as an easy to use jQuery Plugin 现在作为易于使用的jQuery插件 介绍 ( Introduction ) Off Canvas Me ...

  2. CCS3的过渡、变换、动画以及响应式布局、弹性布局

    CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...

  3. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  4. CSS3变形和动画：旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...

    无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 旋转.扭曲.缩放.位移.矩阵 ...

  5. css动画定义,CSS3中Animation动画的定义和调用

    现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...

  6. html加动画不改变高度,怎么为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画...

    如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画 但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度 ...

  7. CSS3: 利用分层动画让元素沿弧形路径运动

    原文:Moving along a curved path in CSS with layered animation 翻译:涂鸦码龙 译者注:部分代码示例在原文中可以看效果(作者写在博文里面了-), ...

  8. html页面加载动画尺寸,6种CSS3加载动画

    插件描述:6种CSS3炫酷预加载Loading,非常酷的纯CSS3炫酷预加载Loading指示器动画特效.这组loading指示器共6种效果,都是使用:before和:after伪元素,以及CSS帧动 ...

  9. css3的一些动画（代码及演示）

    CSS3 的一些动画(代码及演示) 1. 过渡: Transition(实现元素不同状态间的平滑过渡) 补间动画:从初始状态到终了状态. 帧动画:按固定顺序和速度播放. 属性: Transition- ...

最新文章

  1. CSDN中对Web自定义控件的讨论帖
  2. 【设计模式】-写在前面
  3. SPOJ 287 Smart Network Administrator
  4. 网站站内优化新方案，SEO运营人员值得一看
  5. AI人工智能工程师 学习大纲
  6. 英朗gt仪表盘图标说明_BuildRun低代码开发教程八节 | 图表和仪表盘展示
  7. AndroidStudio中提示:android.content.res.Resources NotFoundException: String resource ID 0x
  8. HDU 1407 测试你是否和LTC水平一样高 （HASH)
  9. 病毒：101种令人难以置信的微生物的图解指南 Virus: An Illustrated Guide to 101 Incredible Microbes PDF
  10. Python模块学习 ---- re正则表达式
  11. 嵌入式linux通过DHCP自动获取IP地址实现
  12. 第四章例题、心得及问题。
  13. 和vs版本关系_教学鉴定贴：如何判断是不是VS厂的沛纳海手表
  14. python显示no matching distribution,Python使用pip安装No matching distribution found for PyYaml==5.3.1...
  15. 机器人暮色枪骑皮肤_LOL：双11活动来了，38款SN总决赛精选阵容半价皮肤推荐
  16. 电脑录音软件哪个好？六款常见的录音软件介绍
  17. 程序员转项目管理之考证PMP
  18. flink-sql所有语法详解-1.13
  19. mysql 按条件join_MySQL Join竟然可以这么玩？根据条件进行复制
  20. opencv python 对指针仪表读数识别

热门文章

  1. mysql字段唯一确定_验证表里某不确定的字段的值是否唯一的方法？
  2. 简述select语句的完整语法_SQL里的各种语句的完整语法
  3. oracle group by 多类别_python数据关系型图表散点图系列多数据系列
  4. saas物资管理界面设计_大型物流企业都在用的SaaS系统，看大规模运配网络如何实现精细化管理？...
  5. php mysql无限分类排序_PHP 无限级分类、排序
  6. linux人脸识别视频推流,RTMP推流协议视频智能分析/人脸识别/直播点播平台EasyDSS接口调用注意事项介绍...
  7. 计算机二级高级应用考题,2016计算机二级MSOFFICE高级应用考试真题
  8. aqlserver实用程序_sqlserver命令提示实用工具的介绍
  9. 字节流转化为文件流_C#文件转换为字节流及字节流转换为文件
  10. 160 - 32 genocide1