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

来源：互联网发布：淘宝多功能油炸锅编辑：程序博客网时间：2024/04/29 04:57
<!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>
0 0