1.????圓角_陰影_透明度
? ? ? ?CSS3實現圓角有兩種方法.,
????????????第一種是背景圖像,傳統的CSS每個元素只能有一個背景圖像,但是CSS3可以允許一個元素有多個背景圖像.這樣給一個元素添加4個1/4圓的背景圖像,分別位于4個角上就可以實現圓角。
? ??????????.box {
? ? ???????????? /* 首先定義要使用的4幅圖像為背景圖 */
? ? ????????????background-image: url(/img/top-left.gif), url(/img/top-right.gif), url(/img/bottom-left.gif), url(/img/bottom-right.gif);
? ? ????????????/* 然后定義不重復顯示 */
? ? ????????????background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
? ? ????????????/* 最后定義4幅圖分別顯示在4個角上 */
? ? ????????????background-position: top left, top right, bottom left, bottom right;
????????????}
? ??????????第二種方法就簡潔了,直接用CSS實現,不需要用圖片.
????????????.box {
? ????????????? /* 直接定義圓角的半徑就可以了 */
? ????????????? border-radius: 1em;
????????????}?
? ? ? ? ? ? 當前Firefox和Safari(同一個核心的Chrome也可以)支持,若要得到IE和Opera的支持，需要使用前綴
????????????.box {
? ????????????? -moz-border-radius: 1em;
? ????????????? -webkit-border-radius: 1em;
? ? ????????????border-radius: 1em;
????????????}
? ??????????CSS3的box-shadow屬性可以直接實現陰影：
????????????.div {
? ? ????????????box-shadow: 2px 2px 10px #909090;
????????????}
????????????box-shadow有5個屬性box-shadow: h-shadow? v-shadow? blur? spread? color? inset;
? ??????????如果要支持其它瀏覽器：
????????????.div{
? ? ????????????filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
? ? ????????????-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
? ? ????????????-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
? ? ????????????box-shadow:2px 2px 10px #909090;/*opera或ie9*/
????????????}
? ??????????CSS本來就是支持透明的,IE以外的瀏覽器是opacity屬性,IE是filter:alpha.但是,這個透明度有個缺點,就是它會使應用元素的內容也會繼? ?????????????承它,比如有一個DIV
????????????<div style="opacity:0.8;filter:alpha(opacity=80); font-weight: bold;">>
? ???????????? 內容
????????????</div>
????????????如果像上面這樣DIV的背景是透明了,但是內容兩個字也透明了,這時可以用RGBa。
????????????.alert {
? ? ????????????rgba(0,0,0,0.8);
????????????}
????????????這個屬性前3個屬性表示顏色紅,綠,藍,第四個是透明度.紅綠藍都是0代表黑色,所以rgba(0,0,0,0.8)就是將黑色的透明度設置為0.8。
2.? ? 運動曲線
? ? ? ?<style type="text/css">
????????????div{
????????????width: 50px;
? ? ? ? ? ? height: 50px;
????????????background-color: gold;
????????????margin-bottom: 20px;
????????????}
????????????div:nth-child(1){
????????????/*勻速*/
????????????transition: all 1s linear;
????????????}
????????????div:nth-child(2){
????????????/*開始和結束慢速，中間加速*/
????????????transition: all 1s ease;
????????????}
????????????div:nth-child(3){
????????????/*開始慢速，結尾突然停止*/
????????????transition: all 1s ease-in;
????????????}
????????????div:nth-child(4){
????????????/*突然開始，結束時慢速*/
????????????transition: all 1s ease-out;
????????????}
????????????div:nth-child(5){
????????????/*開始和結束時慢速*/
????????????transition: all 1s ease-in-out;
????????????}
????????????div:nth-child(6){
????????????/*貝塞爾（貝茲）曲線*/
????????????/*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);勻速*/
????????????/*超出再縮回的彈性效果*/
????????????transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);
????????????}
????????????div:hover{
????????????width: 1000px;
????????????}
????????????</style>
3.? ? 圖片文字遮蓋
? ? ? ?<!DOCTYPE html>
????????<html>
????????<head>
????????<meta charset="UTF-8">
????????<title>圖片文字遮罩</title>
????????<style type="text/css">
????????.box{
????????width: 200px;
????????height: 300px;
????????margin: 50px auto 0;
????????border: 1px solid #000;
????????position: relative;
????????/*默認文字不可見*/
????????overflow: hidden;
????????}
????????.box img{
????????width: 200px;
????????height: 300px;
????????}
????????.box .pic_info{
????????width: 200px;
????????height: 200px;
????????background-color: rgba(0,0,0,0.5);
????????color: #fff;
????????/*定位使色塊在圖片正下方*/
????????position: absolute;
????????left: 0;
????????top: 300px;
????????transition: all 500ms cubic-bezier(0.470, -0.485, 0.460, 1.435);
????????}
????????.box:hover .pic_info{
????????/*色塊上移*/
????????top:150px;
????????}
????????/*間距用p標簽的margin，而不直接給.pic_info用padding，因為padding會改變盒子大小*/
????????.box .pic_info p{
????????margin: 20px;
????????line-height: 30px;
????????}
????????</style>
????????</head>
????????<body>
????????<div class="box">
? ? ? ? < img src="img/location_bg.jpg" alt="玫瑰花">
????????<div class="pic_info">
????????<p>圖片說明：這是一朵玫瑰花圖片說明：這是一朵玫瑰花圖片說明：這是一朵玫瑰花圖片說明：這是一朵玫瑰花</p >
????????</div>
????????</div>
????????</body>
????????</html>
4.? ? 二級菜單
? ??????首先在html中寫出一級菜單列表，然后在每個一級菜單中再嵌套一個列表即可創建一個二級菜單。
index.html。
? ??????<!DOCTYPE html>
????????<html>
????????<head>
?????????<meta charset="UTF-8">
?????????<link rel="stylesheet" href="style.css">
?????????<title>Title</title>
????????</head>
????????<body>
?????????<div class="menu">
?????????<ul>?
?????????<li>< a href="">一級菜單</ a>?
?????????<ul>?
?????????<li>< a href="">二級菜單</ a></li>?
?????????<li>< a href="">二級菜單</ a></li>?
?????????<li>< a href="">二級菜單</ a></li>?
?????????<li>< a href="">二級菜單</ a></li>
?????????<li>< a href="">二級菜單</ a></li>
?????????</ul> </li>
?????????<li>< a href="">一級菜單</ a>?
?????????<ul> <li>< a href="">二級菜單</ a></li>
?????????<li>< a href="">二級菜單</ a></li>?
?????????<li>< a href="">二級菜單</ a></li>?
?????????<li>< a href="">二級菜單</ a></li>
?????????<li>< a href="">二級菜單</ a></li>?
?????????</ul> </li>?
?????????<li>< a href="">一級菜單</ a>?
?????????<ul> <li>< a href="">二級菜單</ a></li>?
?????????<li>< a href="">二級菜單</ a></li>?
?????????<li>< a href="">二級菜單</ a></li>
?????????<li>< a href="">二級菜單</ a></li>?
?????????<li>< a href="">二級菜單</ a></li>
?????????</ul> </li> </ul> </div>
????????</body>
????????</html>
? ??????接著寫樣式文件，主要是對列表樣式和位置進行修改
????????*{padding:0;margin:0}
????????.menu ul li{
????????list-style: none;
????????background-color: burlywood;
????????width:120px;text-align: center;
????????height: 40px;position: relative
????????}
????????.menu ul li a{
????????text-decoration: none;
????????display: block;
????????line-height: 40px
????????}
????????.menu ul li:hover{
????????background-color: aqua
????????}
?????????.menu ul li ul{display: none;
????????position: absolute;
????????left:120px;top:0
????????}
????????.menu ul li:hover ul{
????????display: block
????????}
5.? ? 變形
? ??????<style type="text/css">
????????.box,.box2,.box3,.box4{
????????width: 200px;
????????height: 200px;
????????backgr
???????background-color: gold;
????????margin: 50px auto 0;
????????transition: all 1s ease;
????????}
????????.box:hover{
????????/*box的動畫不會影響到box2*/
????????/*位移*/
????????transform: translate(50px,50px);
????????}
????????.box2:hover{
????????/*沿Z軸旋轉360度*/
????????transform: rotate(360deg);
????????}
????????.box3:hover{
????????/*縮放*/
????????transform: scale(0.5,0.2);
????????}
????????.box4:hover{
????????/*斜切*/
????????/*transform: skew(45deg,0);*/
????????transform: skew(0,45deg);
????????}
????????</style>
6.? ? 三維旋轉
? ??????默認沿Z軸旋轉
? ??????transform: rotate(45deg);
????????perspective設置透視距離，經驗數值800比較符合人眼的透視效果
? ??????transform: perspective(800px) rotateX(45deg);
????????/*旋轉方向判斷
????????1、X軸向右、Y軸向下、Z軸向屏幕外
????????2、讓軸向對著自己，順時針方向就是該軸向的旋轉方向*/
????????.box{
????????width: 300px;
????????height: 300px;
????????background-color: gold;
????????margin: 50px auto 0;
????????transition: all 500ms ease;
????????/*設置盒子按3D空間顯示*/
????????transform-style: preserve-3d;
????????transform: perspective(800px) rotateY(0deg);
????????}
????????.box:hover{
????????/*默認沿Z軸旋轉*/
????????/*transform: rotate(45deg);*/
????????/*perspective設置透視距離，經驗數值800比較符合人眼的透視效果*/
????????/*transform: perspective(800px) rotateX(45deg);*/
????????transform: perspective(800px) rotateY(-45deg);
????????}
????????</style>
7.? ? 變形中心點
? ??????<style type="text/css">
????????div{
????????width: 200px;
????????height: 200px;
????????background-color: gold;
????????float: left;
????????margin: 30px;
????????transition: all 500ms ease;
????????}
????????div:hover{
????????transform: rotate(-90deg);
????????}
????????div:nth-child(1){
????????/*設置變形的中心點*/
????????transform-origin: left center;
????????}
????????div:nth-child(2){
????????transform-origin: left top;
????????}
????????div:nth-child(3){
????????transform-origin: 50px 50px;
????????}
????????</style>
8.? ? 背面可見
? ??????<style type="text/css">
????????.con{
????????width: 300px;
????????height: 300px;
????????margin: 50px auto 0;
????????border: 1px solid #000;
????????}
????????.box{
????????width: 300px;
????????height: 300px;
????????background-color: gold;
????????text-align: center;
????????line-height: 300px;
????????font-size: 50px;
????????transition: all 500ms ease;
????????/*設置盒子按3d空間顯示*/
????????transform-style: preserve-3d;
????????/*設置透視距離、三維旋轉的初始角度*/
????????transform: perspective(800px) rotateY(0deg);
????????/*設置盒子背面是否可見*/
????????backface-visibility: hidden;
????????}
????????.con:hover .box{
????????transform: rotateY(180deg);
????????}
????????</style>
9.? ? 圖片翻面
? ??????<!DOCTYPE html>
????????<html>
????????<head>
????????<metacharset="UTF-8">
????????<title>圖片翻面</title>
????????<styletype="text/css">
????????.con{
????????width:300px;
????????height:272px;
????????margin:100px auto 0;
????????position:relative;
????????/*
????????? ? ? ? 以下兩句是為了演示圖片和文字層重疊的效果
????????? ? ? ? transform-style: preserve-3d;
????? ? ? ? ?transform: perspective(800px) rotateY(45deg);
初始旋轉45度
????????? ? ? ? ? ? */
????????}
????????.pic,.info{
????????width:300px;
????????height:272px;
????????position:absolute;
????????left:0;top:0;
????????/*
????????圖片和文字背面不可見，文字初始已翻轉，所以隱藏露出底層圖片*/
????????backface-visibility:hidden;
????????transform-style:preserve-3d;
????????transform:perspective(800px)rotateY(0deg);
????????transition:all 500ms ease;
????????}
????????.info{
????????background-color:gold;
????????text-align:center;
????????line-height:272px;
????????/*
????????transform: translateZ(10px);
????????初始文字浮起10像素方便查看圖片與文字分層的效果
????????*//*
????????初始文字翻轉，鼠標移入時才翻正顯示*/
????????transform:translateZ(2px)rotateY(180deg);
????????}
????????/*鼠標移入時圖片翻為背面隱藏*/
????????.con:hover .pic{
????????transform:perspective(800px)rotateY(180deg);
????????}
????????/*鼠標移入時文字翻為正面顯示*/
????????.con:hover .info{
????????transform:perspective(800px)rotateY(0deg);
????????}
????????</style>
????????</head>
????????<body>
????????<divclass="con">
????????<divclass="pic"><imgsrc="img/1.jpg"alt="玫瑰花"></div>
????????<divclass="info">玫瑰花的文字說明</div>
????????</div>
????????</body>
????????</html>
10.? ? animation動畫
? ??????動畫名稱、時間、曲線
? ??????????
