-
web第四天（使用CSS变换效果、过度效果、动画）
笔记
- 背景样式
background:color/url（详细可以参考mdn，通按键f1访问） background-url：填写图⽚链接
background-color：填写图⽚颜⾊
background-repeat：控制图⽚的复制模式，可以横向纵向单独复制（repeat-x,repeat-y），也可以不使⽤
复制（no-repeat）。 background-position：可以设置图⽚的位置，多⽤于截取精灵图的图⽚
background-size：⽤来控制图⽚的⼤⼩ 精灵图：是由多个图⽚拼起来的⼤图，它存在的价值是降低服务器的并发性，避免不必要的开销。
background-attouchment：fixed：固定⽹⻚的背景图⽚- 定位问题
position：fixed浮动定位 他可以将标签固定在屏幕某个位置 不随⻚⾯滑动⽽产⽣位移。
position：absolute：绝对定位，他可以将标签固定在⽗容器中的指定位置。
position：relative：相对定位，当⼦标签是绝对定位时，⽗容器必须是相对定位。- 浮动float
最初float是⽤来做⽂字化绕图⽚功能的属性，之后⼴泛的应⽤于布局。 float:left|right
⽤来控制块标签向左向右挤压，注意右浮动的会使⼦标签按照从右向左的顺序罗列。
盒⼦模型的宽是内容部分的宽，整个盒⼦的宽应该是border-width+padding+width。⾼同理4.4 CSS的特殊样式
- @media查询
常⽤于响应式布局，是⽬前使⽤最多的适配⻚⾯的技术。他会根据⻚⾯的尺⼨的不同，⽽是⽤不同的样式。
<style> @media screen { /* 电脑端显示这个样式 */ p.test { font-family: verdana, sans-serif; font-size: 14px } } @media print { /* 打印机端显示这个样式 */ p.test { font-family: times, serif; font-size: 10px } } @media screen,print { /* 电脑端和打印机显示这个样式 */ p.test { font-weight: bold } } @media all { /* ⽤于所有多媒体类型设备 */ p.test { font-weight: bold } } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- @font-face
⼀、TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常⻅的字体，是⼀种RAW格式，因此他不为⽹站优化,⽀持
这种字体的浏览器有【
IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；⼆、OpenType(.otf)格式：
.otf字体被认为是⼀种原始的字体格式，其内置在TureType的基础上，所以也提供了更多
的功能,⽀持这种字体的浏览器有【
Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile
Safari4.2+】；三、Web Open Font Format(.wow )格式：
.wow 字体是Web字体中最佳格式，他是⼀个开放的TrueType/OpenType的压缩版本，同时
也⽀持元数据包的分离,⽀持这种字体的浏览器有
【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；四、Embedded Open Type(.eot)格式：
.eot字体是IE专⽤字体，可以从TrueType创建此格式字体,⽀持这种字体的浏览器有
【IE4+】；五、SVG(.svg)格式：
.svg字体是基于SVG字体渲染的⼀种格式,⽀持这种字体的浏览器有
【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在@font-face中我们⾄少需要.wow ,.eot两种格式字体，甚⾄还需要.svg等字体
达到更多种浏览版本的⽀持DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> @font-face { font-family:bigyoung; src: url(../font/BigYoung.TTF); } div{ font-family: bigyoung; } style> head> <body> <div>哈哈哈div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
CSS的变换效果
transform 2d转换
translate()进⾏平移效果，有2个参数对应x轴和y轴。DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .container{ border: 1px solid red; width: 200px; height: 200px; background-image: url("../pic/⾐服.jpg"); background-size: 200px 200px; transform: translateZ(0px); } style> head> <body> <div class="container">div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- scale()
⽤于缩放标签，当参数只有⼀个时，整体放⼤或缩⼩，当参数是两个时，可以分别调整x轴
和y轴的缩放倍数。
DOCTYPE html> <html> <head> <style> div { width: 100px; height: 75px; background-color: yellow; border: 1px solid black; } div#div2 { margin: 100px; transform: scale(2, 4); } div#div3 { margin: 100px; transform: scale(.5); } style> head> <body> <div>你好。这是⼀个 div 元素。div> <div id="div2">你好。这是⼀个 div 元素。div> <div id="div3">你好。这是⼀个 div 元素。div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- rotate()
⽤于旋转元素。rotateX() rotateY() rotateZ()分别染着xyz轴进⾏旋转。
DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> body{ perspective: 800px; } /* .container{ margin: auto; border: 1px solid red; width: 200px; height: 200px; background-image: url("../pic/⾐服.jpg"); background-size: 200px 200px; transform-style: preserve-3d; transform: rotateZ(0deg); } */ .container{ width: 200px; height: 200px; margin: 300px auto; position: relative; border: 1px solid rebeccapurple; transform-style: preserve-3d; transform: rotateX(30deg) rotateY(30deg); } .container > img{ width: 200px; height: 200px; position: absolute; } .container > img:nth-child(2){ left: -200px; transform: rotateY(90deg); transform-origin: right; } .container > img:nth-child(3){ right: -200px; transform-origin: left; transform: rotateY(-90deg); } .container > img:nth-child(4){ top: -200px; transform-origin: bottom; transform: rotateX(-90deg); } .container > img:nth-child(5){ bottom: -200px; transform-origin: top; transform: rotateX(90deg); } .container > img:last-child{ transform: translateZ(200px); } style> head> <body> <div class="container"> <img src="../pic/李⽩.jpg" alt=""> <img src="../pic/⾐服.jpg" alt=""> <img src="../pic/⻛景.jpg" alt=""> <img src="../pic/右键菜单.jpeg" alt=""> <img src="../pic/⾐服.webp" alt=""> <img src="../pic/123.webp" alt=""> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- skew()
有两个参数分别代表在x轴⽅向的扭曲程度，以及在y轴⽅向的扭曲程度。
DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .container{ width: 200px; height: 200px; background-color: black; background-size: cover; transform: skew(30deg,30deg); } style> head> <body> <div class="container">div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- matrix()他能使 缩放 旋转 扭曲等⽅法
transform：matrix（cosθ，-sinθ,sinθ,cosθ,0,0);代表旋转
transform：matrix（x,0,0,y,0,0)；控制缩放
transform 3d转换
Perspective：⽤来控制视距的属性，属性值是指距离屏幕的像素值。（例Perspective：
800px）。
transform-style：⽤来transform的显示效果，有平⾯模式（flat），3d模式（preserve-3d）。
transform-origin：⽤来控制旋转轴的位置。- 过渡效果
transition：默认是所有属性都进⾏过渡，参数列表property name | duration | delay。
transition⽀持部分属性过渡，例如你可以指定宽⾼属性拥有过渡效果，这时其他属性不再⽀持过渡。DOCTYPE html> <html> <head> <style> div { width: 100px; height: 75px; background-color: yellow; border: 1px solid black; transition: width height 2s; } div:hover{ display: none; } style> head> <body> <div>div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 动画效果
@keyframes⽤来设置动画效果，可以使⽤from和to定义开始动画和结束动画，也可以使⽤百分⽐控制真个
动画的节奏，如下代码所示。DOCTYPE html> <html> <head> <style> @keyframes myAnimation { 0% { width: 200px; height: 200px; background: red; } 50% { width: 300px; height: 300px; background: yellow; } 100% { width: 200px; height: 200px; background: red; } } .box1,.box2 ,.box3{ /* 要使⽤的动画 */ animation-name: myAnimation; /* 动画持续时⻓ */ animation-duration: 5s; /* 动画的速度曲线 线性过渡*/ animation-timing-function: linear; /* 动画循环次数 */ animation-iteration-count: infinite; /* 动画的运⾏状态 */ animation-play-state: running; /* 设置动画是否反向运动 */ animation-direction: reverse; } .box2 { /* 平滑过渡 */ animation-timing-function: ease; } .box3{ /* ⼜慢到快 */ animation-timing-function: ease-in; /* ease-out：⼜快到慢的过渡效果 */ /* ease-in-out ：慢->快->慢*/ /* cubic-bezier（） ⻉塞尔曲线*/ } div:hover { display: none; } style> head> <body> <div class="box1">div> <div class="box2">div> <div class="box3">div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- ⽴体相册代码
DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> body{ perspective: 800px; } @keyframes myAnimation { from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } .container > img{ width: 200px; height: 200px; position: absolute; } .container{ /* transform: rotate3d(1,1,1,45deg); */ position: relative; width: 200px; height: 200px; margin: 300px auto; border: 1px solid red; transform-style: preserve-3d; animation: myAnimation 10s infinite linear; } .container > img:first-child{ /* transform: translateZ(200px); */ } .container:hover > img:nth-child(2){ transform: translateX(-100px)rotateY(90deg); } .container > img:nth-child(2){ left: -200px; transform-origin: right; transform: rotateY(90deg); } .container:hover > img:nth-child(3){ transform:translateX(100px) rotateY(-90deg); } .container > img:nth-child(3){ right: -200px; transform-origin: left; transform: rotateY(-90deg); } .container:hover > img:nth-child(4){ transform: translateY(-100px) rotateX(-90deg); } .container > img:nth-child(4){ top:-200px; transform-origin: bottom; transform:rotateX(-90deg); } .container:hover > img:nth-child(5){ transform: translateY(100px) rotateX(90deg); } .container > img:nth-child(5){ bottom:-200px; transform-origin: top; transform:rotateX(90deg); } .container:hover > img:last-child{ transform: translateZ(300px); } .container:hover > img:first-child{ transform: translateZ(-100px); } .container > img:last-child{ transform: translateZ(200px); } style> head> <body> <div class="container"> <img src="../pic/李⽩.jpg" alt=""> <img src="../pic/⾐服.jpg" alt=""> <img src="../pic/⻛景.jpg" alt=""> <img src="../pic/⾐服.webp" alt=""> <img src="../pic/123.webp" alt=""> <img src="../pic/⻜机.png" alt=""> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
二、题目：使用变换效果及动画制作一个立体相册
代码1
DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>立体相册title> <style> body{ perspective: 800px; } @keyframes myAnimation { from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } .container > img{ width: 200px; height: 200px; position: absolute; } .container{ position: relative; width: 200px; height: 200px; margin: 300px auto; border: 1px solid red; transform-style: preserve-3d; animation: myAnimation 10s infinite linear; } .container > img:first-child { border:solid 1px black; } .container:hover > img:nth-child(2) { transform: translateX(-100px)rotateY(90deg); } .container > img:nth-child(2) { border:solid 1px black; left: -200px; transform-origin: right; transform: rotateY(90deg); } .container:hover > img:nth-child(3) { transform:translateX(100px) rotateY(-90deg); } .container > img:nth-child(3) { border:solid 1px black; right: -200px; transform-origin: left; transform: rotateY(-90deg); } .container:hover > img:nth-child(4) { transform: translateY(-100px) rotateX(-90deg); } .container > img:nth-child(4) { border:solid 1px black; top:-200px; transform-origin: bottom; transform:rotateX(-90deg); } .container:hover > img:nth-child(5) { transform: translateY(100px) rotateX(90deg); } .container > img:nth-child(5) { border:solid 1px black; bottom:-200px; transform-origin: top; transform:rotateX(90deg); } .container:hover > img:last-child { transform: translateZ(300px); } .container:hover > img:first-child { transform: translateZ(-100px); } .container > img:last-child { border:solid 1px black; transform: translateZ(200px); } style> head> <body> <div class="container"> <img src="C:img/2.jpg"> <img src="C:img/3.jpg"> <img src="C:img/4.jpg"> <img src="C:img/5.jpg"> <img src="C:img/6.jpg"> <img src="C:img/7.jpg"> div> body>
