文章目录
- 笔记&＃xff1a;CSS的特殊样式
- 作业&＃xff1a;用CSS的特殊样式制作立体相册
笔记&＃xff1a;CSS的特殊样式
&＃64;media查询
常⽤于响应式布局&＃xff0c;是⽬前使⽤最多的适配⻚⾯的技术。他会根据⻚⾯的尺⼨的不同&＃xff0c;⽽是⽤不同的样式。
<style>
&＃64;media screen {
p.test {
font-family: verdana, sans-serif;
font-size: 14px
}
}
&＃64;media print {
p.test {
font-family: times, serif;
font-size: 10px
}
}
&＃64;media screen,print {
p.test {
font-weight: bold
}
}
&＃64;media all {
p.test {
font-weight: bold
}
}
style>
&＃64;font-face
⼀、TureTpe(.ttf)格式&＃xff1a;
.ttf字体是Windows和Mac的最常⻅的字体&＃xff0c;是⼀种RAW格式&＃xff0c;因此他不为⽹站优化,⽀持
这种字体的浏览器有【
IE9&＃43;,Firefox3.5&＃43;,Chrome4&＃43;,Safari3&＃43;,Opera10&＃43;,iOS Mobile Safari4.2&＃43;】&＃xff1b;
⼆、OpenType(.otf)格式&＃xff1a;
.otf字体被认为是⼀种原始的字体格式&＃xff0c;其内置在TureType的基础上&＃xff0c;所以也提供了更多
的功能,⽀持这种字体的浏览器有【
Firefox3.5&＃43;,Chrome4.0&＃43;,Safari3.1&＃43;,Opera10.0&＃43;,iOS Mobile
Safari4.2&＃43;】
三、Web Open Font Format(.wow )格式&＃xff1a;
.wow 字体是Web字体中最佳格式&＃xff0c;他是⼀个开放的TrueType/OpenType的压缩版本&＃xff0c;同时
也⽀持元数据包的分离,⽀持这种字体的浏览器有
【
IE9&＃43;,Firefox3.5&＃43;,Chrome6&＃43;,Safari3.6&＃43;,Opera11.1&＃43;】&＃xff1b;
四、Embedded Open Type(.eot)格式&＃xff1a;
.eot字体是IE专⽤字体&＃xff0c;可以从TrueType创建此格式字体,⽀持这种字体的浏览器有
【
IE4&＃43;】&＃xff1b;
五、SVG(.svg)格式&＃xff1a;
.svg字体是基于SVG字体渲染的⼀种格式,⽀持这种字体的浏览器有
【Chrome4&＃43;,Safari3.1&＃43;,Opera10.0&＃43;,iOS Mobile Safari3.2&＃43;】。
这就意味着在&＃64;font-face中我们⾄少需要.wow ,.eot两种格式字体&＃xff0c;甚⾄还需要.svg等字体
达到更多种浏览版本的⽀持
DOCTYPE html>
<html lang&＃61;"zh">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>Documenttitle>
<style>
&＃64;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()进⾏平移效果&＃xff0c;有2个参数对应x轴和y轴
DOCTYPE html>
<html lang&＃61;"zh">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;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&＃61;"container">div>
body>
html>
scale()⽤于缩放标签&＃xff0c;当参数只有⼀个时&＃xff0c;整体放⼤或缩⼩&＃xff0c;当参数是两个时&＃xff0c;可以分别调整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&＃61;"div2">你好。这是⼀个 div 元素。div>
<div id&＃61;"div3">你好。这是⼀个 div 元素。div>
body>
html>
rotate()⽤于旋转元素。rotateX() rotateY() rotateZ()分别染着xyz轴进⾏旋转。
DOCTYPE html>
<html lang&＃61;"zh">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>Documenttitle>
<style>
body{
perspective: 800px;
}
.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&＃61;"container">
<img src&＃61;"../pic/李⽩.jpg" alt&＃61;"">
<img src&＃61;"../pic/⾐服.jpg" alt&＃61;"">
<img src&＃61;"../pic/⻛景.jpg" alt&＃61;"">
<img src&＃61;"../pic/右键菜单.jpeg" alt&＃61;"">
<img src&＃61;"../pic/⾐服.webp" alt&＃61;"">
<img src&＃61;"../pic/123.webp" alt&＃61;"">
div>
body>
html>
skew()有两个参数分别代表在x轴⽅向的扭曲程度&＃xff0c;以及在y轴⽅向的扭曲程度。
DOCTYPE html>
<html lang&＃61;"zh">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;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&＃61;"container">div>
body>
html>
matrix()他能使 缩放 旋转 扭曲等⽅法
transform&＃xff1a;matrix&＃xff08;cosθ&＃xff0c;-sinθ,sinθ,cosθ,0,0);代表旋转
transform&＃xff1a;matrix&＃xff08;x,0,0,y,0,0)&＃xff1b;控制缩放
transform 3d转换
Perspective&＃xff1a;⽤来控制视距的属性&＃xff0c;属性值是指距离屏幕的像素值。&＃xff08;例Perspective&＃xff1a;
800px&＃xff09;。
transform-style&＃xff1a;⽤来transform的显示效果&＃xff0c;有平⾯模式&＃xff08;flat&＃xff09;&＃xff0c;3d模式&＃xff08;preserve-3d&＃xff09;。
transform-origin&＃xff1a;⽤来控制旋转轴的位置。
过渡效果
transition&＃xff1a;默认是所有属性都进⾏过渡&＃xff0c;参数列表property name | duration | delay。
transition⽀持部分属性过渡&＃xff0c;例如你可以指定宽⾼属性拥有过渡效果&＃xff0c;这时其他属性不再⽀持过渡。
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>
动画效果
&＃64;keyframes⽤来设置动画效果&＃xff0c;可以使⽤from和to定义开始动画和结束动画&＃xff0c;也可以使⽤百分⽐控制真个动
画的节奏&＃xff0c;如下代码所示
DOCTYPE html>
<html>
<head>
<style>
&＃64;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;
}
div:hover {
display: none;
}
style>
head>
<body>
<div class&＃61;"box1">div>
<div class&＃61;"box2">div>
<div class&＃61;"box3">div>
body>
html>
作业&＃xff1a;用CSS的特殊样式制作立体相册
HTML代码&＃xff1a;
DOCTYPE html>
<html lang&＃61;"zh">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>立体相册title>
<link rel&＃61;"stylesheet" type&＃61;"text/css" href&＃61;"立体相册.css">
head>
<body>
<div class&＃61;"container">
<img src&＃61;"images/1.jpg" alt&＃61;"">
<img src&＃61;"images/2.jpg" alt&＃61;"">
<img src&＃61;"images/3.jpg" alt&＃61;"">
<img src&＃61;"images/4.jpg" alt&＃61;"">
<img src&＃61;"images/5.jpg" alt&＃61;"">
<img src&＃61;"images/6.jpg" alt&＃61;"">
div>
body>
html>
css代码&＃xff1a;
body{
perspective: 800px;
}
&＃64;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{
}
.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);
}
效果展示&＃xff1a;
盒子旋转
当鼠标移到盒子上面时&＃xff0c;盒子炸开并保持旋转
京公网安备 11010802041100号