css3一些综合运用（备份前端网）

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;*/
    width:265px;
    height: 470px;
}
.col1 figure img {
    margin-left: 0px;
    padding-left: 0px;

}

 .col1 figure figcaption{
  position: absolute;

  top: 0;
  left: 0;
  width: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;width: 265px;height: 470px;overflow: hidden;border:1px solid #000000;position: relative;}
.center{width: 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>

View Code

<!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{width: 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{width: 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{width: 228px;height: 220px;background:  url(http://cdn.attach.w3cfuns.com/notes/pics/201609/29/165415w3gnn3r3rm2g21f8.png)no-repeat center; margin:auto auto;}
.windmill3{width: 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{width: 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>

View Code

posted @ 2019-06-10 11:55 影思密达ing 阅读(146) 评论(0) 收藏举报

刷新页面返回顶部

影ing

css3一些综合运用（备份前端网）

公告