HTML+CSS项目实践三：鼠标悬浮在图片上时，图片有一个简单动画效果（放大、旋转等）

知识点：CSS3 transform 属性、transition属性

实现效果：

效果说明：一排图片大小一致，当鼠标放在任一图片上时，图片放大并且旋转。

制作思路：

1、给图片添加<a>标签，利用伪类选择器实现

2、设置鼠标悬浮在a标签上时，添加动画属性。

3、主要用到属性：transform 属性（给图片进行变形），transition属性（过渡设置）

实现代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鼠标悬浮在图片上，图片有放大旋转等动画效果</title>
<style type="text/css">
	ul{
		list-style:none;
		overflow:hidden;/*ul里的子元素li全部进行浮动，会造成浮动塌陷，因此在这里进行清除*/
	}
	ul>li{/*子选择器的使用，对li标签进行样式设置*/
		float:left;/*使其浮动在同一行*/
		margin:20px;/*设置li标签之间的外边距，这里要注意如果图片有放大效果，要考虑到放大后的图片能否正常显示*/
	}
	ul>li a{
		text-decoration:none;
		display:inline-block;
	}
	ul>li a:hover{/*当鼠标悬浮在超链接上时，超链接的样式*/
		transform:scale(1.5) rotate(90deg);/*设置缩放、旋转角度*/
		transition:all 2s linear 0;/*设置动画时间*/
	}
</style>
</head>

<body>
	<ul>
    	<li><a href="#"><img src="img/delicious.png" /></a></li>
        <li><a href="#"><img src="img/facebook.png" /></a></li>
        <li><a href="#"><img src="img/rss.png" /></a></li>
        <li><a href="#"><img src="img/twitter.png" /></a></li>
        <li><a href="#"><img src="img/yahoo.png" /></a></li>
    </ul>
</body>
</html>

代码练习：试试给图片添加其他动画效果

扩充知识：

1、transform 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。

transform英文意思：改变，变形。

css3中transform主要包括以下几种：旋转(rotate)，扭曲(skew)，缩放（scale)，移动(translate)和矩阵变形matrix。

变形效果	用法	描述
旋转 rotate	transform: rotate(45deg);	共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
缩放 scale	transform: scale(0.5) 或者 transform: scale(0.5, 2);	参数表示缩放倍数；一个参数时：表示水平和垂直同时缩放该倍率两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
倾斜 skew	transform: skew(30deg) 或者 transform: skew(30deg, 30deg);	参数表示倾斜角度，单位deg 一个参数时：表示水平方向的倾斜角度；两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
移动 translate	transform: translate(45px) 或者 transform: skew(45px, 150px);	参数表示移动距离，单位px，一个参数时：表示水平方向的移动距离；两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。
基准点 transform-origin	transform-origin: 10px 10px;	在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。基准点共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；
多方法组合变形	transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);	这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate

2、过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。

过渡属性	用法	描述
CSS 属性的名称	transition-property:all;	规定应用过渡效果的 CSS 属性的名称（当指定的CSS属性改变时，过渡效果开始），其默认值为 all
完成过渡效果需要的时间	transition-duration:2s;	规定完成过渡效果需要的时间（单位为 s 或 ms），其默认值为 0s ，意味着如果不指定这个属性，将不会呈现过渡效果。
规定过渡效果的时间曲线	transition-timing-function:liner;	默认 ease ：慢速开始，中间变快，慢速结束；相当于 cubic-bezier(0.25, 0.1, 0.25, 1)。可选 liner：匀速运动；相当于 cubic-bezier(0, 0, 1, 1)。可选 ease-in：慢速开始；相当于 cubic-bezier(0.42, 0, 1, 1)。可选 ease-out：慢速结束；相当于 cubic-bezier(0, 0, 0.58, 1) 可选 ease-in-out：慢速开始，慢速结束；相当于 cubic-bezier(0.42, 0, 0.58, 1) 可选 cubic-bezier(n, n, n, n)：在 bezier 函数中自定义 0 ~ 1 之间的数值。
规定过渡效果的延迟时间	transition-delay:0;	规定过渡效果的延迟时间，默认为 0s 。
复合属性	transition: width 2s linear 0;	transition 属性可以指定多个值，当指定多个值时，中间用逗号分隔。

===================================这里是结束分割线=====================================

HTML+CSS项目实践三：鼠标悬浮在图片上时，图片有一个简单动画效果（放大、旋转等）

猜你喜欢