欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5中的伪类选择器实现一张图片翻转特效(代码实例)

程序员文章站 2022-05-27 17:08:19
效果示意图 图中,我实现的效果是 当鼠标悬停在图片上面时,图片将围绕下边界旋转90度 代码示例: &l...

效果示意图

HTML5中的伪类选择器实现一张图片翻转特效(代码实例)

图中,我实现的效果是 当鼠标悬停在图片上面时,图片将围绕下边界旋转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 标签

		产生近大远小的效果(立体感)