web第四天（使用CSS变换效果、过度效果、动画）

文章目录

笔记
4.4 CSS的特殊样式
二、题目：使用变换效果及动画制作一个立体相册
- 代码1
三、截图

笔记

背景样式

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>

@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>Document</title><style>@font-face {font-family:bigyoung;src: url(../font/BigYoung.TTF);}div{font-family: bigyoung;}</style></head><body><div>哈哈哈</div></body>
</html>

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>Document</title><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>

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>

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>Document</title><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>

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>Document</title><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>

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>

动画效果

@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>

⽴体相册代码

<!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>Document</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{/* 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


<!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>
</html

三、截图