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" >
                            <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>

<!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>

原文地址：https://www.cnblogs.com/lsc-boke/p/10996944.html

时间： 2024-10-13 17:28:53

css3一些综合运用（备份前端网）的相关文章

深入了解css3动画(备份前端网)

Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.可以设置多个关键贞. Transition与Animation:transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值,从而达到一种动画的效果. 这几个

css雪碧（CSS Sprite）和css3过渡效果综合应用

在网页中我们经常可以看到,有些图片在鼠标经过的时候,有一个上下或左右的滑动效果,很实用页很方便,今天正好用到,拿来和大家分享一下,有什么不对或意见欢迎指正. html部分如下,这里本来打算用jq来着,后来没有用到.. 话不多说直接上代码.. <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css雪碧(CSS Sprite)和css3过渡效果综合应用</

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

在应用 CSS3 渐变/动画时,有个控制时间的属性 <timing-function> .它的取值中除了常用到的 三次贝塞尔曲线 以外,还有个让人比较困惑的 steps() 函数. steps() 第一个参数 number 为指定的间隔数(必须是正整数),即把动画分为 n 步阶段性展示,第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态. <!DOCTYPE html> <html> <head> <met

vue2.0生命周期详解(前端网备份)

这篇大佬用图文分析详解vue2.0里面的生命周期<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>;页面中渲染的优先值:所以综合排名优先级:render函数选项 > template选项 > outer HTML. https://segmentfault.com/a/1190000011381906 下面这个链接的console更清晰https://www.cnblogs

一些算法案例，如一个数组里取是个随机数(前端网备份)

先来看:var arr = [1,2,3,4,5,undefined,7,8,9,10,11,12,13,14];var len = arr.length;console.log(len);console.log(arr);console.log(arr[5]);if(arr[5]){console.log(arr[5]);}else{console.log("b");}输出如下14(14) [1, 2, 3, 4, 5, undefined, 7, 8, 9, 10, 11, 12,

小程序操作DOM以及JS求取字符串算法(前端网备份)

//js获取字符串的字节长度 //这套算法一个汉字2字节,字母符号1字节,按一行40个字节算4行 getLength:function(val){ var str = new String(val); var bytesCount = 0; for (var i = 0, n = str.length; i < n; i++) { var c = str.charCodeAt(i); if ((c >= 0x0001 && c <= 0x007e) || (0xff60

处理字符串中逗号的js算法，3种（前端网备份）

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>111</title> </head> <body class="gray-bg&qu

二维json 遍历取值(前端网备份)

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>111</title> </head> <body class="gray-bg&qu

ie hack 兼容完美解决方案(前端网备份)

hack 速查表思路: @media screen and (min-width:0\0) and (min-resolution: +72dpi) { /*IE9+ CSS*/ .carController { width: 500px; } .el-switch { width: 300px !important; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .carControlle