html 代码
多行省略号
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
<style type="text/css">
h4, h5, h6,
h1, h2, h3 {margin-top: 0;}
ul, ol {margin: 0;}
p {margin: 0;}
html, body{
font-family: 'Hind-Regular';
font-size: 100%;
background:#fff;
}
a {
text-decoration: none;
}
.col1 figure {
position: absolute;
float: left;
overflow: hidden;
top: -16px;
left: -40px;
/*cursor: pointer;*/
265px;
height: 470px;
}
.col1 figure img {
margin-left: 0px;
padding-left: 0px;
}
.col1 figure figcaption{
position: absolute;
top: 0;
left: 0;
99%;
height: 99%;
}
figure.effect-bubba {
background:rgba(213, 38, 133, 0.83);
}
figure.effect-bubba:hover img {
opacity: 0.3;
}
figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after{
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 1;
}
figure.effect-bubba figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
-moz-transform: scale(0,1);
-o-transform: scale(0,1);
-ms-transform: scale(0,1);
transform: scale(0,1);
}
figure.effect-bubba figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
-moz-transform: scale(1,0);
-o-transform: scale(1,0);
-ms-transform: scale(1,0);
transform: scale(1,0);
}
figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transition: opacity 0.35s,-webkit-transform 0.35s;
-moz-transition: opacity 0.35s, -moz-transform 0.35s;
-o-transition: opacity 0.35s, -o-transform 0.35s;
-ms-transition: opacity 0.35s, -ms-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-bubba h4 p{
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-moz-transition: opacity 0.35s, -moz-transform 0.35s;
-o-transition: opacity 0.35s, -o-transform 0.35s;
-ms-transition: opacity 0.35s, -ms-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-100px,0);
-moz-transform: translate3d(0,-100px,0);
-o-transform: translate3d(0,-100px,0);
-ms-transform: translate3d(0,-100px,0);
transform: translate3d(0,-100px,0);
opacity: 0;
color:#fff;
font-family:'Signika-Regular';
}
figure.effect-bubba h4.gal {
padding-top: 51%;
}
.gal2{font-size: 16px;}
.gal3{font-size: 14px;}
.gal1 {padding: 0 0;margin-top: 20px;}
figure.effect-bubba p {
/* padding: 5px 3em; */
padding: 5px 44px;
opacity: 0;
color:#fff;
font-size: 14px;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-moz-transition: opacity 0.35s, -moz-transform 0.35s;
-o-transition: opacity 0.35s, -o-transform 0.35s;
-ms-transition: opacity 0.35s, -ms-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,100px,0);
-moz-transform: translate3d(0,100px,0);
-o-transform: translate3d(0,100px,0);
-ms-transform: translate3d(0,100px,0);
transform: translate3d(0,100px,0);
}
figure.effect-bubba:hover h4,
figure.effect-bubba:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.col{margin-right: 1%;margin-top: 10px; 265px;height: 470px;overflow: hidden;border:1px solid #000000;position: relative;}
.center{ 1200px;margin:0 auto;}
.ssq{-webkit-animation: my5 4s linear infinite;}
@-webkit-keyframes my5{from{-webkit-transform:scale(1,1);}
to{-webkit-transform:scale(1.15,1.15);}
}
.colq{float: left;margin-right:100px; }
</style>
<div class="center">
<div class="colq">
<div class="col col1 ">
<a href="" rel="title" >
<figure class="effect-bubba ">
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/30/140412stt0oyttupz2yv2q.jpg" alt="">
<figcaption>
<h4 class="gal">
<p class="gal2">吴冰</b>
<p class="gal3">星图艺考宣传部</p>
</h4>
<p class="gal1">
<p>中国教育界领军人物</p>
<p>全国十大名牌教师</p>
<p>出色的激励大师、孩子成才设计师</p>
</p>
</figcaption>
</figure>
</a>
</div>
</div>
<div class="colq">
<div class="col col1 ">
<a href="" rel="title" >
<figure class="effect-bubba c2">
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/30/140412stt0oyttupz2yv2q.jpg" alt="">
<figcaption>
<h4 class="gal">
<p class="gal2">吴冰</b>
<p class="gal3">星图艺考宣传部</p>
</h4>
<p class="gal1">
<p>中国教育界领军人物</p>
<p>全国十大名牌教师</p>
<p>出色的激励大师、孩子成才设计师</p>
</p>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
<script >
$(function(){
$(".c2").hover(function(){
$(".c2").addClass("ssq");
},function(){
$(".c2").removeClass("ssq");
});
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<style>
</style>
</head>
<body>
<style type="text/css">
.windmill{ 228px;height: 220px;background: url(http://cdn.attach.w3cfuns.com/notes/pics/201609/29/165415w3gnn3r3rm2g21f8.png) no-repeat center;-webkit-animation: my 5s linear infinite; margin:auto auto;}
.windmillq{ 228px;height: 220px;background: url(http://cdn.attach.w3cfuns.com/notes/pics/201609/29/165415w3gnn3r3rm2g21f8.png) no-repeat center;-webkit-animation: myq 5s linear infinite; margin:auto auto;}
.windmill2{ 228px;height: 220px;background: url(http://cdn.attach.w3cfuns.com/notes/pics/201609/29/165415w3gnn3r3rm2g21f8.png)no-repeat center; margin:auto auto;}
.windmill3{ 228px;height: 220px;background: url(http://cdn.attach.w3cfuns.com/notes/pics/201609/29/165415w3gnn3r3rm2g21f8.png) no-repeat center;-webkit-animation: my3 5s linear infinite; margin:auto auto;green}
.windmill4{ 293px;height: 300px;background: url(http://cdn.attach.w3cfuns.com/notes/pics/201609/29/165424mr801jraanr0kzdr.png) no-repeat center; margin:auto auto;}
.ssw{-webkit-animation: my5 5s linear infinite; }
.ssq{-webkit-animation: my2 5s linear infinite;}
.left{float: left;margin-left: 20px;}
@-webkit-keyframes my{from{-webkit-transform: rotatex(0deg)}
to{-webkit-transform: rotatex(360deg)}
}
@-webkit-keyframes myq{from{-webkit-transform: rotatey(0deg)}
to{-webkit-transform: rotatey(360deg)}
}
@-webkit-keyframes my2{from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg)}
}
@-webkit-keyframes my3{from{-webkit-transform: rotate3d(100,100,100,0deg)}
to{-webkit-transform: rotate3d(100,100,100,360deg)}
}
@-webkit-keyframes my5{from{-webkit-transform:scale(1.1,1.1);}
to{-webkit-transform:scale(1.5,1.5);}
}
</style>
<div class="windmill left"></div>
<div class="windmillq left"></div>
<div class="windmill2 left"></div>
<div class="windmill3 left"></div>
<div class="windmill4 left"></div>
<div class="windmill5 left"></div>
<script >
$(function(){
$(".windmill4").hover(function(){
$(".windmill4").addClass("ssw");
},function(){
$(".windmill4").removeClass("ssw");
});
})
$(function(){
$(".windmill2").hover(function(){
$(".windmill2").addClass("ssq");
},function(){
$(".windmill2").removeClass("ssq");
});
})
</script>
</body>
</html>