Index.html：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="Css3.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
function radio_change(){
var radio1=document.getElementById("radio1");
var radio2=document.getElementById("radio2");
var text=document.getElementById("text");
if(radio1.checked){text.disabled="";}
else{text.value="";text.disabled="disabled";}
}
</script>
<div id="mydiv1">示例文本1</div>
<div id="div2">示例文本2</div>
<div id="div3">示例文本3</div>
<div id="div4">示例文本4</div>
<div id="my5">示例文本5</div>
<p>这是我们的段落第一行</p><p>这是我们的段落第二行</p><p>这是我们的段落第三行</p><br><br>
<li>段落1</li><li>段落2</li><li>段落3</li><li>段落4</li><li>段落1</li><li>段落2</li><li>段落3</li><li>段落4</li>
<li>段落1</li><li>段落2</li><li>段落3</li><li>段落4</li><br><br>
<table border="1">
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>表格1</td>
<td></td>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td></td>
<td>表格2</td>
</tr>
<tr>
<td></td>
<td>表格2</td>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
</table><br><br>
<input type="radio" id="radio1" name="radio" οnchange="radio_change()">可用
<input type="radio" id="radio2" name="radio" οnchange="radio_change()">不可用
<input type="text" id="text" disabled>
<input type="checkbox">***1<input type="checkbox">***2<input type="checkbox">***3<input type="checkbox">***4
<br><br><br>
<div class="box1">
<div class="div1">div元素</div>
<div class="div1">div元素</div>
<div class="div11">div元素</div>
<div class="div11">div元素</div>
<span class="span1">span元素</span>
<span class="span1">span元素</span>
<div class="div2">div元素</div>
<div class="div2">div元素</div>
<span class="span2">span元素</span>
<span class="span2">span元素</span>
<br>边框上
<table class="table1">
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
</table>边框下<br>
<table class="table2">边框上
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
</table>边框下<br>
<div class="lll">
<div>hahahahhahahahahahahaha</div>
<div>hahahahhahahahahahahaha</div>
<div>hahahahhahahahahahahaha</div>
<div>hahahahhahahahahahahaha</div>
</div>
</div>
<br><br><br>
<div class="sb">装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测
试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容
的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装
不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐
藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下
装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测
装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的
隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试装不下内容的隐藏测试试装不下内容的隐藏测试</div>
<br><br><br>
<div class="background">
<div class="s1">与背景相关的新增属性</div>
<div class="s3">与背景相关的新增属性</div>
<div class="s2">与背景相关的新增属性</div>
</div>
<div class="backimg">图片双重背景格式设置</div>
<div class="bianhuan">
<div class="change1">鼠标经过时的酷炫效果</div>
<div class="change2">鼠标经过时的酷炫效果</div>
<div class="change3">鼠标经过时的酷炫效果</div>
<div class="donghua">动画变化</div>
</div>
<br><br><br><br>
<div class="loading">
<div class="loader">
<div class="loading-1">
<i></i>
</div>
</div>
<div class="loader">
<div class="loading-2">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loading-3">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loading-4">
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loading-5">
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loading-6">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
<header class="nav">
<div class="item">
<a href="#">
<p>首页</p>
<p>Home</p>
</a>
</div>
<div class="item">
<a href="#">
<p>问答</p>
<p>Q &A</p>
</a>
</div>
<div class="item">
<a href="#">
<p>比赛</p>
<p>Contest</p>
</a>
</div>
<div class="item">
<a href="#">
<p>题库</p>
<p>Item</p>
</a>
</div>
<div class="item">
<a href="#">
<p>关于我们</p>
<p>About us</p>
</a>
</div>
</header>
<div class="content">
<script type="text/javascript">
<!--用来绑定鼠标单击时菜单放下与收起-->
$(function () {
$('.select > p').on('click', function () {
$('.select').toggleClass('open');
e.stopPropagation();
});
$('.select ul li').on('click',function () {
var _this = $(this);
$('.select > p').text(_this.attr('data-value'));
_this.addClass('selected').siblings().removeClass('selected');
$('.select').removeClass('open');
e.stopPropagation();
});
$(document).on('click',function(){
$('select').removeClass('open');
})
});
</script>
<div class="select open">
<p>所有选项</p>
<ul>
<li data-value="所有选项" class="selected" >所有选项</li>
<li data-value="html" >html</li>
<li data-value="css" >css</li>
<li data-value="javascript" >javascript</li>
<li data-value="jQuery" >jQuery</li>
</ul>
</div>
</div>
<div class="ccontent">
<script type="text/javascript">
<!--用来绑定鼠标单击时菜单放下与收起-->
$(function () {
$('.select > p').on('click', function () {
$('.select').toggleClass('open');
e.stopPropagation();
});
$('.select ul li').on('click',function () {
var _this = $(this);
$('.select > p').text(_this.attr('data-value'));
_this.addClass('selected').siblings().removeClass('selected');
$('.select').removeClass('open');
e.stopPropagation();
});
$(document).on('click',function(){
$('select').removeClass('open');
})
});
</script>
<div class="select">
<p>所有选项</p>
<i></i>
<ul>
<li data-value="所有选项" class="selected" >所有选项</li>
<li data-value="html" >html</li>
<li data-value="css" >css</li>
<li data-value="javascript" >javascript</li>
<li data-value="jQuery" >jQuery</li>
</ul>
</div>
</div>
<div class="checkbox2">
<input type="checkbox" name="checkbox-2" checked="checked" id="checkbox-2-1" />
<label for="checkbox-2-1"></label>
<input type="checkbox" name="checkbox-2" checked="checked" id="checkbox-2-2" />
<label for="checkbox-2-2"></label>
<input type="checkbox" name="checkbox-2" checked="checked" id="checkbox-2-3" />
<label for="checkbox-2-3"></label>
</div>
</body>
</html>Css3.css：
/*************************************************/
[id*=div]/*id中包含div*/
{
color: aquamarine;
}
[id^=div]{/*首字符是div的才适用*/
color: darkblue;
}
[id$=div]{/*结束字符*/
color: chocolate;
}
/*************************************************/
p{font-size:40px;font-weight:bold;font-family:宋体text-shadow;text-shadow:5px 5px 5px red; }
/*text-shadow:length(阴影离开文字的横向距离)length(阴影离开文字的纵向距离)length(模糊程度)color(背景模糊颜色)*/
p:first-line{color: chartreuse}
p:first-letter{color: darkgreen}
li:before{content: "***"}
li:after{content: "对列表做一个解释";color: darkgray;font-size: 10px}
/*************************************************/
:root{background-color: gray}/*对整体有效果*/
body{background-color: darkgray}/*适用于界面*/
body *:not(p){font-size:15px}/*表示除了p之外都用这个样式*/
:empty{background-color: white}
/*************************************************/
/*对子元素的第一个和最后一个起作用*/
/*连同父类本身和父类的兄弟一起计算在内*/
tr:first-child{background-color: skyblue}
tr:last-child{background-color: plum}
tr:nth-child(3){/*从上向下数的第3个子元素*/;}
tr:nth-last-child(3){/*从下向上数的第3个子元素*/;}
tr:nth-last-child(odd){/*从下向上数的奇数子元素们*/;}
tr:nth-child(even){/*从上向下数的偶数子元素们*/;}
tr:nth-of-type(odd){background-color: darkcyan}
li:nth-child(4n+1){background-color: darksalmon}
li:nth-child(4n+2){background-color: wheat}
li:nth-child(4n+3){background-color:mistyrose}
li:nth-child(4n+4){background-color: yellowgreen}
li:only-child{针对于只有一个子元素的元素，相当于nth-child(1)}
/*************************************************/
input[type="text"]:hover{background-color: steelblue}
input[type="text"]:active{background-color: goldenrod}
input[type="text"]:focus{background-color: darkorchid}
input[type="checkbox"]:checked{outline: 2px solid gold}
input[type="text"]:enabled{background-color: white}
input[type="text"]:disabled{background-color: gray}
/*************************************************/
/*通用兄弟选择器*/
div ~ p{background-color: darkcyan}
/*************************************************/
/*text-shadow:length(阴影离开文字的横向距离)length(阴影离开文字的纵向距离)length(模糊程度)color(背景模糊颜色)*/
p{
text-shadow:5px 5px 5px red;
}
/*************************************************/
/*引用服务器端的字体以及字体大小的调整*/
@font-face {
/*服务器端*/
font-family: Webfont;
/*ttf :o otf:t*/
src: url('');
font-weight: normal;
/*本地*/
/*font-family: Arial;*/
/*src: local("Arial"),url("xxxxxx.otf");*/
}
div{font-family: Webfont;font-size-adjust: 0.68}
/*************************************************/
.box1{
width: 500px;
height: 500px;
background-color: gold;
box-shadow: 20px 20px 10px red;
}
.div1{
display: inline;
background-color: aquamarine;
width: 200px;;
}
.div11{
display: inline-block;
background-color: aquamarine;
width: 200px;
}
/*inline和inline-block的区别在于能否自适应width的长度*/
.span1{
display: block;
background-color: bisque;
}
.div2{
background-color: aquamarine;
}
.span2{
background-color: bisque;
}
.table1{
border: 1px solid red;
display: inline-table;
}
.table1 td{
border: 1px solid red;
}
.lll div{
display:list-item;
list-style-type: circle;
margin-left: 30px;
}
/*************************************************/
.sb{
width: 300px;
height: 200px;
border: 1px solid #00000f;
overflow: auto;
white-space: nowrap;
/*设置不可以换行*/
overflow-x:scroll;
overflow-y:hidden;
/*visble不可调节 auto可以自动设置 overflow-x可以手动调节*/
}
/*************************************************/
.background div{
background-color: grey;
border: dashed 15px gold;
padding: 30px;
color: white;
font-size:30px;
font-weight: bold;
background-image: url("");
background-repeat: no-repeat;
-webkit-border-image: url("")50 60 70 80;
/*用来制作像微信QQ聊天框一样的框架 后边的数字用来设置大小*/
}
.s1{
background-origin: border-box;
background-clip: border-box;
}
.s2{
background-origin: content-box;
margin-top: 40px;
background-clip: content-box;
}
.s3{
background-origin: padding-box;
margin: 40px;
background-clip: padding-box;
}
.backimg{
width: 500px;
height: 500px;
background-image:url("安卓.jpg") ,url("星空.jpg");
background-repeat: repeat-x , no-repeat;
background-position: 100%,100%,center,center;
width: 1480px;
height: 800px;
}
/*************************************************/
/*过渡*/
.bianhuan div{
display: inline-block;
margin-left: 100px;
width: 200px;
height: 200px;
border-radius: 20px;
text-align: center;
line-height: 200px;
}
.change1{
background-color: #ffff00;
color: #000000;
width: 200px;
transition: background-color 3s linear;
transition-property: background-color;
transition-duration: 3s;
transition-timing-function: linear;
transition: transform 1s linear,color 3s linear,width 3s linear;
}
.change1:hover{
background-color: #ff00ff;
transform: rotate(360deg);
column: #ffffff;
width: 400px;
}
.change2{
background-color: #ffff00;
color: #000000;
width: 200px;
/*transition: background-color 3s linear;*/
/*transition-property: background-color;*/
/*transition-duration: 3s;*/
/*transition-timing-function: linear;*/
transition: transform 1s linear,color 1s linear,width 1s linear;
}
.change2:hover{
background-color: #ff00ff;
transform: rotate(360deg);
column: #ffffff;
width: 400px;
}
.change3{
background-color: #ffff00;
color: #000000;
width: 200px;
transition: background-color 3s linear;
transition-property: background-color;
transition-duration: 3s;
transition-timing-function: linear;
/*transition: transform 1s linear,color 3s linear,width 3s linear;*/
}
.change3:hover{
background-color: #ff00ff;
transform: rotate(360deg);
column: #ffffff;
width: 400px;
}
/*
transition-property:设置哪些属性过渡
transition-duration:完成动画过渡效果的时间
transition-dalay：动画开始的延迟时间
transition-timing-function：速度效果ease
*/
/*************************************************/
/*动画*/
@-webkit-keyframes mycolor {
0% {
background-color: darkseagreen;
transform: rotate(0deg);
}
25% {
background-color: blue;
transform: rotate(90deg);
}
50%{
background-color: greenyellow;
transform: rotate(-90deg);
}
75%{
background-color: lightskyblue;
transform: rotate(30deg);
}
100%{
background-color: darkseagreen;
transform: rotate(0deg);
}
}
.donghua{background-color: springgreen }
.donghua:hover{
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-transition-timing-function: ease-in;
/*liear:匀速变化 ease-in慢慢加快 ease-out慢慢变慢 ease和ease-in-out先慢再快再慢*/
}
/*
animation属性：
animation-name：@keyframes动画的名称
animation-duration：一个周期所花时间
animation-timing-function：速度效果ease
animation-dalay：动画开始的延迟时间
animation-interation-count：动画被播放的次数 默认为1
animation-direction：动画是否在下一周期逆向播放
animation-play-state：动画是否正在运行或者暂停
animation-fill-mode：动画时间之外的效果
*/
/*************************************************/
.loading{
width: 100%;
padding: 3%;
box-sizing: border-box;
overflow: hidden;
}
.loading .loader{
width: 30%;
float: left;
height: 200px;
margin-right: 3%;
border: 1px solid #ccc;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
@-webkit-keyframes loading-1 {
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
.loading-1{
width: 35px;
height: 35px;
position: relative;
}
.loading-1 i{
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(transparent 0%,transparent 70%, #333 30%,#333 100%);
-webkit-animation: loading-1 0.6s linear 0s infinite;
}
@-webkit-keyframes loading-2 {
0%{
transform: scaleY(1);
}
50%{
transform: scaleY(0.2);
}
100%{
transform: scaleY(1);
}
}
.loading-2 i{
display: inline-block;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 0 2px;
background-color: #333;
}
.loading-2 i:nth-child(1){
-webkit-animation: loading-2 .8s ease-in 0.1s infinite;
}
.loading-2 i:nth-child(2){
-webkit-animation: loading-2 .8s ease-in 0.2s infinite;
}
.loading-2 i:nth-child(3){
-webkit-animation: loading-2 .8s ease-in 0.3s infinite;
}
.loading-2 i:nth-child(4){
-webkit-animation: loading-2 .8s ease-in 0.4s infinite;
}
.loading-2 i:nth-child(5){
-webkit-animation: loading-2 .8s ease-in 0.5s infinite;
}
@-webkit-keyframes loading-3 {
50%{
transform: scale(0.4);
opacity: 0.3;
}
100%{
transform: scale(1);
opacity: 1;
}
}
.loading-3{
position: relative;
}
.loading-3 i{
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #333;
position: absolute;
}
.loading-3 i:nth-child(1){
top: 25px;
left: 0;
-webkit-animation: loading-3 1s ease 0s infinite;
}
.loading-3 i:nth-child(2){
top: 17px;
left: 17px;
-webkit-animation: loading-3 1s ease -0.12s infinite;
}
.loading-3 i:nth-child(3){
top: 0px;
left: 25px;
-webkit-animation: loading-3 1s ease -0.24s infinite;
}
.loading-3 i:nth-child(4){
top: -17px;
left: 17px;
-webkit-animation: loading-3 1s ease -0.36s infinite;
}
.loading-3 i:nth-child(5){
top: -25px;
left: 0px;
-webkit-animation: loading-3 1s ease -0.48s infinite;
}
.loading-3 i:nth-child(6){
top: -17px;
left: -17px;
-webkit-animation: loading-3 1s ease -0.6s infinite;
}
.loading-3 i:nth-child(7){
top: 0px;
left: -25px;
-webkit-animation: loading-3 1s ease -0.72s infinite;
}
.loading-3 i:nth-child(8){
top:17px;
left: -17px;
-webkit-animation: loading-3 1s ease -0.84s infinite;
}
@-webkit-keyframes loading-4 {
0%{
transform: scale(0);
opacity: 0;
}
50%{
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.loading-4{
width: 60px;
height: 60px;
position: relative;
}
.loading-4 i{
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #333;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.loading-4 i:nth-child(1){
-webkit-animation:loading-4 1s linear 0s infinite;
}
.loading-4 i:nth-child(2){
-webkit-animation:loading-4 1s linear 0.2s infinite;
}
.loading-4 i:nth-child(3){
-webkit-animation:loading-4 1s linear 0.4s infinite;
}
@-webkit-keyframes loading-5 {
0%{
transform: rotate(0deg) scale(1);
}
50%{
transform: rotate(180deg) scale(0.6);
}
100%{
transform: rotate(360deg) scale(1);
}
}
.loading-5{
width: 40px;
height: 40px;
position: relative;
}
.loading-5 i{
display: block;
border: 2px solid #333;
border-radius: 50%;
border-color: transparent #333;
position: absolute;
}
.loading-5 i:first-child{
width: 35px;
height: 35px;
left: 0;
top: 0;
-webkit-animation: loading-5 1s ease-in-out 0s infinite;
}
.loading-5 i:last-child{
width: 15px;
height: 15px;
left: 10px;
top: 10px;
-webkit-animation: loading-5 1s ease-in-out 0.5s infinite reverse;
}
@-webkit-keyframes loading-6 {
0%{
left: 100px;
top: 0;
}
80%{
left: 0;
top: 0;
}
85%{
left: 0;
top: -20px;
width: 20px;
height: 20px;
}
90%{
width: 40px;
height: 20px;
}
95%{
left: 100px;
top: -20px;
width: 20px;
height: 20px;
}
100%{
left: 100px;
top: 0;
}
}
.loading-6{
width: 80px;
height: 20px;
position: relative;
}
.loading-6 i{
display: block;
height: 20px;
border-color: #333;
border-radius: 50%;
margin-right: 10px;
position: absolute;
}
.loading-6 i:nth-child(1){
-webkit-animation: loading-6 2s linear 0s infinite;
}
.loading-6 i:nth-child(2){
-webkit-animation: loading-6 2s linear -0.4s infinite;
}
.loading-6 i:nth-child(3){
-webkit-animation: loading-6 2s linear -0.8s infinite;
}
.loading-6 i:nth-child(4){
-webkit-animation: loading-6 2s linear -1.2s infinite;
}
.loading-6 i:nth-child(5){
-webkit-animation: loading-6 2s linear -1.6s infinite;
}
/*************************************************/
.nav{
width: 1025px;
margin: 50px auto;
background-color: #fdfdfd;
border: 1px #ccc solid;
}
.nav:after{
clear: both;
display: block;
overflow: hidden;
content: "";
}
.nav .item{
width: 200px;
height: 100px;
margin-right:5px ;
float: left;
perspective: 4000px;
/*perspective表示3d元素距离视图的距离;*/
}
.nav .item a{
display: block;
height: 100px;
text-decoration: none;
transition: all .5s;
transform-style: preserve-3d;
}
.nav .item a p{
height: 100px;
margin: 0;
line-height: 100px;
color: #fff;
text-align: center;
font-size: 20px;
font-family: monospace;
border-radius: 2px;
transition: all .5s;
}
.nav .item a p:first-child{
background-color: #090;
transform: translateZ(50px);
}
.nav .item a p:nth-child(2){
background-color: #096;
transform: translateZ(50px);
}
.nav .item a p:nth-child(3){
background-color: #012;
transform: translateZ(50px);
}
.nav .item a p:last-child{
background-color: #009;
transform: translateZ(50px) rotateX(-90deg);
margin-top: -50px;
}
.nav .item a:hover{
transform: rotateX(90deg);
}
.nav .item a:hover p:last-child{
margin-top: 0;
transform: translateZ(0) rotateX(-90deg);
}
/*************************************************/
/*以下两个例子会相互影响...若查看请单独复制*/
/*可以设置自由数量的选项列表*/
.content{
padding-top: 5%;
}
.content .select{
width: 300px;
height: 40px;
margin: 0 auto;
font-family: fantasy;
font-size: 16px;
background-color: #fff;
position: relative;
}
.content .select:after{
content: '';
display: block;
width: 10px;
height: 10px;
border-left: 1px #ccc solid;
border-bottom: 1px #ccc solid;
position: absolute;
top:11px;
right: 12px;
transform: rotate(-45deg);
transition: transform .3s ease-out, top .3s ease-out;
}
.content .select p{
padding: 0 15px;
line-height: 40px;
cursor: pointer;
}
.content .select ul{
list-style-type: none;
background-color: #fff;
width: 100%;
overflow: auto;
position: absolute;
top: 40px;
left: 0;
max-height: 0;
transition:max-height .3s ease-out;
}
.content .select ul li{
clear: both;
padding: 0 15px;
line-height: 40px;
cursor: pointer;
}
.content .select ul li:hover{
background-color: #e0e0e0;
}
.content .select ul li.selected{
background-color: #39f;
color: #fff;
}
@-webkit-keyframes slide-down {
0%{transform: scale(1,0);}
25%{transform: scale(1,1.2);}
50%{transform: scale(1,0.85);}
75%{transform: scale(1,1.05);}
1000%{transform: scale(1,1);}
}
.content .select.open ul{
max-height: 250px;
transform-origin: 50% 0;
-webkit-animation: slide-down .5s ease-in;
transition: max-height .2s ease-out;
}
.content .select.open:after{
transform: rotate(-225deg);
top: 18px;
transition:all .3s ease-in ;
}
/*只能设定固定数量的选项列表*/
.ccontent{
padding-top: 20%;
}
.ccontent .select{
width: 300px;
height: 40px;
margin: 0 auto;
font-family: fantasy;
font-size: 16px;
background-color: #fff;
position: relative;
}
.ccontent .select > i{
position: absolute;
top: 12px;
right: 10px;
width: 20px;
height: 11px;
border-top:3px #ccc solid ;
border-bottom: 3px #ccc solid;
}
.ccontent .select > i:after{
content: '';
position: absolute;
top: 4px;
left: 0;
width: 100%;
height: 3px;
background-color: #ccc;
}
.ccontent .select p{
padding:0 15px;
line-height: 40px;
cursor: pointer;
}
.ccontent .select ul{
list-style-type: none;
background-color: #fff;
width: 100%;
overflow: auto;
position: absolute;
top: 20px;
left: 0;
z-index: 1;
height: 0;
transition: height .3s ease-out,top .3s ease-out;
}
.ccontent .select ul li{
padding: 0 15px;
line-height: 40px;
cursor: pointer;
opacity: 0;
transform: translateX(300px);
transition: transform .3s ease-out;
}
.ccontent .select ul li:hover{
background-color: #e0e0e0;
}
.ccontent .select ul li.selected{
color: #0c9;
}
.ccontent .select.open ul{
height: 200px;
top: -80px;
transition: all .2s ease-in;
}
.ccontent .select.open ul li{
opacity: 1;
transform: translateX(0);
}
.ccontent .select.open ul li:nth-child(1){
transition: opacity .3s ease-in .05s,transform .3s ease-in .05s;
}
.ccontent .select.open ul li:nth-child(2){
transition: opacity .3s ease-in .1s,transform .3s ease-in .1s;
}
.ccontent .select.open ul li:nth-child(3){
transition: opacity .3s ease-in .15s,transform .3s ease-in .15s;
}
.ccontent .select.open ul li:nth-child(4){
transition: opacity .3s ease-in .2s,transform .3s ease-in .2s;
}
.ccontent .select.open ul li:nth-child(5){
transition: opacity .3s ease-in .25s,transform .3s ease-in .25s;
}
/*************************************************/
.checkbox2{
width: 980px;
margin: 0 auto;
padding: 3% 0;
background-color: #fc9;
text-align: center;
}
.checkbox2 [type="checkbox"]{
display: none;
}
.checkbox2 label{
display: inline-block;
width: 68px;
height: 34px;
border: 1px #eee solid;
background-color: #fafafa;
border-radius: 18px;
margin-right: 10px;
cursor: pointer;
position: relative;
transition: background-color .1s ease-in;
}
.checkbox2 label:after{
content: '';
position: absolute;
top: 1px;
left: 1px;
width: 30px;
height: 30px;
border: 1px #eee solid;
border-radius: 50%;
background-color: #fff;
transition:left .1s ease-in;
}
.checkbox2 [type="checkbox"]:checked + label{
background-color: #3c6;
transition: background-color .1s ease-in;
}
.checkbox2 [type="checkbox"]:checked + label:after{
left: 35px;
transition:left .1s ease-in;
}
/*************************************************/响应式菜单和照片特效滤镜
Response.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Flexbox响应式菜单</title>
<link href="menu.css" rel="stylesheet" type="text/css">
<link href="table.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="lvjing.css">
<script src="js/prefixfree.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul class="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Mongo</a></li>
</ul>
<h1>极客学院相关教程</h1>
<table class="responsive">
<thead>
<tr>
<th>课程序号</th>
<th>课程名称</th>
<th>课程操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nmber">150406</td>
<td class="name">移动应用开发课程</td>
<td class="actions">
<a href="#">修改</a><a href="#">删除</a>
</td>
</tr>
<tr>
<td class="nmber">150407</td>
<td class="name">web前端开发课程</td>
<td class="actions">
<a href="#">修改</a><a href="#">删除</a>
</td>
</tr>
<tr>
<td class="nmber">150408</td>
<td class="name">IOS开发课程</td>
<td class="actions">
<a href="#">修改</a><a href="#">删除</a>
</td>
</tr>
<tr>
<td class="nmber">150409</td>
<td class="name">Java开发课程</td>
<td class="actions">
<a href="#">修改</a><a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="cardfan">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
</div>
<script>
var polyfilter_scriptpath = 'js/lib';
</script>
<script src="js/lib/contentloaded.js"></script>
<script src="js/lib/cssParser.js"></script>
<script src="js/lib/css-filters-polyfill.js"></script>
</body>
</html>menu.css:
.menu{
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;
}
.menu li{
height: 40px;
text-align: center;
line-height: 40px;
flex: 1 1 100%;
}
.menu li:nth-child(1){
background-color:#39ADD1 ;
}
.menu li:nth-child(2){
background-color:#3079AB ;
}
.menu li:nth-child(3){
background-color: #982551;
}
.menu li:nth-child(4){
background-color: #E15258;
}
.menu li:nth-child(5){
background-color:#CC6699;
}
.menu li:nth-child(6){
background-color:#52AC43;
}
.menu li a{
color: #fff;
text-decoration: none;
}
@media (min-width: 480px) {
.menu li{
flex:1 1 50%;
}
}
@media (min-width: 768px) {
.menu {
flex-flow: row nowrap;
}
}
/*
超小屏幕（手机，＜768px）
小屏幕（平板，≥768px）
中等屏幕（桌面显示器，≥992px）
大屏幕（大桌面显示器，≥1200px）
*/
lvjing.css:
.cardfan{
width: 30%;
margin: 4rem auto;
position: relative;
}
.cardfan img{
position: absolute;
width: 100%;
height: auto;
border: 10px solid #fee;
box-shadow: 2px 2px 4px 0 rgba(0,0,0,.2);
transform-origin:center 600px ;
transition: all .5s;
cursor: pointer;
}
.cardfan img:nth-child(1){
transform: rotate(-5deg);
z-index: 3;
filter: grayscale(1);
}
.cardfan img:nth-child(1):hover{
filter: grayscale(0);
}
.cardfan:hover img:nth-child(1){
transform: rotate(-25deg);
}
.cardfan img:nth-child(2){
filter: sepia(1);
}
.cardfan img:nth-child(2):hover{
filter: sepia(0);
}
.cardfan img:nth-child(3){
transform: rotate(5deg);
z-index: -1;
filter: blur(3px);
}
.cardfan img:nth-child(3):hover{
filter: blur(0px);
}
.cardfan:hover img:nth-child(3){
transform: rotate(25deg);
}
京公网安备 11010502036488号