您的位置：首页 > Web前端 > CSS

css3动画图片变形，自定义字体

2015-09-23 00:28 615 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.rotatedElement
{
-ms-transform:scale(1.5) scaleX(10px) skew(10deg);
-webkit-transform: scale(1.5) scaleX(10px) skew(10deg);
transform: scale(1.5) scaleX(10px) skew(10deg);

-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.gallery
{
margin: 0px 30px 0px 30px;
background: #d8eefe;
padding: 10px;
}
.gallery img
{
margin:5px;
padding: 5px;
width: 75px;
border: solid 1px black;
background: white;
-ms-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
}
.gallery img:hover
{
-ms-transform: scale(2.2) rotate(10deg);
-webkit-transform: scale(2.2) rotate(10deg);
transform: scale(2.2) rotate(10deg);
}
@font-face {
font-family:'3Dumb';
/*src: url('3Dumb.ttf');*/
src:url('BlackCasper.ttf');
src:local('moa'),
url('BlackCasper.ttf') format('truetype');
}
h1{
font-family:'3Dumb';
}

</style>
</head>
<body>
<h1>Cute Animal Page</h1>
<div class="gallery">
<img src="http://prosetech.com/html5/Chapter%2006/bunny.jpg">
<img src="http://prosetech.com/html5/Chapter%2006/cat.jpg">
<img src="http://prosetech.com/html5/Chapter%2006/dog.jpg">
<img src="http://prosetech.com/html5/Chapter%2006/platypus.jpg">
<img src="http://prosetech.com/html5/Chapter%2006/goose.jpg">
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3

相关文章推荐

新的分享

章节导航