首页 > 程序开发 > web前端 > HTML 5 >

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

2018-06-02

HTML5中的伪类选择器实现一张图片翻转特效(代码实例)。效果示意图:图中,我实现的效果是 当鼠标悬停在图片上面时,图片将围绕下边界旋转90度

效果示意图

\

图中,我实现的效果是 当鼠标悬停在图片上面时,图片将围绕下边界旋转90度

代码示例:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style>  
            *{  
                margin: 0;  
                padding: 0;  
            }  
            div{  
                width: 300px;  
                height: 350px;  
                margin: 0 auto;  
                /*设置盒子居中显示*/  
                background-color: skyblue;  
                padding-top: 150px;  
                /*内边距 (div标签)*/  
                /*border: 1px solid black;*/  
                text-align: center;  
                perspective: 350px;  
            }  
            div img{  
                transition: all 3s;  
                transform-origin: bottom;  
            }  
            div img:hover{  
                transform:rotateX(90deg) ;  
            }  
        </style>  
    </head>  
    <body>  
        <div>  
            <img src="img/angel2.jpeg" width="250px" height="350px"/>  
        </div>  
    </body>  
</html>  

补充知识点:

1.伪类选择器相关:

hover 伪类选择器:

	hover这个伪类选择器除了可以用在a标签上,还可以用在其他的任何标签上面
	格式:div:hover{}
	当鼠标悬停在标签上时所要执行的操作
	过渡模块:
	   <style>中:
		在<div>标签内添加:
		transition-property :告诉系统哪个属性需要重新过渡
		属性:width,height,color,background-color....
		格式:transition-property: 属性(width....);
		transition-duration: 告诉系统该过渡的持续时间为多少
		格式:transitino-duration: 5s;
		transition-delay  :鼠标悬停几秒后开始变化
		格式:transition-delay:1s;


	监听哪一个就在哪一个后面加:hover
	<style>标签中添加 : div:hover{
				属性:要改变的样子
					
				}
		            <div>里面的简写格式:
				transition:第一个过渡属性 过渡时长 运动速度 延时时长 , 
				第二个过渡属性 过渡时长 运动速度 延时时长;
				(也可以省略后面的两个参数,只要编写前面两个参数就满足过渡三要素)
				所有属性均为一个过渡效果: transition : all 5s;
2.2D 模型转换:

2D 转换模块:
	格式:
		transform: rotateZ(45deg); //绕Z轴旋转45度
				 X Y..
		transform: scale(1.5);   //将其在原来的基础上面放大为1.5被
		
		设置旋转中心: 
			div img{
				transform-origin:center bottom;//      此处设置为围绕底部旋转
			}
	转换轴向:默认情况下都是围绕z轴进行旋转;
	透视属性:
		格式:
		注意: 透视属性必须添加到当前需要呈现的元素的父元素上面:
		   在<style>
			<ul>中添加 perspective: XXXpx;//数值越小 效果越明显
			li的父元素是ul 标签

		产生近大远小的效果(立体感)
相关文章
最新文章
热点推荐