浅谈CSS3电脑鼠标移入照片动态性提醒实际效果(

2021-01-20 04:42 jianzhan

第1次尝试着写blog,不太好或有误的地区期待大伙儿多多纠正呐,今日关键写的是有关CSS3的1个关键特性transform的1些用法,这些事例是以前在慕课在网上学习培训某位老师的课程后自身敲的。

1、序言

1. transform是甚么?

transform的含意是:更改,使....形变;变换

2. transform的普遍特性有哪些?

transform的特性包含: translate()/rotate() / skew() / scale() /,各自也有x、y之分,例如:rotatex() 和 rotatey() ,以此类推。

transform:translate()

含意:变化,位移;比如向右位移20像素,向上位移50像素(向左向下为负值) 案例以下

.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}

transform:rotate()

含意:转动;“deg”是表明转动的度数 比如“180deg”表明转动“180度”  案例以下

.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}

transform:skew()

含意:歪斜  案例以下

.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)} 

transform:scale()

含意:占比  1.8表明以1.8的占比变大 假如是变大整数金额倍如变大3倍 务必写成3.0  案例以下

.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}

3. transform的案例

demo01 表明:电脑鼠标移入后 照片左移 內容先后进到

流程:

1.写好html编码并根据css设定好內容和照片的原始款式(文本內容都在照片上);

2.将叙述內容根据transform特性位移到左边 看不见为止(transform:translate(⑹00px,0););

3.接下来设定电脑鼠标移入时(:hover)的款式  一样是运用transform   使內容左移的间距为0(transform:translate(0,0))这里用到transition-delay特性关键是以便让3个內容各自延迟时间不一样的時间 产生先后进到的实际效果。  

