<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <style type="text/css">
? ? ? ? .box1{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: #d86aff;
? ? ? ? ? ? /*動(dòng)畫(huà)方向，時(shí)間 運(yùn)動(dòng)曲線ease緩慢變化? 延遲時(shí)間*/
? ? ? ? ? ? transition: width 500ms ease,height 500ms ease 500ms,
? ? ? ? ? ? background-color 500ms ease 1000ms,border-radius 500ms? 1.5s;
? ? ? ? }
? ? ? ? .box1:hover{
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? background-color: #cc0000;
? ? ? ? ? ? border-radius: 50px;
? ? ? ? }
? ? </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
animation動(dòng)畫(huà)
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <style type="text/css">
? ? ? ? .box1{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: #d86aff;
? ? ? ? ? ? animation: moving 500ms ease 1s 6 alternate;/*? 6換成 infinite無(wú)窮次 */
? ? ? ? }
? ? ? ? .box1:hover{
? ? ? ? ? ? animation-play-state: paused;/*暫停*/
? ? ? ? }
? ? ? ? @keyframes moving {
? ? ? ? ? ? from{
? ? ? ? ? ? ? ? width: 100px;
? ? ? ? ? ? }to{
? ? ? ? ? ? ? ? width: 500px;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? }
? ? </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
多幀動(dòng)畫(huà)
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <style type="text/css">
? ? ? ? .box1{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: #d86aff;
? ? ? ? ? ? margin: 50px auto 0;
? ? ? ? ? ? animation: moving 1s infinite;
? ? ? ? }
? ? ? ? @keyframes moving {
? ? ? ? ? ? from{
? ? ? ? ? ? ? ? transform: translateY(0);
? ? ? ? ? ? ? ? transform: translateX(0);
? ? ? ? ? ? }25%{
? ? ? ? ? ? transform: translateX(400px);
? ? ? ? ? ? background-color: #cc0000;
? ? ? ? ? ? ? ? ? ? ? ? }50%{
? ? ? ? ? ? transform: translateX(400);
? ? ? ? ? ? background-color: yellow;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? }
? ? </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
文字遮罩
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <style type="text/css">
? ? ? ? .box1{
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? margin: 50px auto;
? ? ? ? ? ? border: 1px solid black;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? /*overflow: hidden;*/
? ? ? ? }
? ? ? ? .pic{
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? background-color: black;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 300px;
? ? ? ? ? ? top: 0px;
? ? ? ? ? ? background-color:rgba(0,0 ,0 ,0.5);
? ? ? ? ? ? transition: all 500ms ease;
? ? ? ? ? ? display: none;
? ? ? ? }
? ? ? ? /* 將box1設(shè)置 overflow:hidden */
? ? ? ? /*.box1:hover {*/
? ? ? ? ? ? /*overflow: visible;*/
? ? ? ? ? ? /*!*top:150px*!*/
? ? ? ? /*}*/
? ? ? ? .box1:hover .pic{
? ? ? ? ? ? display: block;
? ? ? ? ? ? /*top:150px*/
? ? ? ? }
? ? </style>
</head>
<body>
<div class="box1">
? ? <img src="image/2.jpg" alt="接盤(pán)俠">
? ? <div class="pic">我是接盤(pán)俠</div>
</div>
</body>
</html>
附錄
css文件如下：
*{
? ? margin: 0;
? ? padding: 0;
}
.box1{
? ? width: 960px;
? ? height: 40px;
? ? background-color: #55a8ea;
? ? margin: 50px auto;
? ? position: relative;
}
.box1 ul{
? ? list-style: none;
}
.box1 li{
? ? width: 100px;
? ? height: 40px;
? ? float: left;
}
.box1 a{
? ? display: block;
? ? text-decoration: none;
? ? color: #fff;
? ? text-align: center;
? ? font: 14px 微軟雅黑;
? ? padding: 10px;
}
.box1 li:hover{
? ? background-color:#00619f ;
}
.box1 img{
? ? position: absolute;
? ? left: 430px;
? ? top:-10px;
}
.box2{
? ? width: 960px;
? ? height: 269px;
? ? border: 1px solid #cccccc;
? ? margin: 50px auto;
? ? /*position: relative;*/
}
h3{
? ? /*position: absolute;*/
? ? /*left: 35px;*/
? ? /*top:10px;*/
? ? padding: 12.6px 35px;
}
.box3{
? ? width: 920px;
? ? height: 219px;
? ? border-top:1px solid #cccccc ;
? ? margin: 0 20px;
? ? /*position: absolute;*/
? ? /*top:50px;*/
? ? /*left: 20px;*/
? ? /*position: relative;*/
}
.box4{
? ? width: 100px;
? ? border-top:1.5px solid red ;
}
.p1{
? ? float: left;
? ? padding: 20px 14.5px 5px 0;
}
.p2{
? ? float: left;
? ? padding: 20px 14.5px 5px 14.5px;
}
.p3{
? ? padding: 20px 0 5px 14.5px;;
}
.box2 img:hover{
? transform: translateY(-5px);
}
/*#p1{*/
? ? /*position: absolute;*/
? ? /*left: 0;*/
? ? /*top:20px;*/
/*}*/
/*#p2{*/
? ? /*position: absolute;*/
? ? /*left: 189px;*/
? ? /*top:20px;*/
/*}*/
/*#p3{*/
? ? /*position: absolute;*/
? ? /*left: 378px;*/
? ? /*top:20px;*/
/*}*/
/*#p4{*/
? ? /*position: absolute;*/
? ? /*left: 567px;*/
? ? /*top:20px;*/
/*}*/
/*#p5{*/
? ? /*position: absolute;*/
? ? /*left: 756px;*/
? ? /*top:20px;*/
/*}*/
/*#p6{*/
? ? /*position: absolute;*/
? ? /*left: 0;*/
? ? /*top:113px;*/
/*}*/
/*#p7{*/
? ? /*position: absolute;*/
? ? /*left: 189px;*/
? ? /*top:113px;*/
/*}*/
/*#p8{*/
? ? /*position: absolute;*/
? ? /*left: 378px;*/
? ? /*top:113px;*/
/*}*/
/*#p9{*/
? ? /*position: absolute;*/
? ? /*left: 567px;*/
? ? /*top:113px;*/
/*}*/
/*#p10{*/
? ? /*position: absolute;*/
? ? /*left: 756px;*/
? ? /*top:113px;*/
/*}*/
html文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <link rel="stylesheet" type="text/css" href="css/4.css">
</head>
<body>
<div class="box1">
? ? <ul>
? ? ? ? <li><a href="#">首頁(yè)</a></li>
? ? ? ? <li><a href="#">網(wǎng)站建設(shè)</a></li>
? ? ? ? <li><a href="#">程序開(kāi)發(fā)</a></li>
? ? ? ? <li><a href="#">網(wǎng)絡(luò)營(yíng)銷(xiāo)</a></li>
? ? ? ? <li><a href="#">企業(yè)VI</a></li>
? ? ? ? <li><a href="#">案例展示</a></li>
? ? ? ? <li><a href="#">聯(lián)系我們</a></li>
? ? </ul>
? ? <img src="image/new.png">
</div>
<div class="box2">
? ? <h3>圖片展示</h3>
? ? <div class="box3">
? ? ? ? <div class="box4"></div>
? ? ? ? <img src="image/goods.jpg" class="p1">
? ? ? ? <img src="image/goods.jpg" class="p2">
? ? ? ? <img src="image/goods.jpg" class="p2">
? ? ? ? <img src="image/goods.jpg" class="p2">
? ? ? ? <img src="image/goods.jpg" class="p3">
? ? ? ? <img src="image/goods.jpg" class="p1">
? ? ? ? <img src="image/goods.jpg" class="p2">
? ? ? ? <img src="image/goods.jpg" class="p2">
? ? ? ? <img src="image/goods.jpg" class="p2">
? ? ? ? <img src="image/goods.jpg" class="p3">
? ? </div>
</div>
</body>
</html>
