スポンサーサイト
2014.01.27 Monday
一定期間更新がないため広告を表示しています
- -
- -
- -
2012.06.25 Monday
div.css-testbox { margin: 10px auto; width: 300px; height: 300px; border: solid 1px #cdcdcd; } div.box-prefix { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2); -moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2); -o-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2); -ms-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2); } div.box-without-prefix { border-radius: 10px; box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2); } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg) } } @-moz-keyframes rotate { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg) } } @-o-keyframes rotate { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(360deg) } } @-ms-keyframes rotate { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg) } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg) } } /* animation-name: ;keyframeの名前 animation-duration: ;実行時間(1000sm>1s>1秒) animation-timing-function: ;easing animation-delay: ;開始時間(1000sm>1s>1秒) animation-iteration-count: ;実行回数(infinite>無限) aniamation-direction: ;反転再生(normal,alternate) */ .animation-prefix { -webkit-animation: rotate 5s ease-in-out infinite; -moz-aniamation: rotate 5s ease-in-out infinite; -o-animation: rotate 5s ease-in-out infinite; -ms-animation: rotate 5s ease-in-out infinite; } .animation-without-prefix { animation: rotate 5s ease-in-out infinite; } /* transition-property: ;cssプロパティ名(all,none,プロパティ名) transition-duration: ;実行時間(1000sm>1s>1秒) transition-timing-function: ;easing transition-delay: ;開始時間(1000sm>1s>1秒) */ .transition-prefix { width: 100%; height: 100%; -webkit-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0; -moz-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0; -o-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0; -ms-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0; } .transition-without-prefix { transition: width 500ms ease-in-out 0, height 1s ease-in-out 0; }いつも思い出せないcss3 animationとtransitionとプレフィックスのメモ。
.transition-prefix:hover { width: 80%; height: 80%; } .transition-without-prefix:hover { width: 80%; height: 80%; }
2012.06.22 Friday
<div id="scratchBox"> <div id="cover"> <span id="back" class="btn"><<back</span> <span id="next" class="btn">Loading....</span> </div> <canvas id="can"></canvas> <canvas id="can_bg"></canvas> <canvas id="can_is"></canvas> </div>scratch.js、scratch.cssがまぁベースになりまして、