HTML5中的伪类选择器实现一张图片翻转特效（代码实例）
程序员文章站
2023-02-20 08:40:41
效果示意图
图中，我实现的效果是 当鼠标悬停在图片上面时，图片将围绕下边界旋转90度
代码示例:
&l...
效果示意图
图中，我实现的效果是 当鼠标悬停在图片上面时，图片将围绕下边界旋转90度
代码示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
p{
width: 300px;
height: 350px;
margin: 0 auto;
/*设置盒子居中显示*/
background-color: skyblue;
padding-top: 150px;
/*内边距 (p标签)*/
/*border: 1px solid black;*/
text-align: center;
perspective: 350px;
}
p img{
transition: all 3s;
transform-origin: bottom;
}
p img:hover{
transform:rotatex(90deg) ;
}
</style>
</head>
<body>
<p>
<img src="img/angel2.jpeg" width="250px" height="350px"/>
</p>
</body>
</html>
补充知识点:
1.伪类选择器相关:
hover 伪类选择器:
hover这个伪类选择器除了可以用在a标签上，还可以用在其他的任何标签上面
格式:p:hover{}
当鼠标悬停在标签上时所要执行的操作
过渡模块:
<style>中:
在<p>标签内添加:
transition-property ：告诉系统哪个属性需要重新过渡
属性:width,height,color,background-color....
格式:transition-property: 属性(width....);
transition-duration: 告诉系统该过渡的持续时间为多少
格式:transitino-duration: 5s;
transition-delay :鼠标悬停几秒后开始变化
格式:transition-delay:1s;
监听哪一个就在哪一个后面加:hover
<style>标签中添加 : p:hover{
属性:要改变的样子
}
<p>里面的简写格式:
transition:第一个过渡属性 过渡时长 运动速度 延时时长 ,
第二个过渡属性 过渡时长 运动速度 延时时长;
(也可以省略后面的两个参数,只要编写前面两个参数就满足过渡三要素)
所有属性均为一个过渡效果: transition : all 5s;
2.2d 模型转换:
2d 转换模块:
格式:
transform: rotatez(45deg); //绕z轴旋转45度
x y..
transform: scale(1.5); //将其在原来的基础上面放大为1.5被
设置旋转中心:
p img{
transform-origin:center bottom;// 此处设置为围绕底部旋转
}
转换轴向:默认情况下都是围绕z轴进行旋转;
透视属性:
格式:
注意: 透视属性必须添加到当前需要呈现的元素的父元素上面:
在<style>
<ul>中添加 perspective: xxxpx;//数值越小 效果越明显
li的父元素是ul 标签
产生近大远小的效果(立体感) 上一篇： H5实现禁止弹出手机自带的软键盘控制键盘输入手机号的方法
下一篇： 渔民兄弟、笨孩子和无赖笑光棍