必威体育Betway必威体育官网
当前位置:首页 > IT技术

变换元素transform和过渡元素transition混合使用

时间:2019-08-12 14:10:00来源:IT技术作者:seo实验室小编阅读:62次「手机版」
 

过渡元素

通过变换元素transform和过渡元素的混合使用,可以做出许多好看的动画效果。下面我们通过一个简单的例子来介绍一下。在看下面的例子之前,强烈建议看一下我的下面两个文章

过渡元素transition的那些事儿  http://blog.csdn.net/m0_37568521/article/details/74091830

变换元素transform的那些事儿  http://blog.csdn.net/m0_37568521/article/details/75093512

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.pic{
			width: 400px;
			margin:80px auto;
			background: #d8effe;
			padding: 10px;
		}
		.pic img{
			margin:5px;
			padding: 5px;
			width: 135px;
			border:1px solid black;
			background: white;
			transition: all 1s;
		}
		.pic img:hover{
			transform: scale(2.2) rotate(20deg);
		}

	</style>
</head>
<body>
	<p class="pic">
		<img src="one.jpg">
		<img src="two.jpg">
		<img src="three.jpg">
		<img src="four.jpg">
		<img src="five.jpg">
	</p>
</body>
</html>

看过前面的两篇文章,这个代码肯定是非常容易理解的,就不过多的解释。效果图因为是动态的,我只能够截取两张图片看看。

变换前

变换后

相关阅读

MediaInfo使用实例(1)

#include "stdafx.h"#include <iostream>#include <iomanip>#include "MediaInfoDLL.h" //Dynamicly-loaded library (.dll or .s

如何使用一个手机号注册两个微信号!

大家都知道,现在的微信更新以后手机就不能解绑了,只能换绑,有很多时候我们需要两个微信号,特别是做销售和做微商的朋友,难道我们必须再

MentoHUST的使用教程

本文是MentoHUST的使用教程,旨在介绍MentoHUST怎么用,MentoHUST是一个支持Windows、Linux、Mac OS下锐捷认证的程序(附带支持赛尔认

nutz使用

一:POM依赖<dependency> <groupId>org.nutz</groupId> <artifactId>nutz</artifactId> <version>1.r.56</version> </depend

SecureCRT绿色破解版(解压即可使用、无需积分)

百度网盘提取地址: 链接: https://pan.baidu.com/s/1-sdPFBGRQGforBDjdZQTBA 提取码: pdhn

分享到:

栏目导航

推荐阅读

热门阅读