Nice+css3六角型旋转效果
2015-04-03 10:26:34 -0400
复制代码:
<style type="text/css"> #Nice_demo,#Nice_demo * { margin:0; padding:0; } #Nice_demo { width:180px; margin:auto; text-align:center; transition:10s ease-out; -webkit-transition:10s ease-out; -moz-transition:10s ease-out; -o-transition:10s ease-out; } #Nice_demo:hover { transform:rotate(2160deg); -webkit-transform:rotate(2160deg); -moz-transform:rotate(2160deg); -o-transform:rotate(2160deg); } #Nice_demo:hover>#Nice_box_demo,#Nice_demo:hover>#Nice_box_demo>#Nice_one,#Nice_demo:hover>#Nice_box_demo>#Nice_two { background:rgba(108,188,208,0.4); } #Nice_box_demo,#Nice_box_demo>#Nice_one,#Nice_box_demo>#Nice_two { width:180px; height:105px; background:rgba(68,68,68,0.6); transition:all 10s ease; -webkit-transition:all 10s ease; -moz-transition:all 10s ease; -o-transition:all 10s ease; } #Nice_box_demo { position:relative; } #Nice_box_demo>#Nice_one,#Nice_box_demo>#Nice_two { position:absolute; top:0; left:0; } #Nice_box_demo>#Nice_one { transform:rotate(60deg); -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); z-index:1; } #Nice_box_demo>#Nice_two { transform:rotate(-60deg); -webkit-transform:rotate(-60deg); -moz-transform:rotate(-60deg); -o-transform:rotate(-60deg); z-index:2; } </style> <div id="Nice_demo"> <div id="Nice_box_demo"> <div id="Nice_one"></div> <div id="Nice_two"></div> </div> </div>
CSS3六角型旋转效果.html
(1.89 KiB) |
Read
|
Meta
|
+
Word Count: 1,906
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N