1、新建html文档。
2、书写hmtl代码。<div id="effects"> <h2>2D Transforms</h2> <a rel="grow" class="button grow">Grow</a> <a rel="shrink" class="button shrink">Shrink</a></div>
3、初始化css代码。<style>body { margin: 0 auto; max-w足毂忍珩idth: 800px; padding: 20px; font-family: sans-serif; color: #333; line-height: 140%; }img { border: none; }.aligncenter { text-align: center; }.tutorial { display: block; font-size: .8em; }.tutorial:hover { text-decoration: none; }.intro { max-width: 680px; margin: 0 auto; }.button.cta { display: inline-block; position: relative; margin: 2em 0 1em 0; padding: 1em; background: #2098D1; border: none; text-decoration: none; font-weight: 700; color: white; }#effects { margin-top: 5em; }h1 { text-align: center; font-size: 4em; }h2 { margin-top: 2em; }</style>
4、书写css代码。<style>.grow { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }.grow:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }.shrink { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }.shrink:hover { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }</style>
5、代码整体结构。
6、查看效果。动画效果需要鼠标放上去才看得到效果。
