首页 > 代码库 > CSS 几款比较常用的翻转特效
CSS 几款比较常用的翻转特效
最近一直在忙着做项目，也没有及时的整理博客，今天项目展示结束了，感觉不尽如意，还是有点小小的失落，毕竟班长在我们组，没拿到第一有点对不住他们，通过这次项目，深深的感受到了团队合作的重要性，我们组三个人的脾气都算是比较好的，但是就算这样，我也曾经气的我的小伙伴一直出去吸烟，回头想想我做的太不对了，做项目的前两天，正好是我跟某人吵架了心情超级不好，所以一直处于神游状态，后面才渐渐进入了正常的工作状态，我其实特别感谢我的小伙伴，即使我语气态度都不好，他们都一直容忍我，希望我们可以一起愉快的度过剩下的四个月。。。。下面就是项目中我用到的两款特效 都是非常简单的css特效 而且会使得网页更为美观：
第一个：360度翻转特效
<style>
* { margin:0; padding:0; } .aa { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("images/author.jpg") left top; -webkit-background-size: 220px 220px; -moz-background-size: 220px 220px; background-size: 220px 220px; -webkit-border-radius: 110px; border-radius: 110px; -webkit-transition: -webkit-transform 2s ease-out; -moz-transition: -moz-transform 2s ease-out; -o-transition: -o-transform 2s ease-out; -ms-transition: -ms-transform 2s ease-out; } .aa:hover { -webkit-transform: rotateZ(360deg); /*transform transition 以及 边角的弧度 border-radius 要考虑兼容性的问题*/ -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); }
</style> <body> <div class="aa"></div> </body>
第二种：照片墙悬挂效果
<style> body{font-family:Tahoma,Helvetica,"\5b8b\4f53","Arial",sans-serif;font-size:12px;color:#fff;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0} input,button,textarea{border:none 0} fieldset,img{border:0} table{border-collapse:collapse;border-spacing:0} ul,ol{list-style:none} a:link{text-decoration:none} a:visited{text-decoration:none} a:hover{text-decoration:none} .clear{zoom:1} .clear:after{content:"";display:block;clear:both} /* polaroids */ .polaroids{width:100%;margin:0 0 18px 10px;} .polaroids li{display: inline;} .polaroids a{background: #fff;display: inline;float:left;margin:0 0 27px 30px;width:auto;padding:10px 10px 15px;text-align: center;font-family: "Marker Felt", sans-serif;text-decoration: none;color:#333;font-size: 18px; -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25); -moz-box-shadow:0 3px 6px rgba(0,0,0,.25); -o-box-shadow:0 3px 6px rgba(0,0,0,.25); box-shadow:0 3px 6px rgba(0,0,0,.25); } .polaroids img{display: block;width:190px;margin-bottom:12px;} .polaroids a:after{content: attr(title);/* Ie8+,FF,Chorme,Safari */} .polaroids li:nth-child(even) a{ -webkit-transform:rotate(2deg); -moz-transform:rotate(2deg); -ms-transform:rotate(2deg); transform:rotate(2deg); } .polaroids li:nth-child(3n) a{ -webkit-transform:none; -moz-transform:none; -ms-transform:rotate(2deg); transform:none; position: relative; top:-5px; } .polaroids li:nth-child(5n) a{ -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); -ms-transform:rotate(5deg); transform:rotate(5deg); position: relative; right:5px; } .polaroids li:nth-child(8n) a{ position: relative; top:8px; right:5px; } .polaroids li:nth-child(11n) a{ position: relative; top:3px; right:-5px; } .polaroids li a:hover{ -webkit-transform:scale(1.25); -moz-transform:scale(1.25); -ms-transform:scale(1.25); transform:scale(1.25); -webkit-box-shadow:0 3px 6px rgba(0,0,0,.5); -moz-box-shadow:0 3px 6px rgba(0,0,0,.5); -o-box-shadow:0 3px 6px rgba(0,0,0,.5); box-shadow:0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; } .polaroids li.messy a{margin-top:-375px;margin-left:160px; -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -ms-transform:rotate(-5deg); transform:rotate(-5deg); } </style> <body> <ul class="polaroids"> <li><a href="#" title="Roelan"><img src="images/image-01.jpg" alt="Roeland!"></a></li> <li><a href="#" title="Discus"><img src="images/image-02.jpg" alt="Discussion"></a></li> <li><a href="#" title="A Hear"><img src="images/image-01.jpg" alt="A Hearty Laugh"></a></li> <li><a href="#" title="Evil M"><img src="images/image-02.jpg" alt="Evil Matt Coding"></a></li> <li><a href="#" title="Scribb"><img src="images/image-01.jpg" alt="Scribbles"></a></li> <li><a href="#" title="Amanda"><img src="images/image-02.jpg" alt="Amanda Glares..."></a></li> <li><a href="#" title="The Do"><img src="images/image-01.jpg" alt="The Dougernaut"></a></li> <li><a href="#" title="I See "><img src="images/image-02.jpg" alt="I See You!"></a></li> <li><a href="#" title="Rock H"><img src="images/image-01.jpg" alt="Rock Hard Balls"></a></li> <li><a href="#" title="Bocce "><img src="images/image-02.jpg" alt="Bocce Ball"></a></li> <li><a href="#" title="Boris "><img src="images/image-01.jpg" alt="Boris "Tatooine""></a></li> <li><a href="#" title="Sneake"><img src="images/image-02.jpg" alt="Sneakers & Stilettos"></a></li> </ul> <ul class="polaroids" style="width:280px;"> <li><a href="#" title="Roelan"><img src="images/image-01.jpg" alt="Roeland!"></a></li> <li><a href="#" title="Discus"><img src="images/image-02.jpg" alt="Discussion"></a></li> <li class="messy"><a href="#" title="A Hear"><img src="images/image-01.jpg" alt="A Hearty Laugh"></a></li> </ul> </body>
CSS 几款比较常用的翻转特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。