html让图片中心旋转,使用CSS让图片旋转起来 |
您所在的位置:网站首页 › html怎么让图片自己动 › html让图片中心旋转,使用CSS让图片旋转起来 |
在给 程序员 的设计学习指南上看到一个图标在不停的旋转,觉得很好玩。于是在好奇心的驱使下,整理出网页中使用.css文件。照葫芦画瓢的弄出大概的效果。 使用CSS实现图片的旋转,有三部分组成:1个HTML文件(Index.html)、1个CSS文件(spin.css)和几张图片。 首先,spin.css文件 .fa{ display:inline-block; font:normal normal normal 14px/1 FontAwesome; font-size:inherit; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale } .fa-spin{ -webkit-animation:fa-spin 2s infinite linear; animation:fa-spin 2s infinite linear } @-webkit-keyframes fa-spin{ 0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100%{ -webkit-transform:rotate(359deg); transform:rotate(359deg) } } @keyframes fa-spin{ 0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100%{ -webkit-transform:rotate(359deg); transform:rotate(359deg) } } .fa-rotate-90{ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg) } .fa-rotate-180{ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg) } .fa-rotate-270{ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg) } 接下来是index.html文件 最后是张图片 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |