一、HTML
a超链接
<a href="目标地址">内容</a>
- href=“id名称box” 指向id为box的元素
<a href="#box">内容</a>
<div id="box">被a所指向的元素</div>
a默认带有下划线
a默认带有颜色
a默认鼠标样式为小手
》案例展示:
<!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>
div{
height:100px;
border:1px solid #000;
}
/* 元素:target{}表示被指向目标元素 */
div:target{
background-color:red;
}
</style>
</head>
<body>
<!-- a 超链接
href="目标元素的id名"
-->
<a href="#box1">a1</a>
<a href="#box2">a2</a>
<a href="#box3">a3</a>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</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>
.waikuang{
width:556px;
/*块水平方向居中*/
margin-left:auto;
margin-right:auto;
margin-top:10px;
}
.box{
margin-bottom:5px;
/* 在盒子内部的顶部产生一定的距离*/
padding-top:50px;
/* 相对定位 */
position:relative;
}
.box_hd{
width:556px;
height:50px;
background-color:#555555;
/* 字体的设置 */
font-size:14px;
text-indent:20px;
line-height:50px;
color:white;
/* 绝对定位 */
position:absolute;
top:0px;
left:0px;
}
.bg{
width:14px;
height:10px;
background-image: url("小箭头.png");
background-repeat: no-repeat;
/* 绝对定位 */
position:absolute;
top:20px;
right:19px;
/* 过渡 */
transition:0.5s;
}
.box_bd{
height:0px;
border:1px solid black;
background-color:#e4e4e4;
/* 1.隐藏bd内容 */
overflow: hidden;
transition:0.5s;
}
.text{
margin-top:20px;
margin-left:20px;
margin-right:30px;
color:black;
font-size:12px;
line-height:24px;
}
/* 2.被指向的那一个.box_bd高度变回原来的180px */
.box_bd:target{
height:180px;
}
.box_hd a{
color:white;
text-decoration: none;
/* 转化成块 */
display: block;
width:100%;
height:49px;
}
/* 3.先改变结构先后顺序,利用相邻选择器,选择当前展开的一个,后面紧着的.box_hd*/
.box_bd:target+.box_hd{
background-color:black;
}
/* 4.变成黑色的这一个.box-hd内部的.bg,旋转90deg */
.box_bd:target+.box_hd .bg{
transform: rotate(90deg);}
</style>
</head>
<body>
<div class="waikuang">
<!-- 第一个 -->
<div class="box">
<div class="box_bd" id="wenzi1">
<div class="text">
积分是新浪游戏对于用户的一种奖励。用户可以通过完善个人资料、登录签到、参加活动等方式获得积分,新浪游戏积分可以在游戏新浪游戏商城兑换游戏激活码,超值礼包以及实物奖品。
</div>
</div>
<div class="box_hd">
<a href="#wenzi1">什么是新浪积分商城</a>
<div class="bg"></div>
</div>
</div>
<!-- 第二个 -->
<div class="box">
<div class="box_bd" id="wenzi2">
<div class="text" >
积分是新浪游戏对于用户的一种奖励。用户可以通过完善个人资料、登录签到、参加活动等方式获得积分,新浪游戏积分可以在游戏新浪游戏商城兑换游戏激活码,超值礼包以及实物奖品。
</div>
</div>
<div class="box_hd">
<a href="#wenzi2">什么是新浪积分商城</a>
<div class="bg"></div>
</div>
</div>
<!-- 第三个 -->
<div class="box">
<div class="box_bd" id="wenzi3">
<div class="text" >
积分是新浪游戏对于用户的一种奖励。用户可以通过完善个人资料、登录签到、参加活动等方式获得积分,新浪游戏积分可以在游戏新浪游戏商城兑换游戏激活码,超值礼包以及实物奖品。
</div>
</div>
<div class="box_hd">
<a hre="#wenzi3">什么是新浪积分商城</a>
<div class="bg"></div>
</div>
</div>
</div>
</body>
</html>
二、css
1、目标元素
元素:target
div:target{} 被指向的那一个div
2、元素内容与边界之间的距离
padding-top内部顶部的距离
3、清除a的默认下划线
a{text-decoration:none;}
4、平移(沿x轴,水平方向平移)
transform:translate(长度值px)
- 正值 向右
- 负值 向左
(沿z轴平移)
transform:translateZ(长度值)
- 正值 向前 越近
- 负值 向后 越远
5、嵌套子元素以3d空间呈现
transfrom-style:preserve-3d
- 加给父盒子
6、动画播放的状态
animation-play-state:paused 暂停
》案例展示(图片的平移):
<!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>
.waikuang{
height:200px;
width:600px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
border:10px solid black;
overflow: hidden;
}
.tupiankuang{
width:2000px;
animation:move 10s infinite linear;
}
.imgbox{
width:200px;
height:200px;
float:left;
}
img{
width:200px;
height:200px;
}
@keyframes move {
0%{transform:translate(0px);}
100%{transform:translate(-1400px);}
}
.waikuang:hover .tupiankuang{
/*动画播放状态:暂停*/
animation-play-state:paused;
}
</style>
</head>
<body>
<div class="waikuang">
<div class="tupiankuang">
<div class="imgbox">
<img src="pic01.jpg" alt="">
</div>
<div class="imgbox">
<img src="pic02.jpg" alt="">
</div>
<div class="imgbox">
<img src="pic03.jpg" alt="">
</div>
<div class="imgbox">
<img src="pic04.jpg" alt="">
</div>
<div class="imgbox">
<img src="pic05.jpg" alt="">
</div>
<div class="imgbox">
<img src="pic06.jpg" alt="">
</div>
<div class="imgbox">
<img src="pic07.jpg" alt="">
</div>
<div class="imgbox">
<img src="pic08.jpg" alt="">
</div>
<div class="imgbox">
<img src="pic09.jpg" alt="">
</div>
<div class="imgbox">
<img src="pic10.jpg" alt="">
</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>Document</title>
<style>
.box{
width:750px;
height:700px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
border:1px solid black;
}
.shaizi{
width:200px;
height:200px;
margin-left:auto;
margin-right:auto;
margin-top:250px;
position:relative;
/* 调用动画 */
animation:mv 2s infinite;
/* 使嵌套子元素以3d空间呈现 */
transform-style: preserve-3d;
}
.shaizi div{
width:200px;
height: 200px;
position:absolute;
top:0px;
left:0px;
background-color:black;
}
.shaizi div:nth-child(1){
/* 沿着z轴平移*/
transform: translateZ(100px);
background-image: url("bg_01.png");
background-repeat: no-repeat;
}
.shaizi div:nth-child(2){
/* 首先沿着x旋转90度,之后再沿着z轴平移 */
transform: rotatex(90deg) translateZ(100px);
background-image: url("bg_02.png");
background-repeat: no-repeat;
}
.shaizi div:nth-child(3){
/* 首先沿着y旋转90度,之后再沿着z轴平移 */
transform: rotatey(90deg) translateZ(100px);
background-image: url("bg_03.png");
background-repeat: no-repeat;
}
.shaizi div:nth-child(4){
/* 首先沿着x旋转90度,之后再沿着z轴平移 */
transform: rotatex(90deg) translateZ(-100px);
background-image: url("bg_04.png");
background-repeat: no-repeat;
}
.shaizi div:nth-child(5){
/* 首先沿着y旋转90度,之后再沿着z轴平移 */
transform: rotatey(90deg) translateZ(-100px);
background-image: url("bg_05.png");
background-repeat: no-repeat;
}
.shaizi div:nth-child(6){
transform: translateZ(-100px);
background-image: url("bg_06.png");
background-repeat: no-repeat;
}
@keyframes mv{
0%{
transform:rotateX(0deg) rotateY(0deg);
}
100%{
transform:rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="shaizi">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>