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


Posted in HTML / CSS onNovember 06, 2017

第一次尝试着写博客,不好或者有误的地方希望大家多多指正呐,今天主要写的是关于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>

demo03 说明:鼠标移入后 扭曲的字正常显示(因为例子中扭曲了90度 所以视觉上看不到文字)

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

步骤:

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 说明:鼠标移入后 矩形和文字显示并缩小  图片也缩小

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

步骤:

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 说明:鼠标移入后 内容显示 并出现井字格

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

步骤:

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第一次用 挺好用的 很可爱 哈哈。

figure标签主要是用于规定独立的流内容(图片,图表,照片,代码等)而figcaption与figure标签配套使用,主要用于定义figure元素的标题

哦,对了,由于这几个例子写在一个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%;}
}

总结:

之所以选择写博客主要是为了锻炼自己的表达能力,培养一个总结知识点的好习惯,以前看别人写的一些好的文章时都很羡慕,自己却总是不知道从何下手,直到最近投简历的时候发现很多公司都要求注明自己的博客地址,所以有必要逼着自己写一下东西啦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
CSS link与@import的区别和用法解析
May 07 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 #HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 #HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 #HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 #HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 #HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 #HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 #HTML / CSS
You might like
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
Python实现的下载网页源码功能示例
2017/06/13 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python opencv调用笔记本摄像头
2019/08/28 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
MySQL面试题
2014/01/12 面试题
企业安全生产标语
2014/06/06 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
社区党务工作总结2015
2015/05/19 职场文书
大学校园招聘会感想
2015/08/10 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
python办公自动化之excel的操作
2021/05/23 Python
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis