移动端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>

q. 背景图对应的一些属性


<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

<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设置边框图片

<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)扭曲拉伸

<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

<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 过渡


<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 使用关键帧动画

<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


<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: 白云动画


<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立方体


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

你可能感兴趣的:(移动端css3)