css3 变换、过渡效果、动画

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-radius
border-top-righ-radius
border-bottom-left-radius
border-bottom-right-radius

3.2 布局

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

3.3 外轮廓

outline:1px solid #ccc
outline-style
outline-color
outline-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() 角度 deg
    skewx() 角度deg
    skewy()
    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  ....
媒体查询   @media
JS
 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  指定要过渡的属性 用,隔开。默认是 all
transition-duration 过渡持续时间
transition-timing-function 过渡线性效果 默认 ease
transition-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 / paused
animation 复合属性

 

 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/388885.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webservice 启用代理服务器

您会发现你写完了一个webservice在调用的时候发现怎也没办法调用&#xff0c;一个简单的webservice怎么不能使用&#xff0c;一肚子的怨恨&#xff0c;哈哈您可能没有为webservice设置代理。 下面就给您写个调用的用例和大家分享下。其实很简单&#xff0c;但是你没有想到的时…

mysql常用的存储引擎_Mysql存储引擎

什么是存储引擎&#xff1f;关系数据库表是用于存储和组织信息的数据结构&#xff0c;可以将表理解为由行和列组成的表格&#xff0c;类似于Excel的电子表格的形式。有的表简单&#xff0c;有的表复杂&#xff0c;有的表根本不用来存储任何长期的数据&#xff0c;有的表读取时非…

android studio设计模式和文本模式切换

转载于:https://www.cnblogs.com/judes/p/9437104.html

高斯模糊为什么叫高斯滤波_为什么高斯是所有发行之王?

高斯模糊为什么叫高斯滤波高斯分布及其主要特征&#xff1a; (Gaussian Distribution and its key characteristics:) Gaussian distribution is a continuous probability distribution with symmetrical sides around its center. 高斯分布是连续概率分布&#xff0c;其中心周…

C# webbrowser 代理

百度&#xff0c;google加自己理解后&#xff0c;将所得方法总结一下&#xff1a; 方法1&#xff1a;修改注册表Software//Microsoft//Windows//CurrentVersion//Internet Settings下 ProxyEnable和ProxyServer。这种方法适用于局域网用户&#xff0c;拨号用户无效。 1p…

C MySQL读写分离连接串_Mysql读写分离

一 什么是读写分离MySQL Proxy最强大的一项功能是实现“读写分离(Read/Write Splitting)”。基本的原理是让主数据库处理事务性查询&#xff0c;而从数据库处理SELECT查询。数据库复制被用来把事务性查询导致的变更同步到集群中的从数据库。当然&#xff0c;主服务器也可以提供…

golang 编写的在线redis 内存分析工具 rma4go

redis 内存分析工具 rma4go redis是一个很有名的内存型数据库&#xff0c;这里不做详细介绍。而rma4go (redis memory analyzer for golang) 是一个redis的内存分析工具&#xff0c;这个工具的主要作用是针对运行时期的redis进行内存的分析&#xff0c;统计redis中key的分布情…

从Jupyter Notebook到脚本

16 Aug: My second article: From Scripts To Prediction API8月16日&#xff1a;我的第二篇文章&#xff1a; 从脚本到预测API As advanced beginners, we know quite a lot: EDA, ML concepts, model architectures etc…… We can write a big Jupyter Notebook, click “Re…

【EasyNetQ】- 使用Future Publish调度事件

许多业务流程要求在将来某个日期安排事件。例如&#xff0c;在与客户进行初次销售联系后&#xff0c;我们可能希望在将来的某个时间安排跟进电话。EasyNetQ可以通过其Future Publish功能帮助您实现此功能。例如&#xff0c;这里我们使用FuturePublish扩展方法来安排未来一个月的…

Java这些多线程基础知识你会吗?

