H5图像遮罩-遁地龙卷风

2024-04-09 17:14:14

(-1)写在前面

这个idea不是我的，向这位前辈致敬。我用的是chrome49。用到的图片资源在我的百度云盘里http://yun.baidu.com/share/link?shareid=1970396223&uk=1302053889

代码不能运行，说明你的浏览器版本不够高，加上对应浏览器前缀，还不行，浏览器不支持。

这个案例给了我很大启迪，从分析案例使用了什么属性、在到如何实现，最后还是看了源代码才做到一模一样。

(1)知识预备

a.transform-origin

transform-origin: x-axis y-axis z-axis;

x-axis取值为例left 、center 、right 、length 、%，默认center即50%，指的时x轴坐标原点相对于元素宽的位置

y-axis取值为例top 、center 、bottom 、length ，%默认center即50%，指的时y轴坐标原点相对于元素高的位置

个人感觉将x-axis、y-axis的取值对换会更好，就可以有这样的理解:在left画y轴，在center画x轴，那么两轴的交点就是坐标轴原点了

b.过渡与转换的结合使用

transition-duration:500ms;

transform:rotate(0deg)

元素旋转到0度用时500ms

c. #lol:hover p:nth-child(2)

当鼠标放在id为lol的元素A上时，在A所有的子元素中如果第二个是p元素则匹配成功。

d.关键代码

#lol:hover p:nth-child(2)/*鼠标放在p元素上时触发*/

{

transform:rotate(0deg)

/*等价于transform:translate(0px,0px) rotate(0deg) 不要忘记默认属性*/

/* transition-duration:500ms;transform-origin:right bottom;不写也是一样的，因为#lol p:nth-child(2)设置了*/

}

#lol p:nth-child(2)/*浏览器显示p元素时执行*/

{

transition-duration:500ms;

transform-origin:right bottom;

transform:rotate(90deg);

…

}

(2)全部代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset=utf-8>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<title>为了生活</title>

<style type="text/css">

*

{

margin:0px;

padding:0;

}

#lol

{

width:222px;

height:221px;

position:relative;

overflow:hidden;

cursor:pointer;

margin:20px auto;

border:10px #333 solid;

}

#lol:hover p:nth-child(2)

{

transform:rotate(0deg)

}

#lol p:nth-child(2)

{

width:222px;

height:221px;

position:absolute;

transition-duration:500ms;

transform-origin:right bottom;

transform:rotate(90deg);

background:orange;

top:0px;

left:0px;

}

</style>

</head

<body>

<div id="lol">

<img src="data:images/1.jpg">

<p>Hello World</p>

</div>

</body>

</html>

H5图像遮罩-遁地龙卷风相关推荐

jquery toggle方法使用出错?请看这里-遁地龙卷风
这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function(){alert(1);//1,3,5,7...},function(){a ...
JQuery data方法的使用-遁地龙卷风
(-1)说明我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本测试例子用到的showMessage ...
mysql输出学生和考试信息_mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风...
文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-----+----- ...
html 图片剪裁控件,h5图像裁剪（基于canvas）插件Image-Clip
插件描述:支持旋转,预览,裁剪框选择,压缩比例设置等 Image-Clip 图像的裁剪压缩功能包括:canvas绘制图片裁剪框选择裁剪大小旋转功能放大镜(方便旋转) 裁剪功能缩放.压缩功能( ...
H5页面遮罩弹框下层还能滚动的问题
在页面上显示一个遮罩层,这是非常常见的操作,在遮罩层上操作,下层也会默认跟随手指滚动此处就是要在显示遮罩的时候禁止下层滚动. 首先设置一个全局变量 var canScroll=false; 页面初始 ...
h5/web遮罩弹窗
前提下载一个js文件引入哦! <!DOCTYPE html> <html><head><meta charset="UTF-8">& ...
jQuery-H5-css3转盘抽奖-遁地龙卷风
(-1)写在前面这个idea不是我的,首先向这位前辈致敬. 我用的是chrome49, jquery3.0. 完整的程序案例在我的百度云盘http://pan.baidu.com/s/1jI2QSn ...
java炫酷龙卷风源码_Java-使用二叉树实现快速排序-遁地龙卷风
(-1)写在前面在一次面试中被问及快速排序,回来后又看了一次以前做过的案例,说来惭愧,时至今日还需要读好长时间,才能明白自己代码的意思,主要是缺少注释和图解,深有感慨,决定好好记录一下. 之所以使用 ...
Jquery实现大于等于且小于等于-遁地龙卷风
jq 的slice方法能更好实现做合并单元格的功能,如下图所示为了达到上述效果,需要先获取包括起始行和结束行的tr $("tr:eq("+index_startTr+" ...
龙卷风java_程序设计-理解java继承-遁地龙卷风
(0)写在前面编程和现实世界是息息相关的,你是如何理解现实世界中的继承呢? 继承在编程中应理解为:对父类资源(本文只讨论方法)的使用,父类方法只提供类基本的功能,父类方法之间不存在调用关系. (1) ...

最新文章

热门文章