浅谈CSS3鼠标移入图片动态提示效果（transform）

时间：2017-11-15

第一次尝试着写博客，不好或者有误的地方希望大家多多指正呐，今天主要写的是关于CSS3的一个重要属性transform的一些用法，这些例子是之前在慕课网上学习某位老师的课程后自己敲的。

一、前言

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 说明：鼠标移入后图片左移内容依次进入

浅谈CSS3鼠标移入图片动态提示效果（transform）

步骤：

1.写好html代码并通过css设置好内容和图片的初始样式（文字内容都在图片上）；

2.将描述内容通过transform属性位移到左侧看不到为止（transform:translate(-600px,0);）；

3.接下来设置鼠标移入时(:hover)的样式同样是利用transform 使内容左移的距离为0（transform:translate(0,0)）这里用到transition-delay属性主要是为了让三个内容分别延迟不同的时间形成依次进入的效果。　　

/*图片左移 文字依次进入*/
.test1{background: #fff;}
.test1 figcaption p{background: #fff;color:#333;margin:5px 0;transform: translate(-600px,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(-5px,0);}

        <!--移动-->
        <figure class="test1">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
                <p>这里是图片的相关描述内容</p>
                <p>这里是图片的相关描述内容</p>
            </figcaption>
        </figure>

demo02 说明：鼠标移入后图片变模糊矩形从图片外旋转进入图片中指定位置文字从右侧飞过来并逐渐显示

浅谈CSS3鼠标移入图片动态提示效果（transform）　　　　

步骤：

1.写好html代码并通过css设置好内容和图片的初始样式（矩形文字都在图片上）；

2.将矩形通过transform属性位移到上方看不到为止并设置旋转的角度为0 transform: translate(0,-400px) 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,-400px) 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>

共3页:

上一篇1/3

上一篇：css3实现画半圆弧线的示例代码 下一篇：浅谈css sticker-footer 布局

浅谈CSS3鼠标移入图片动态提示效果（transform）

相关文章

最新文章