demo1 css3實(shí)現(xiàn)tab樣式
效果：
導(dǎo)航欄
代碼：
<!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;
}*/
/*作業(yè)*/
* {
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 選項(xiàng)卡功能
效果：
頁(yè)面一
頁(yè)面二
頁(yè)面三
代碼：
<!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);
}*/
/*選項(xiàng)卡*/
* {
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> -->
<!--選項(xiàng)卡-->
<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去切換頁(yè)面
效果：
頁(yè)面一
頁(yè)面二
頁(yè)面三
代碼：
<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 點(diǎn)擊實(shí)現(xiàn)網(wǎng)易云音樂播放器的碟片轉(zhuǎn)動(dòng)播放效果
效果：
播放狀態(tài)
播放狀態(tài)時(shí)：滑針收回，碟片順時(shí)針轉(zhuǎn)動(dòng)
暫停狀態(tài)
暫停狀態(tài)時(shí)： 滑針搭在碟片上，碟片停止轉(zhuǎn)動(dòng)、
代碼：
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>css-3</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
/* 網(wǎng)易云音樂碟片播放 */
.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>
<!-- 網(wǎng)易云音樂碟片播放 -->
<button>play/paused</button>
<div class="wrapper">
<div class="turnTable">
<span>流浪</span>
</div>
<div class="pin"></div>
</div>
<script type="text/javascript">
// 網(wǎng)易云音樂碟片播放
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 報(bào)紙的分欄效果
效果：
報(bào)紙分欄
代碼：
<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>看大宋國(guó)人【水平高 啊放假哦深加工發(fā)生的個(gè)數(shù)見佛的感覺送I就給送大概I介紹的看大宋國(guó)人【水平高 啊放假哦深加工發(fā)生的個(gè)數(shù)見佛的感覺送I就給送大概I介紹的看大宋國(guó)人【水平高 啊放假哦深加工發(fā)生的個(gè)數(shù)見佛的感覺送I就給送大概I介紹的看大宋國(guó)人【水平高 啊放假哦深加工發(fā)生的個(gè)數(shù)見佛的感覺送I就給送大概I介紹的看大宋國(guó)人【水平高 啊放假哦深加工發(fā)生的個(gè)數(shù)見佛的感覺送I就給送大概I介紹的看大宋國(guó)人【水平高 啊放假哦深加工發(fā)生的個(gè)數(shù)見佛的感覺送I就給送大概I介紹的看大宋國(guó)人【水平高 啊放假哦深加工發(fā)生的個(gè)數(shù)見佛的感覺送I就給送大概I介紹的看大宋國(guó)人【水平高
啊放假哦深加工發(fā)生的個(gè)數(shù)見佛的感覺送I就給送大概I介紹的</div>
</body>
</html>
position的四種屬性
1. static（靜態(tài)定位）：默認(rèn)值，無法使用top,bottom,left,right以及z-index，這種定位使用margin來改變位置，并且不脫離文檔流。
2.relative(相對(duì)定位）：生成相對(duì)于定位的元素，通過top,bottom,left,right來設(shè)置相對(duì)于其正常（原先本身）進(jìn)行定位。這種定位不脫離文檔流，可通過z-index進(jìn)行層次分級(jí)。
3.absolute(絕對(duì)定位）：可以用top,right,bottom,left來控制位置這種定位脫離文檔流，是相對(duì)于最近的非static定位元素來定位的，如果沒有有定位的父級(jí)，它的參照為body。
4.fixed(固定定位）：相對(duì)于瀏覽器窗口定位，這種定位脫離文檔流，元素通過left,top,right,bottom定位，也可通過z-index層次分級(jí)。
right只有脫離文檔流的定位元素才能生效
