css3 play
<style> #div1 { width: 250px; height: 250px; border: 1px solid; color: red; padding: 8px; border-radius: 8px; box-shadow: 6px 6px 6px 0 #888; resize: both; overflow: auto; box-sizing: border-box; -moz-box-sizing: border-box; /* Firefox */ -webkit-box-sizing: border-box; /* Safari */ } #div1:hover { /*width: 300px; height: 300px;*/ padding: 28px; -webkit-transform: translate(200px, 80px) rotate(0deg); /* Safari and Chrome */ } #div1 { transform: rotate(-20deg); -ms-transform: rotate(-20deg); /*IE9*/ -moz-transform: rotate(-20deg); /* Firefox */ -webkit-transform: translate(200px, 80px) rotate(-20deg); /* Safari and Chrome */ -o-transform: rotate(-20deg); /* Opera */ } #div1 { transition: width 1s, height 1s; -moz-transition: width 1s, height 1s; /* Firefox 4 */ -webkit-transition: width 1s, height 1s, padding 1s, -webkit-transform 1s; /* Safari 和 Chrome */ -o-transition: width 1s, height 1s; /* Opera */ } #div1 { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes myfirst { from { background: red; } to { background: yellow; } } @-moz-keyframes myfirst /* Firefox */ { from { background: red; } to { background: yellow; } } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% { background: red; } 25% { background: yellow; } 50% { background: blue; } 100% { background: green; } } @-o-keyframes myfirst /* Opera */ { from { background: red; } to { background: yellow; } } </style> 11111111 <br> 22222222222 <br> 33333333333 <br> <div id="div1"> <img src="a.jpg" alt="aaaaa"> </div>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。