移动端css3
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 如果是父元素的唯一子元素
<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>divdiv>
<p>ppppp>
div>
<hr >
<div class="s3">
<div>divdiv>
<div>ppppdiv>
<div>divdiv>
<div>ppppdiv>
<div>divdiv>
<div>ppppdiv>
div>
<div class="s4">
<p>1p>
<p>2p>
<p>3p>
<p>p>
div>
<div class="s5">
<div>
<p><a href="#link1">link1a>p>
<p><a href="#link2">link2a>p>
div>
<div>
<p id="link1">11111p>
<p id="link2">22222p>
div>
div>
<div class="s6">
<p>今天我要吃螃蟹，还要吃披萨p>
div>
<div class="s7">
<p>aaap>
<p>vvvp>
div>
body>
html>
2.圆角效果
q. 圆角效果怎么设置？
border-radius 给一个只， 同时设置4个角
border-radius设置4个角不同圆角大小
<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
<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 使用字体
<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.背景图
<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>