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

Posted 2022-01-02 lsc-boke

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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%; 

.gal2font-size: 16px;
.gal3font-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);
  

.colmargin-right: 1%;margin-top: 10px;width: 265px;height: 470px;overflow: hidden;border:1px solid #000000;position: relative;
.centerwidth: 1200px;margin:0 auto;
    .ssq-webkit-animation: my5 4s linear infinite;
     @-webkit-keyframes my5from-webkit-transform:scale(1,1);
to-webkit-transform:scale(1.15,1.15);
 
.colqfloat: 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" >
                            <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" >
                            <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">
                .windmillwidth: 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;
.windmillqwidth: 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;
.windmill2width: 228px;height: 220px;background:  url(http://cdn.attach.w3cfuns.com/notes/pics/201609/29/165415w3gnn3r3rm2g21f8.png)no-repeat center; margin:auto auto;
.windmill3width: 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
.windmill4width: 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;
.leftfloat: left;margin-left: 20px;

@-webkit-keyframes myfrom-webkit-transform: rotatex(0deg)
to-webkit-transform: rotatex(360deg)

 @-webkit-keyframes myqfrom-webkit-transform: rotatey(0deg)
to-webkit-transform: rotatey(360deg)
 
 @-webkit-keyframes my2from-webkit-transform: rotate(0deg)
to-webkit-transform: rotate(360deg)
 
@-webkit-keyframes my3from-webkit-transform: rotate3d(100,100,100,0deg)
to-webkit-transform: rotate3d(100,100,100,360deg)

 @-webkit-keyframes my5from-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

以上是关于css3一些综合运用（备份前端网）的主要内容，如果未能解决你的问题，请参考以下文章

深入css3帧动画实现ps时间轴动画效果steps()（前端网备份）