渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变</title>
<style>
.box1{
width: 300px;
height:300px;
/*
线性渐变（linear-gradient）：给元素设置渐变颜色，可指定多个颜色
注：线性渐变是图片
如：background-image: linear-gradient(to right, red, yellow);
to right/left/bottom/top 控制渐变颜色的方向
background-image: linear-gradient(45deg, red, yellow);
** deg 控制渐变颜色的方向 度数
turn 表示圈
background-image: linear-gradient(45deg, red, yellow);
*/
/*
渐变指定多个颜色时，默认平均分配，也可以手动指定渐变的分布
如： background-image：linear-gradient（red 50px,yellow 150px）
background-image: repeating-linear-gradient(yellow,red); 线性渐变平铺
*/
background-image: repeating-linear-gradient(yellow 50px,red 100px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格table</title>
</head>
<body >
<!--
table 创建表格，tr创建行，td设置列
td 后跟 rowspan/colspan 纵向/横向合并单元格
-->
<table border="">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<!--
thead 头部
tbody 主体
tfoot 底部
-->
<table>
<thead>
<tr>日期</tr>
<tr>时间</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
</body>
</html>
表格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格样式</title>
<style>
table{
width:30%;
border: 1px solid black;
margin: 10px auto;
/* border-spacing: 5px; 设置边框之间的距离 */
/* border-spacing: 0px; */
/* border-collapse: collapse; 设置边框合并，*/
border-collapse: collapse;
}
/*
使用td 设置边框，可以显示横向和纵向边框
使用tr 设置边框，只会显示横向边框
*/
td{
border: 1px dashed black;
/* 文字在表格中默认垂直居中，使用text/vertical-align: center可设置水平或纵向位置设置; */
height: 15px;
text-align: center;
}
/* 给tr/td 设置横向/纵向颜色设置时，可以集合伪元素，nth-child 实现选择行列设置*/
tr:nth-child(2n){
color: rgb(175, 112, 88);
}
</style>
</head>
<body>
<table>
<tr>
<td>序号</td>
<td>姓名</td>
<td>职业</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>刺客</td>
</tr>
<td>2</td>
<td>猪八戒</td>
<td>坦克</td>
</tr>
</table>
</body>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<!--
表单：将数据提交到服务器
action 表单要提交到的服务器的地址
-->
<form action="target.html">
<!-- 注：数据要成功提交到服务器中，必须要为元素指定name值-->
文本框：<input type="text" name="usename">
<br><br>
密码框：<input type="password" name="password">
<br><br>
<!--
单选按钮：
- 单选按钮需指定value 值，value属性最终会成为用户填写值
- 单选按钮中的name值必须相同，分为一组
- checked 可以将按钮设置为默认选中
-->
单选按钮<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br><br>
多选按钮：<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2" checked>
<input type="checkbox" name="test" value="3">
<br><br>
<select name="不知道" id="">
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
<br><br><br>
<input type="submit" value="注册">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="target.html">
<!--
autocapitalize="off" 关闭自动补全
readonly 将表单设置为只读，数据会提交
disabled 将表单设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点，即显示在该处
-->
<input type="text" name="usename" readonly>
<br><br>
<input type="text" name="useman" autofocus>
<br><br>
<input type="text" name="b" disable autocapitalize="off">
<br><br>
<br><br>
<input type="submit" >
<input type="reset">
<input type="button" value="普通按钮">
<br><br>
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
</body>
过渡效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡</title>
<link rel="stylesheet" href="../02CSS/reset.css">
<style>
.box1{
width: 500px;
height: 500px;
background-color: coral;
}
.box2{
width: 100px;
height: 100px;
background-color: cyan;
/*
过渡（transition）：为元素添加过渡效果
transition-property：指定要执行过渡的属性
- 可以添加多个属性，多个属性值隔开
- 多个属性都需要过渡，可以使用all
transition-duration：指定过渡效果的持续时间
transition-timing-function：过渡的时间函数，指定过渡的执行方式
- ease 默认值，慢速开始，先加速，在减速
- linear 匀速运动
- ease-in 加速运动
- ease-out 减速运动
- ease-in-out 先加速后减速
- cubic-bezier() 指定函数变化
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
- steps(3,end) 分布执行过渡效果，括号内第一个值为分几步，第二个值为设置开始/结束过渡执行
- end 在时间结束后开始执行过渡 注：也就是将每一步数的时间走完之后开始过渡
- start 在时间开始前执行过渡
transition-delay 设置过渡效果的延迟
*/
transition:all 2s;
/* transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
*/
transition-timing-function: steps(4,end);
transition-delay: 2s;
}
.box3{
width: 100px;
height: 100px;
background-color: ghostwhite;
margin-top: 100px;
transition: all 2s;
}
/* 设置box1的移入状态
.box1:hover .box2{
width: 150px;
height: 150px;
background-color: darkkhaki;
}
*/
.box1:hover div{
margin-left: 400px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡效果</title>
<link rel="stylesheet" href="../02CSS/reset.css">
<style>
.box1{
width: 341px;
height: 341px;
margin: 25px auto;
background-image: url(./08走路图片/staff_1024.jpg);
animation: run 1s steps(3) infinite;
}
@keyframes run {
from{
background-position: 0 0;
}
to{
background-position: -1024px 0;
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变形</title>
<style>
.box1{
width: 150px;
height: 150px;
background-color: coral;
margin: 0 auto;
margin-top: 50px;
}
/*
变形：通过css改变元素的形状，位置，但不影响页面布局
- 注：变形不影响页面布局
transform: 设置元素的变形效果
- translateX/translateY/translateZ 向x/y/z平移
例：transform：translateX(50%) 相对于自身宽度的50%移动
*/
.box2{
height: 150px;
width: 150px;
background-color: cyan;
margin: 0 auto;
transform: translateX(75px);
}
/*
设置其水平居中
方法一：设置绝对定位，并且把四边的值都设置为0，后设置margin值auto
.box3{
height: 100px;
width: 100px;
background-color: darkgrey;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
*/
/*
设置水平居中
方法二：设置绝对定位之后，将其设置为页面的距离左边一半的宽度后，
将其反向平移自身宽度的50%
*/
.box3{
background-color: darkgrey;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.box4{
height: 100px;
width: 100px;
border-radius: 50%;
background-color: darkgrey;
transition: all 0.3s;
}
.box4:hover{
transform: translateY(-3px);
box-shadow:0 0 5px rgba(0, 0, 255, 0.6);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">如果这就是爱情我会知道</div><br>
<div class="box4"></div>
</body>
</html>
z轴平移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
perspective: 1000px;
}
/*
注：设置z轴平移会影响页面到人眼的距离
所以必须设置perspective视距才能看出效果
*/
.box1{
height: 100px;
width: 100px;
border-radius: 50%;
margin: 300px 600px ;
background-color: salmon;
transition: 2s;
}
.box1:hover{
transform: translateZ(300px);
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
旋转效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
perspective: 1000px;
}
body{
background-color: rgb(195, 204, 214);
}
.box1{
height: 100px;
width: 100px;
margin: 300px 600px ;
background-color: salmon;
transition: 2s;
}
/*
旋转(rotate):设置元素的旋转效果
rotateX/Y/Z 设置沿X/Y/Z 轴旋转
例：transform:rotateX(0.25turn) 沿着x轴旋转0.25圈
*/
.box1:hover{
transform:rotateX(90deg) translateY(100PX) rotateZ(180deg) translateZ(50px) rotateY(180deg)
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
时钟练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟</title>
<style>
.clock-wrapper{
width: 200px;
height: 200px;
background-color: snow;
border: 6px solid teal;
border-radius: 50%;
margin: 100px auto;
position: relative;
background-image: url(./08走路图片/staff_1024.jpg);
background-size: cover;
}
.clock-wrapper > div{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.hour-wrapper{
height:70%;
width: 70%;
margin: 0 auto;
}
.hour{
height: 50%;
width: 4px;
background-color:rgb(110, 103, 77);
margin: 0 auto;
animation: run 43200s linear ;
}
.min-wrapper{
height:80%;
width: 80%;
margin: 0 auto;
animation: run 3600s steps(60) infinite;
}
.min{
height: 50%;
width: 3px;
background-color:rgb(173, 112, 131);
margin: 0 auto;
}
.sec-wrapper{
height:90%;
width: 90%;
margin: 0 auto;
animation: run 60s steps(60) infinite;
}
.sec{
height: 50%;
width: 2px;
background-color:rgb(134, 91, 77);
margin: 0 auto;
}
@keyframes run {
from{
transform: rotateZ(0);
}
to{
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="clock-wrapper">
<div class="hour-wrapper">
<div class="hour"></div>
</div>
<div class="min-wrapper">
<div class="min"></div>
</div>
<div class="sec-wrapper">
<div class="sec"></div>
</div>
</div>
</body>
</html>
立体旋转效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立体</title>
<link rel="stylesheet" href="../02CSS/reset.css">
<style>
html{
perspective: 1000px; /* 设置视距*/
}
/* 创建外部容器宽高，以及背景图片*/
.outer{
height: 558px;
width: 270px;
background-size: cover;
margin: 400px auto;
transform-style: preserve-3d; /* 设置显示立体旋转效果*/
position: relative; /* 设置其相对定位*/
animation: rotate 30s linear infinite;
}
.box3 ,.box4 ,.box5 ,.box6{
height: 558px;
width: 270px;
opacity: 0.7; /* 设置其透明效果*/
position: absolute;
}
.box1, .box2{
height: 270px;
width: 270px;
opacity: 0.7;
position: absolute;
overflow: hidden;
}
.box1{
transform: rotateX(90deg) translateZ(135px);
}
.box2{
transform: rotateX(-90deg) translateZ(423px);
}
.box3{
transform: rotateY(90deg) translateZ(135px);
}
.box4{
transform: rotateY(-90deg) translateZ(135px);
}
.box5{
transform:translateZ(-135px);
}
.box6{
transform: translateZ(135px);
}
@keyframes rotate {
from{
transform: rotateX(0) rotateY(0) ;
}
to{
transform: rotateX(1turn) rotateY(1turn) ;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="box1">
<img src="../exercise/11立体效果图片/01.jpg" alt="">
</div>
<div class="box2">
<img src="../exercise/11立体效果图片/02.jpg" alt="">
</div>
<div class="box3">
<img src="../exercise/11立体效果图片/03.jpg" alt="">
</div>
<div class="box4">
<img src="../exercise/11立体效果图片/04.jpg" alt="">
</div>
<div class="box5">
<img src="../exercise/11立体效果图片/05.jpg" alt="">
</div>
<div class="box6">
<img src="../exercise/11立体效果图片/06.jpg" alt="">
</div>
</div>
</body>
</html>
缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缩放</title>
<style>
.box1{
height:580px ;
width: 270px;
border: darksalmon 1px solid;
margin: 100px auto;
background-image: url(../exercise/11立体效果图片/06.jpg);
background-size: 270px;
transition: 1s;
}
/*
缩放：用来给图片设置缩放效果
transform: scaleX
- scaleX() x轴缩放
- scaleY() y轴缩放
- scale() 两个轴一起缩放
*/
/* transform-origin：变形的原点*/
.box1:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
扫一扫
1238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