/*照片左移 文本先后进到*/
.test1{background: #fff;}
.test1 figcaption p{background: #fff;color:#333;margin:5px 0;transform: translate(⑹00px,0px);}
.test1 figcaption{padding:20px}
.test1:hover figcaption p{transform: translate(0,0);}

.test1 figcaption p:nth-of-type(1){transition-delay: 0.2s;}
.test1 figcaption p:nth-of-type(2){transition-delay: 0.3s;}
.test1 figcaption p:nth-of-type(3){transition-delay: 0.4s;}
.test1:hover img{transform: translate(⑸px,0);}

        <!--挪动-->
        <figure class="test1">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>照片题目</h2>
                <p>这里是照片的有关叙述內容</p>
                <p>这里是照片的有关叙述內容</p>
                <p>这里是照片的有关叙述內容</p>
            </figcaption>
        </figure>

demo02 表明:电脑鼠标移入后 照片变模糊不清 矩形框从照片外转动进到照片中特定部位 文本从右边飞过来 并慢慢显示信息

    

流程:

1.写好html编码并根据css设定好內容和照片的原始款式(矩形框文本都在照片上);

2.将矩形框根据transform特性位移到上方 看不见为止 并设定转动的角度为0  transform: translate(0,⑷00px) rotate(0deg);

3.接下来设定电脑鼠标移入时(:hover)的款式 位移设定为0并转动360度  transform: translate(0,0) rotate(360deg);

/*转动*/
.test2{background: #ccc;}
.test2 figcaption{width: 100%;height: 100%;}
.test2 figcaption h2{margin:15% 0 0 15%}
.test2 figcaption p{margin-left:15%;transform: translate(50px,0);opacity: 0;}
.test2 figcaption div{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,⑷00px) rotate(0deg);}
.test2:hover figcaption div{transform: translate(0,0) rotate(360deg);}
.test2:hover img{opacity: 0.6;}
.test2:hover figcaption p{transform: translate(0,0);opacity: 1;}

 
        <!--转动-->
        <figure class="test2">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>照片题目</h2>
                <p>飞来飞去</p>


                <div></div>
            </figcaption>
        </figure>

demo03 表明:电脑鼠标移入后 歪曲的字一切正常显示信息(由于事例中歪曲了90度 因此视觉效果上看不见文本)

      

流程:

1.写好html编码并根据css设定好內容和照片的原始款式;

2.将文本內容歪曲90度 transform: skew(90deg);

3.接下来设定电脑鼠标移入时(:hover)的款式 将文本內容歪曲0度 transform: skew(0);

/*歪曲*/
.test3{background:#CCCCCC;}
.test3 figcaption{position: absolute;left:15%;top:15%}
.test3 figcaption h2{transform: skew(90deg);}
.test3 figcaption p{transform: skew(90deg);}
.test3:hover img{opacity: 0.6;}
.test3:hover figcaption h2{transform: skew(0);}
.test3:hover figcaption p{transform: skew(0);}
        <!--歪曲-->
        <figure class="test3">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>照片题目</h2>
                <p>这里是照片的有关叙述內容</p>
            </figcaption>
        </figure>

demo04 表明:电脑鼠标移入后 矩形框和文本显示信息并变小  照片也变小

 

流程:

1.写好html编码并根据css设定好內容和照片的原始款式

2.将內容变大1.2倍 这是以便电脑鼠标移入后变大倍数变为1时产生变小的实际效果 內容的全透明度设定为0;

3.接下来设定电脑鼠标移入时(:hover)的款式 內容变大倍数变为1也便是初始尺寸 照片变小  全透明度都变为1;

/*放缩*/
.test4{background: #000;}
.test4 figcaption{width: 100%;height: 100%;}
.test4 figcaption h2{margin:15% 0 0 15%;opacity:0;transform: scale(1.2);}
.test4 figcaption p{margin-left:15%;opacity:0;transform: scale(1.2);}
.test4 figcaption div{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: scale(1.2,1.2);opacity: 0;}
.test4:hover figcaption div{transform: scale(1,1);opacity: 1;}
.test4:hover img{opacity: 0.6;transform: scale(0.9,0.9);}
.test4:hover figcaption h2{opacity: 1;transform: scale(1);}
.test4:hover figcaption p{opacity: 1;transform: scale(1);}

 

        <!--放缩-->
        <figure class="test4">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>照片题目</h2>
                <p>这里是照片的有关叙述內容</p>
                <div></div>
            </figcaption>
        </figure>

demo05 表明:电脑鼠标移入后 內容显示信息 并出現井字格

  

流程:

1.写好html编码并根据css设定好內容和照片的原始款式(井字便是两个矩形框的重合)

2.将两个矩形框变小0.8 并设定全透明度为0 內容也设定全透明度为0;

3.接下来设定电脑鼠标移入时(:hover)的款式 內容全透明度设定为1 设定矩形框放缩为1  这里运用到transition特性 关键是以便变小变大全过程慢慢转变;

/*井字格*/
.test5{background: #000;}
.test5 figcaption{width: 100%;height: 100%;}
.test5 figcaption h2{margin: 15% 0 0 18%;opacity: 0;}
.test5 figcaption p{margin-left: 18%;opacity: 0;}
.test5 figcaption div{position: absolute;}
.test5 figcaption div.div01{width: 80%;height:70%;border-top: 2px solid #ccc;border-bottom: 2px solid #ccc;left:10%;top:15%;opacity: 0;transform: scale(0.8);}
.test5 figcaption div.div02{width: 70%;height:80%;border-left: 2px solid #ccc;border-right: 2px solid #ccc;left: 15%;top:10%;opacity: 0;transform: scale(0.8);}
.test5:hover div.div01{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover div.div02{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover figcaption p{opacity: 1;}
.test5:hover figcaption h2{opacity: 1;}
.test5:hover img{opacity: 0.6;}

        <!--井字格-->
        <figure class="test5">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>照片题目</h2>
                <p>这里是照片的有关叙述內容</p>
                <div class="div01"></div>
                <div class="div02"></div>
            </figcaption>
        </figure>

以上是几个简易的小事例,之因此用figure和figcaption标识,关键是标识的词义化,截取动态性图用到的是GifCam第1次用 挺功能强大的 很讨人喜欢 哈哈。

figure标识关键是用于要求单独的流內容(照片,图表,相片,编码等)而figcaption与figure标识配套应用,关键用于界定figure元素的题目

哦,对了,因为这几个事例写在1个html里边 因此提取下了一部分公共的款式

body,figure,figcaption,h2,p{margin:0;padding:0;font-family: "微软雅黑";}
figure{position: relative;overflow: hidden;float: left;width:33.33%;height: 350px;}
figcaption{position: absolute;top: 0;left: 0;color:#fff;}
figure img{width:101%;height: 360px;opacity: 0.8;transition: all 0.35s}
figure figcaption p,h2,span,div{transition: all 0.35s}
@media screen and (max-width: 600px) {
    figure{width: 100%;}
}
@media screen and (min-width:601px) and (max-width: 1000px) {
    figure{width: 50%;}
}
@media screen and (min-width: 1001px) {
    figure{width: 33.33%;}
}

 

总结:

之因此挑选写blog关键是以便锻练自身的表述工作能力,塑造1个总结专业知识点的好习惯性,之前看他人写的1些好的文章内容时都很羡慕嫉妒,自身却一直不知道道从何着手,直至近期投简历的情况下发现许多企业都规定注明自身的blog详细地址,因此必须逼着自身写1下物品啦!

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。