您的位置：首页 > Web前端 > CSS

利用css3的几种提示效果

2017-04-13 18:02 337 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta name="viewport" content="width=device-width,inatial-scale=1">
<title>css3图片动态提示效果</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<figure class="test1">
<img src="img/1.jpg">
<figcaption>
<h2>图片标题</h2>
<p>图片注解</p>
<p>图片注解</p>
<p>图片注解</p>
</figcaption>
</figure>
<figure class="test2">
<img src="img/1.jpg">
<figcaption>
<div></div>
<h2>旋转动画</h2>
<p>飞来飞去</p>
</figcaption>
</figure>
<figure class="test3">
<img src="img/1.jpg">
<figcaption>
<h2>斜切动画</h2>
<p>图片注解</p>
<p>图片注解</p>
</figcaption>
</figure>
<figure class="test4">
<img src="img/1.jpg">
<figcaption>
<div></div>
<h2>图片缩放</h2>
<p>图片注解</p>
<p>图片注解</p>
</figcaption>
</figure>
<figure class="test5">
<img src="img/1.jpg">
<figcaption>
<span>这是一张图片</span>
<div></div>
<h2>旋转</h2>
<p>利用旋转提供额外信息</p>
</figcaption>
</figure>
<figure class="test6">
<img src="img/1.jpg">
<figcaption>
<div class="one"></div>
<div class="two"></div>
<h2>缩放</h2>
<p>缩放的简单应用</p>
</figcaption>
</figure>
</body>
</html>
css文件：
figure{
position: relative;
width: 33.33%;
height: 350px;
float: left;
overflow: hidden;
}

figure p, figure img,figure span,figure div{
transition:all 0.35s;
}

figure img{
height: 350px;
width: 100%;
max-width: 100%;
}

figure img{
opacity: 0.8;
}
figcaption{
position: absolute;
top: 0;
left: 0;
color: #fff;
}

.test1{
background-color: red;
}

.test1 figcaption p{
background-color: #fff;
color: #2F0000;
margin: 3px;
text-align: center;
transform: translateX(-120px);
}

.test1:hover figcaption p{
transform: translateX(0);
}

.test1 figcaption{
padding:20px;
}
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s
}
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.1s
}
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s
}
.test1:hover img{
transform: translateX(-50px);
opacity:0.5;
}

.test2{
background-color: #030;
}

.test2 figcaption{
width: 100%;
height: 100%;
}

.test2 figcaption p{
transform: translateY(45px);
opacity: 0;
}

.test2 figcaption div{
border: 2px solid #fff;
width: 80%;
height:80%;
/*margin: 10% auto;*/
position: absolute;
top: 10%;
left: 10%;
transform: translateY(-400px) rotate(0deg);
}

.test2:hover figcaption div{
transform: translateY(0) rotate(-360deg);/*要设置初始值*/
}

.test2:hover figcaption p{
transform: translateY(0);
opacity: 1;
}

.test2:hover img{
opacity: 0.5;
transform: translateX(-50px);
}

.test2 figcaption h2{
margin-top: 15%;
margin-left: 15%;
}

.test2 figcaption p{
margin-left: 15%;
margin-top: 3px;
}
.test3{
background-color: #000;
}
.test3:hover img{
opacity: 0.5;
}
.test3 figcaption{
top: 30%;
left: 15%;
}
.test3 figcaption h2,.test3 figcaption p{
transform: skew(90deg);
}
/* h2不会斜切?*/
.test3 figcaption p{
margin-top: 5px;
margin-left: 15%;
}
.test3:hover figcaption h2,.test3:hover figcaption p{
transform: skew(0deg);
}
.test4{
background-color:#000;
}
.test4:hover img{
opacity: 0.5;
transform: scale(1.2,1.2);
}
.test4 figcaption{
width:100%;
height: 100%;
}
.test4 figcaption div{
border: 2px solid #fff;
width: 80%;
height:80%;
position: absolute;
top: 10%;
left: 10%;
transform: scale(1.3,1.3);
}

.test4 figcaption h2{
margin-top: 15%;
}
.test4 figcaption P,.test4 figcaption h2{
margin-left: 15%;
transform: scale(1.2,1.2);
opacity: 0;
}
.test4:hover figcaption P,.test4:hover figcaption h2{
transform: scale(1.0,1.0);
opacity: 1;
}
.test4 figcaption img{
transform: scale(1.0,1.0);
}
.test4:hover figcaption div{
transform: scale(1.0,1.0);
}
.test5{
background-color: #000;
}
.test5:hover img{
opacity: 0.5;
}
.test5 figcaption h2{
margin-top: 10%;
}
.test5 figcaption p,.test5 figcaption h2{
width: 100%;
margin-left: 20%;
transform: translateY(20px);
opacity: 0;
}
.test5:hover figcaption p,.test5:hover figcaption h2{
transform: translateY(0);
opacity: 1;
}
.test5 figcaption{
width: 100%;
height: 100%;
transform-origin: left bottom;
}
.test5 figcaption div{
border: 2px solid #fff;
border-left: none;
border-right: none;
/*border-bottom: none;*/
width: 120%;
height:200px;
opacity: 0.4;
background-color: #fff;
position: absolute;
top:350px;
transform-origin: left top;
transform: rotate(0deg);
color: red;
}
.test5 figcaption span{
display: block;
color: #fff;
position: absolute;
left: 60%;
bottom: 80px;
opacity: 0;
transform: translateY(200px);
}
.test5:hover figcaption span{
transform: translateY(40px);
opacity: 1;
transition-delay: 0.2s;
}
.test5:hover figcaption div{
transform-origin: left top;
transform: rotate(-15deg);
}
.test6{
background-color: #000;
}
.test6:hover img{
opacity: 0.5;
}
.test6 figcaption{
width: 100%;
height: 100%;
}
.test6 figcaption h2{
margin-top: 20%;
}
.test6 figcaption p,.test6 figcaption h2{
margin-left: 20%;
transform: scale(0,0) rotate(0deg);
}
.test6:hover figcaption p,.test6:hover figcaption h2{
margin-left: 20%;
transform: scale(1.2,1.2) rotate(360deg);
transition-delay: 0.15s;
}
.test6 figcaption div.one{
position: absolute;
top: 10%;
left: 15%;
width: 70%;
height: 80%;
border: 1px solid #fff;
}
.test6 figcaption div.two{
position: absolute;
top: 15%;
left: 10%;
width: 80%;
height: 65%;
border: 1px solid #fff;
}
.test6 figcaption div.one{
border-bottom: none;
border-top: none;
transform: scale(0,0) rotate(0deg);

}
.test6:hover figcaption div.one{
transform: scale(1.2,1.2) rotate(360deg);

}
.test6 figcaption div.two{
border-right: none;
border-left: none;
transform: scale(0,0) rotate(0deg);

}
.test6:hover figcaption div.two{
transform: scale(1.2,1.2) rotate(360deg);

/*transition-delay: 0.25s;*/
}
@media screen and (min-width: 1001px) {
figure{
width: 33.33%;
}

}

@media screen and (min-width: 500px) and (max-width: 1001px) {
figure{
width: 50%;
}

}

@media screen and (max-width: 500px) {
figure{
width: 100%;
}

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3
相关文章推荐
新的分享
章节导航