css3
作者： 严孝孝
目录
-
1.css3新增选择器
-
2.圆角
-
3.阴影
-
4.自定义字体
-
5.背景图
-
6.box-sizing
-
7.border-image 边框图片
-
8.transform 2d
-
9.transform 3d
-
10.tansition 过渡
-
11.keyframe 关键帧动画
案例1: css实现傲游logo
案例2: 白云动画
案例3-3d立方体
课程内容
1.css3新增选择器
q. css3新增选择器有哪些？
:root 根元素
:not 反选
:first-child 第一个子元素
:last-child 最后
:nth-child 第n个子元素
:nth-last-child 从后选择第n个子元素
:empty 选择空元素
:target
::selection 选择被选择的文本
:only-child 如果是父元素的唯一子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
:root{
background-color: lightgray;
}
/* ：not */
.s2>:not(p) {
background-color: lightblue;
}
/* odd 奇数
even偶数
an+b语法 序号从0开始
*/
.s3>:nth-child(3n){
background-color: red;
}
.s4>:empty{
background-color: lightcyan;
height: 30px;
}
.s5 :target{
color: lightcoral;
}
.s6>::selection{
background-color: red;
}
.s7>p:only-child{
background-color: blue;
}
</style>
</head>
<body>
<div class="s2">
<div>div</div>
<p>pppp</p>
</div>
<hr >
<div class="s3">
<div>div</div>
<div>pppp</div>
<div>div</div>
<div>pppp</div>
<div>div</div>
<div>pppp</div>
</div>
<div class="s4">
<p>1</p>
<p>2</p>
<p>3</p>
<p></p>
</div>
<div class="s5">
<div>
<p><a href="#link1">link1</a></p>
<p><a href="#link2">link2</a></p>
</div>
<div>
<p id="link1">11111</p>
<p id="link2">22222</p>
</div>
</div>
<div class="s6">
<p>今天我要吃螃蟹，还要吃披萨</p>
</div>
<div class="s7">
<p>aaa</p>
<p>vvv</p>
</div>
</body>
</html>
2.圆角效果
q. 圆角效果怎么设置？
border-radius 给一个只， 同时设置4个角
border-radius设置4个角不同圆角大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.s1{
width: 200px;
height: 200px;
background-color: lightgray;
border-radius: 20px;
}
.s2{
width: 200px;
height: 200px;
background-color: lightgray;
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="s1"></div>
<hr>
<div class="s2"></div>
</body>
</html>
3.阴影
q. 如何设置阴影效果
设置文本阴影 text-shadow
设置元素阴影 box-shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.s1{
width: 200px;
height: 200px;
border: 3px solid red;
}
.s1:hover{
/*
属性1： 水平偏移
属性2： 垂直偏移
属性3： 模糊程度
属性4： 阴影颜色
*/
box-shadow: 4px 4px 4px red;
}
.s2:hover{
/*
属性1： 水平偏移
属性2： 垂直偏移
属性3： 模糊程度
属性4： 阴影颜色
*/
text-shadow: 2px 2px 1px red;
}
</style>
</head>
<body>
<div class="s1"></div>
<hr >
<div class="s2">
今晚回家打豆豆
</div>
</body>
</html>
4.自定义字体
q. 如何实现自定义字体？
需求： 网页字体一般都是由系统提供，宋体，微软雅黑，黑体
前提： 有一个ttf字体
使用 @font-face 定义自定义字体
使用 font-family 使用字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
/* 定义了一个名字为Strasua的字体， 对应文件 ttf为文件 */
@font-face{
font-family: "Strasua";
src: url("STRASUA/Strasua.ttf");
}
.s1{
font-family: "微软雅黑";
font-size: 32px;
}
</style>
</head>
<body>
<h2>自定义字体</h2>
<div class="s1">
你好
</div>
</body>
</html>
q. 需要注意什么
项目中： 自定义字体谨慎使用， 尤其是中文文字， 字体太大
5.背景图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.s1{
width: 100px;
height: 100px;
margin: 20px;
border: 10px solid rgba(100,100,100,0.2);
background-image: url("100x100.png");
background-repeat: no-repeat;
/* background-origin设置背景图的原点 */
background-origin: content-box;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="s1">
</div>
</body>
</html
q. 背景图对应的一些属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.s1{
width: 145px;
height: 145px;
border: 3em solid orange;
/* 81x81 */
border-image: url(9.png) 27 repeat;
/*
border-image-source: ; 路径
border-image-slice: ; 向内偏移
border-image-width: ; 宽度
border-image-outset: ; 边框图片区域超出边框的量
border-image-repeat: ; 重复
*/
}
</style>
</head>
<body>
<h2>边框图片</h2>
<div class="s1">
</div>
</body>
</html>
6.box-sizing
q. 属性有哪两个值
content-box 默认值
border-box
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#bdy{
width: 200px;
height: 200px;
background: blue;
/* box-sizing: content-box; /默认值*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="bdy">
</div>
</body>
</html>
7.border-image 边框图片
q. 如何设置边框图片？
border-image设置边框图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.s1{
width: 145px;
height: 145px;
border: 3em solid orange;
/* 81x81 */
border-image: url(9.png) 27 repeat;
/*
border-image-source: ; 路径
border-image-slice: ; 向内偏移
border-image-width: ; 宽度
border-image-outset: ; 边框图片区域超出边框的量
border-image-repeat: ; 重复
*/
}
</style>
</head>
<body>
<h2>边框图片</h2>
<div class="s1">
</div>
</body>
</html>
8.transform 2d
q. transform是什么？
transform意思是变换， 功能是对元素进行 ( tanslate)位移，( rotate)旋转，(scale)缩放，( skew)扭曲拉伸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.s1,.s2,.s3,.s4{
width: 150px;
height: 150px;
border: 1px solid red;
}
.s1{
/* 第一个属性是x轴偏移，第二个是y */
transform: translate(30px,30px);
}
.s2{
transform: rotate(45deg);
}
.s3{
transform: scale(2,0.5);
}
.s4{
transform: skew(30deg,30deg);
}
</style>
</head>
<body>
<div>
<div class="s1">
</div>
<hr>
<div class="s2">
</div>
<hr>
<div class="s3">
</div>
<hr>
<div class="s4">
</div>
</div>
</body>
</html>
9.transform 3d
q. 3d变化和2d 的区别
有有一些区别的， 坐标系问题
x 向右
y 向下
z 向前
q. 如何实现3d变换？
设置 transform-style:preserve-3d;
设置： perspective(500px)
利用transform的3d方法，例如rotatateX，rotateY，rotateZ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.s1{
width: 200px;
height: 200px;
border: 1px solid red;
margin: 50px;
transform: perspective(400px) rotateX(30deg) rotateY(30deg);
transform-style: preserve-3d;
}
.s1>.pic{
width: 200px;
height: 200px;
background: url(100x100.png);
transition: all 2s;
}
.s1>.pic:hover{
/* transform: translateZ(100px) rotateX(45deg) scaleY(2); */
width: 400px;
}
</style>
</head>
<body>
<div class="s1">
<div class="pic">
</div>
</div>
</body>
</html>
10.tansition 过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.s1{
width: 100px;
height: 100px;
border:1px solid red;
/*
第一个属性是参加过度的属性， all表示全部
第二个属性时间
第三个属性是速率
liner 线性
ease-in 先快后慢
ease-out 先慢后快
ease-in-out 慢快慢
*/
transition: width 2s linear;
}
.s1:hover{
width: 200px;
}
</style>
</head>
<body>
<div class="s1">
</div>
</body>
</html>
q. tansition过渡
作用： 一个立即完成的操作， 延长到一定时间内完成
11.keyframes 关键帧动画
q. keyframe作用，如何实现
keyframes 是关键帧动画
实现的通过 设置 @keyframes 定义关键帧动画，
使用通过 animation 使用关键帧动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.s1{
width: 100px;
height: 100px;
border: 1px solid red;
animation: mymove 2s infinite;
}
@keyframes mymove{
from{
width: 0;
}
25%{
width: 400px;
}
50%{
width: 200px;
height: 400px;
}
75%{
width: 200px;
height: 400px;
}
to{
width: 200px;
}
}
</style>
</head>
<body>
<div class="s1">
</div>
</body>
</html>
案例1: css实现傲游logo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.big-circle{
width: 240px;
height: 240px;
border-radius: 50%;
background-color: #B1E4FF;
border: 2px solid #789cb6;
position: relative;
box-shadow: 5px 5px 5px #ccc;
}
.small-circle{
width: 230px;
height: 230px;
border-radius: 50%;
background-color: #3899e3;
position: relative;
left: 5px;
top:5px;
}
.rect1{
width: 150px;
height: 100px;
background-color: white;
left: 40px;
top: 65px;
position: absolute;
border-radius: 5px 20px 5px 5px;
}
.rect2{
width: 35px;
height: 45px;
border:25px solid #3899e3;
background-color: white;
position: absolute;
left: 72px;
top: 95px;
}
</style>
</head>
<body>
<div class="big-circle">
<div class="small-circle">
<div class="rect1">
</div>
<div class="rect2">
</div>
</div>
</div>
</body>
</html>
案例2: 白云动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html,body{
margin: 0;
padding: 0;
}
.sky{
height: 600px;
background-color: #0077dd;
position: relative;
/* 云彩div设置3倍宽度 */
overflow: hidden;
}
.sky>div{
width: 300%;
height: 100%;
left: 0;
top:0;
position: absolute;
}
.cloud_one{
background: url(img/cloud_one.png);
animation: mymove 100s infinite;
}
.cloud_two{
background: url(img/cloud_two.png);
animation: mymove 150s infinite;
}
.cloud_three{
background: url(img/cloud_three.png);
animation: mymove 200s infinite;
}
@keyframes mymove{
from{
left: 0;
}
to{
left: -200%;
}
}
</style>
</head>
<body>
<div class="sky">
<div class="cloud_one"></div>
<div class="cloud_two"></div>
<div class="cloud_three"></div>
</div>
</body>
</html>
案例3-3d立方体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
background-color: pink;
}
.wrap{
width: 200px;
height: 200px;
margin: 150px auto;
position: relative;
}
.cube{
width: 200px;
height: 200px;
/* animation */
transform-style: preserve-3d;
transform: rotateX(30deg) rotateY(30deg);
animation: myrotate 5s linear infinite;
}
.cube>div{
position: absolute;
width: 200px;
height: 200px;
opacity: 1;
transition: all .2s;
}
.cube .pic{
width: 200px;
height: 200px;
}
.cube .front{
transform: rotateY(0deg) translateZ(100px) ;
}
.cube .back{
transform: rotateY(180deg) translateZ(100px);
}
.cube .left{
transform: rotateY(90deg) translateZ(100px);
}
.cube .right{
transform: rotateY(-90deg) translateZ(100px);
}
.cube .top{
transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom{
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes myrotate{
from{
transform: rotateX(0deg) rotateY(0) rotateZ(0);
}
to{
transform: rotateX(360deg) rotateY(-360deg) rotateZ(-360deg);
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<div class="front">
<img class="pic" src="img/1.jpg" >
</div>
<div class="back">
<img class="pic" src="img/2.jpg" >
</div>
<div class="left">
<img class="pic" src="img/3.jpg" >
</div>
<div class="right">
<img class="pic" src="img/4.jpg" >
</div>
<div class="top">
<img class="pic" src="img/5.jpg" >
</div>
<div class="bottom">
<img class="pic" src="img/6.jpg" >
</div>
</div>
</div>
</body>
</html>