0、并发和并行、进程核线程、多进程和多线程的区别&#xff1a; &#xff08;这里的时间和时刻上的概念同物理上的一样&#xff09; 并发&#xff1a;在一段时间内多个任务同时执行&#xff0c;或者说是在一段很短的时间内可以执行多条程序指令&#xff0c;微观上看起来好像是可…

MySQL set names 命令_mysql set names 命令和 mysql 字符编码问题

先看下面的执行结果&#xff1a;(rootlocalhost)[(none)]mysql>show variables like character%;---------------------------------------------------------------------------------------| Variable_name | Value |---------------------------------------------------…

设置Proxy Server和SQL Server实现数据库安全

首先&#xff0c;我们需要了解一下SQL Server在WinSock上定义协议的步骤&#xff1a; 1. 在”启动”菜单上&#xff0c;指向”程序/Microsoft Proxy Server”&#xff0c;然后点击”Microsoft Management Console”。 2. 展开”Internet Information Service”,再展开运行Proxy…

Python django解决跨域请求的问题

解决方案 1.安装django-cors-headers pip3 install django-cors-headers 2.配置settings.py文件 INSTALLED_APPS [...corsheaders&#xff0c;...] MIDDLEWARE_CLASSES (...corsheaders.middleware.CorsMiddleware,django.middleware.common.CommonMiddleware, # 注意顺序...…

加勒比海兔_加勒比海海洋物种趋势

加勒比海兔Ok, here’s a million dollar question: is the Caribbean really dying? Or, more specifically, are marine species found on Caribbean reefs becoming less abundant?好吧&#xff0c;这是一个百万美元的问题&#xff1a;加勒比海真的死了吗&#xff1f; 或者…

mysql 查出相差年数_MySQL计算两个日期相差的天数、月数、年数

MySQL自带的日期函数TIMESTAMPDIFF计算两个日期相差的秒数、分钟数、小时数、天数、周数、季度数、月数、年数&#xff0c;当前日期增加或者减少一天、一周等等。SELECT TIMESTAMPDIFF(类型,开始时间,结束时间)相差的秒数&#xff1a;SELECT TIMESTAMPDIFF(SECOND,1993-03-23 0…

tornado 简易教程

引言 回想Django的部署方式 以Django为代表的python web应用部署时采用wsgi协议与服务器对接&#xff08;被服务器托管&#xff09;&#xff0c;而这类服务器通常都是基于多线程的&#xff0c;也就是说每一个网络请求服务器都会有一个对应的线程来用web应用&#xff08;如Djang…

如果你的电脑是通过代理上网的.就要用端口映射

由于公网IP地址有限&#xff0c;不少ISP都采用多个内网用户通过代理和网关路由共用一个公网IP上INTERNET的方法&#xff0c; 这样就限制了这些用户在自己计算机上架设个人网站&#xff0c;要实现在这些用户端架设网站&#xff0c;最关键的一点是&#xff0c; 怎样把多用户的内网…

人口密度可视化_使用GeoPandas可视化菲律宾的人口密度

人口密度可视化GeoVisualization /菲律宾。 (GeoVisualization /Philippines.) Population density is a crucial concept in urban planning. Theories on how it affects economic growth are divided. Some claim, as Rappaport does, that an economy is a form of “spati…

Unity - Humanoid设置Bip骨骼导入报错

报错如下&#xff1a; 解决&#xff1a; 原因是biped骨骼必须按照Unity humanoid的要求设置&#xff0c;在max中设置如下&#xff1a; 转载于:https://www.cnblogs.com/CloudLiu/p/10746052.html

python3openpyxl无法打开文件_Python3 处理excel文件(openpyxl库)

openpyxl 介绍openpyxl是一个用于读/写 XLSX/XLSM/XLTX/XLTM文件的python库。openpyxl(可读写excel表)专门处理Excel2007及以上版本产生的xlsx文件&#xff1b;2007一下的版本为xls后缀的文件&#xff0c;需要使用 xlrd和xlwt库进行操作。虽然xlrd和xlwt也可以进行文件读写&…