demo1 css3实现tab样式
效果：
导航栏
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*.demo {
width: 100px;
height: 100px;*/
/*box-shadow: 10px 10px 5px orange;
text-shadow: 10px 1px 1px green;*/
/*圆*/
/*border-radius: 50% 50% 50% 50%;*/
/*border-top-right-radius: 50% 100%;
/*半圆*/
/*border-top-left-radius: 50% 100%;
background: red;*/
/*叶子*/
/*border-top-left-radius: 80% 100px;
border-bottom-right-radius: 80px 100px;
background: green;*/
/*box-shadow: 10px 10px 1px 1px #000 inset;*/
/*background: red;*/
/*color: rgba(0, 0, 0, 0.3);
text-shadow: 10px 10px 2px rgba(255, 0, 0, 0.2);
background: radial-gradient(ellipse 30px 50px at 50% 50%, #fff, yellow, #000, transparent);
}*/
/*.index {
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}*/
/*作业*/
* {
padding: 0;
margin: 0;
list-style: none;
}
.tip {
width: 600px;
height: 50px;
background: orange;
box-shadow: 1px 3px 3px 1px #000;
margin: 0 auto;
}
.tip .common {
float: left;
margin: 5px;
margin-bottom: 2px;
padding: 10px;
color: #fff;
border-color: rgb(255, 255, 255, 0.7);
border-style: none dotted none none;
text-shadow: 1px 1px 2px #000;
}
.tip .last {
border-style: none;
}
</style>
</head>
<body>
<!--<div class="demo">我很帅</div>
<div class="index"></div>-->
<ul class="tip">
<li class="common">Home</li>
<li class="common">About me</li>
<li class="common">Portfolio</li>
<li class="common">Blog</li>
<li class="common">Resources</li>
<li class="common last">Contact me</li>
</ul>
</body>
</html>
demo2 选项卡功能
效果：
页面一
页面二
页面三
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Css3</title>
<style>
/*li[class="first"] {
background: rgba(255, 0, 0, 0.5);
}*/
/*选项卡*/
* {
padding: 0;
margin: 0;
}
.wrapper {
position: relative;
margin: 0 auto;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 400px;
height: 400px;
}
.wrapper input {
height: 30px;
width: 30px;
}
.wrapper div {
position: absolute;
width: 400px;
height: 370px;
top: 30px;
left: 0;
line-height: 350px;
display: none;
}
.wrapper div:nth-of-type(1) {
background: red;
}
.wrapper div:nth-of-type(2) {
background: green;
}
.wrapper div:nth-of-type(3) {
background: blue;
}
input:checked+div {
display: block;
}
/* .wrapper {
position: relative;
margin: 0 auto;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 400px;
height: 400px;
overflow: hidden;
}
.wrapper a {
position: relative;
margin: 0 auto;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.7);
}
.wrapper #demo1 {
width: 400px;
height: 370px;
background: red;
display: block;
}
.wrapper #demo2 {
display: block;
width: 400px;
height: 370px;
background: green;
}
.wrapper #demo3 {
display: none;
width: 400px;
height: 370px;
background: blue;
}
div:target {
background: red;
}
span:target {
background: green;
}
p:target {
display: block;
background: blue;
} */
/* li:nth-child(2) {
background: red;
} */
</style>
</head>
<body>
<!-- <ul>
<span>span</span>
<li class="first">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul> -->
<!--选项卡-->
<div class="wrapper">
<input type="radio" name="team" value="1" checked="checked">
<div>1</div>
</input>
<input type="radio" name="team" value="2">
<div>2</div>
</input>
<input type="radio" name="team" value="3">
<div>3</div>
</input>
</div>
<!-- <div class="wrapper"> -->
<!-- <div class="btn">
<a href="#demo1"></a>
<a href="#demo2"></a>
<a href="#demo3"></a>
</div> -->
<!-- <div id="demo1">1</div>
<span id="demo2">2</span>
<p id="demo3">3</p> -->
<!-- </div> -->
</body>
</html>
demo3通过hover去切换页面
效果：
页面一
页面二
页面三
代码：
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>css-3</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
/*人物展示*/
.wrapper li{
width: 400px;
height: 100px;
}
.wrapper li span{
position: absolute;
display: block;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: green;
z-index: 1000;
}
.wrapper li div{
position: absolute;
left: 0;
top: 0;
height: 300px;
width: 200px;
opacity: 0;
transition:all 1000ms linear;
}
.wrapper li:nth-of-type(1) div{
background: url('1 六剑奴.jpg') no-repeat;
background-size: 100% 100%;
}
.wrapper li:nth-of-type(2) div{
background: url('4 白凤.jpg') no-repeat;
background-size: 100% 100%;
}
.wrapper li:nth-of-type(3) div{
background: url('1 雪女.jpg') no-repeat;
background-size: 100% 100%;
}
.wrapper li span:hover + div{
opacity: 1;
transform: translatex(200px) translatez(1px);
/* 开启cpu加速 */
}
div{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: deeppink;
animation: move 3s linear 1s infinite paused alternate both;
}
@keyframes move{
0%{
left: 0px;
}
100%{
left: 500px;
}
}
</style>
</head>
<body>
<!-- 人物展示 -->
<ul class="wrapper">
<li>
<span>六剑奴</span>
<div></div>
</li>
<li>
<span>白凤</span>
<div></div>
</li>
<li>
<span>雪女</span>
<div></div>
</li>
</ul>
</body>
</html>
demo4 点击实现网易云音乐播放器的碟片转动播放效果
效果：
播放状态
播放状态时：滑针收回，碟片顺时针转动
暂停状态
暂停状态时： 滑针搭在碟片上，碟片停止转动、
代码：
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>css-3</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
/* 网易云音乐碟片播放 */
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wrapper .turnTable{
width: 100px;
height: 100px;
border: 50px solid #333;
border-radius: 50%;
background: url('10 大少司命.jpg');
background-size: 100% 100%;
text-align: center;
line-height: 100px;
animation-name: turn;
animation-duration: 12s;
animation-timing-function: linear;
animation-play-state: paused;
animation-delay: 1s;
animation-iteration-count: infinite;
}
.wrapper .turnTable span{
color: #fff;
font-weight: 600px;
}
.wrapper .pin{
position: absolute;
top: -60px;
left: 50%;
transform: translatex(-50%);
width: 5px;
height: 100px;
background: #ccc;
transform-origin: top;
transform: rotatez(-45deg);
transition: all 1s linear;
}
.wrapper .pinTurn{
transform: rotatez(0deg);
}
@keyframes turn{
0%{
transform: rotatez(0deg);
}
100%{
transform: rotatez(360deg);
}
}
</style>
</head>
<body>
<!-- 网易云音乐碟片播放 -->
<button>play/paused</button>
<div class="wrapper">
<div class="turnTable">
<span>流浪</span>
</div>
<div class="pin"></div>
</div>
<script type="text/javascript">
// 网易云音乐碟片播放
var oTable = document.getElementsByClassName('turnTable')[0],
oPin = document.getElementsByClassName('pin')[0],
oBtn = document.getElementsByTagName('button')[0],
key = false,
timer;
oBtn.onclick = function(){
clearInterval(timer);
key = !key;
if(key){
oPin.className = 'pin pinTurn';
timer = setInterval(function(){
oTable.style.animationPlayState = 'paused';
},1000)
}else{
oTable.style.animationPlayState = 'running';
oPin.className = 'pin';
}
}
</script>
</body>
</html>
demo5 报纸的分栏效果
效果：
报纸分栏
代码：
<html lang="en">
<head>
<meta charset="utf-8">
<title>css3-4</title>
<style type="text/css">
div{
width: 500px;
height: 200px;
column=width: 200px;
column-count: 2;
column-nap: 10px;
column-rule-color: red;
column-rule-width: 5px;
column-rule-style: solid;
}
</style>
</head>
<body>
<div>看大宋国人【水平高 啊放假哦深加工发生的个数见佛的感觉送I就给送大概I介绍的看大宋国人【水平高 啊放假哦深加工发生的个数见佛的感觉送I就给送大概I介绍的看大宋国人【水平高 啊放假哦深加工发生的个数见佛的感觉送I就给送大概I介绍的看大宋国人【水平高 啊放假哦深加工发生的个数见佛的感觉送I就给送大概I介绍的看大宋国人【水平高 啊放假哦深加工发生的个数见佛的感觉送I就给送大概I介绍的看大宋国人【水平高 啊放假哦深加工发生的个数见佛的感觉送I就给送大概I介绍的看大宋国人【水平高 啊放假哦深加工发生的个数见佛的感觉送I就给送大概I介绍的看大宋国人【水平高
啊放假哦深加工发生的个数见佛的感觉送I就给送大概I介绍的</div>
</body>
</html>
position的四种属性
1. static（静态定位）：默认值，无法使用top,bottom,left,right以及z-index，这种定位使用margin来改变位置，并且不脱离文档流。
2.relative(相对定位）：生成相对于定位的元素，通过top,bottom,left,right来设置相对于其正常（原先本身）进行定位。这种定位不脱离文档流，可通过z-index进行层次分级。
3.absolute(绝对定位）：可以用top,right,bottom,left来控制位置这种定位脱离文档流，是相对于最近的非static定位元素来定位的，如果没有有定位的父级，它的参照为body。
4.fixed(固定定位）：相对于浏览器窗口定位，这种定位脱离文档流，元素通过left,top,right,bottom定位，也可通过z-index层次分级。
right只有脱离文档流的定位元素才能生效
