borderとtransitionを使ったエフェクト ksk1015 Follow 2011-10-07 03:20:24 License: MIT License Fork139 Fav118 View65712 ブラウザによってだいぶ違いますが、 solidのボーダーは安定した効果 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 12 lines CSS 64 lines ブラウザによってだいぶ違いますが、 solidのボーダーは安定した効果 borderとtransitionを使ったエフェクト <a class="one" href="#"></a> <a class="two" href="#"></a> <a class="san" href="#"></a> <br> <a class="yon" href="#"></a> <a class="goo" href="#"></a> <a class="rok" href="#"></a> <a class="ryk" href="#"></a> <br> <a class="x7" href="#"></a> <a class="x8" href="#"></a> <a class="x9" href="#"></a> borderとtransitionを使ったエフェクト a { display:inline-block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100px; height:100px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; background-image:url(data:image/gif;base64,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); background-repeat:no-repeat; background-origin:border-box; background-position:50% 50%; border-width:50px; border-color:rgba(0,0,0,0); -webkit-transition:0.2s ease; -moz-transition:0.2s ease; -ms-transition:0.2s ease; -o-transition:0.2s ease; transition:0.2s ease; } a:hover { border-width:0; border-color:rgba(0,0,0,0.5); -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -ms-transition-duration:0.5s; -o-transition-duration:0.5s; transition-duration:0.5s; } a.one {border-style:solid;} a.two {border-style:dashed;} a.san {border-style:dotted;} a.yon {border:50px solid rgba(0,0,0,0.7);} a.goo {border:50px dashed rgba(0,0,0,0.7);} a.rok {border:50px dotted rgba(0,0,0,0.7);} a.ryk {border:50px double rgba(0,0,0,0.7);} a.yon:hover {border: 1px solid rgba(0,0,0,0.7);} a.goo:hover {border: 1px dashed rgba(0,0,0,0.7);} a.rok:hover {border: 1px dotted rgba(0,0,0,0.7);} a.ryk:hover {border: 1px double rgba(0,0,0,0.7);} a.x7, a.x8, a.x9 { -webkit-border-radius:0; border-radius:0; } a.x7 {border:50px solid rgba(0,0,0,0.7);} a.x8 {border:50px dashed rgba(0,0,0,0.7);} a.x9 {border:50px dotted rgba(0,0,0,0.7);} a.x7:hover {border: 1px solid rgba(0,0,0,0.7);} a.x8:hover {border: 1px dashed rgba(0,0,0,0.7);} a.x9:hover {border: 1px dotted rgba(0,0,0,0.7);} ブラウザによってだいぶ違いますが、 solidのボーダーは安定した効果 <a class="one" href="#"></a> <a class="two" href="#"></a> <a class="san" href="#"></a> <br> <a class="yon" href="#"></a> <a class="goo" href="#"></a> <a class="rok" href="#"></a> <a class="ryk" href="#"></a> <br> <a class="x7" href="#"></a> <a class="x8" href="#"></a> <a class="x9" href="#"></a> a { display:inline-block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100px; height:100px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; background-image:url(data:image/gif;base64,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); background-repeat:no-repeat; background-origin:border-box; background-position:50% 50%; border-width:50px; border-color:rgba(0,0,0,0); -webkit-transition:0.2s ease; -moz-transition:0.2s ease; -ms-transition:0.2s ease; -o-transition:0.2s ease; transition:0.2s ease; } a:hover { border-width:0; border-color:rgba(0,0,0,0.5); -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -ms-transition-duration:0.5s; -o-transition-duration:0.5s; transition-duration:0.5s; } a.one {border-style:solid;} a.two {border-style:dashed;} a.san {border-style:dotted;} a.yon {border:50px solid rgba(0,0,0,0.7);} a.goo {border:50px dashed rgba(0,0,0,0.7);} a.rok {border:50px dotted rgba(0,0,0,0.7);} a.ryk {border:50px double rgba(0,0,0,0.7);} a.yon:hover {border: 1px solid rgba(0,0,0,0.7);} a.goo:hover {border: 1px dashed rgba(0,0,0,0.7);} a.rok:hover {border: 1px dotted rgba(0,0,0,0.7);} a.ryk:hover {border: 1px double rgba(0,0,0,0.7);} a.x7, a.x8, a.x9 { -webkit-border-radius:0; border-radius:0; } a.x7 {border:50px solid rgba(0,0,0,0.7);} a.x8 {border:50px dashed rgba(0,0,0,0.7);} a.x9 {border:50px dotted rgba(0,0,0,0.7);} a.x7:hover {border: 1px solid rgba(0,0,0,0.7);} a.x8:hover {border: 1px dashed rgba(0,0,0,0.7);} a.x9:hover {border: 1px dotted rgba(0,0,0,0.7);} use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/cLLl/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/ksk1015/cLLl" title="borderとtransitionを使ったエフェクト">borderとtransitionを使ったエフェクト - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter Tags animation art&design border button css css3 effect transitions かわいい エフェクト Favorite by iyaou chamadi macevelly remusjuncu Eiji.Maikuma.. fukusuke8gou.. 0i0 wahooneko kyosuke.w Zhi.Quan.Sze.. neetchama timothyqd S.Falahati is178 nsyan khoronus yosukenakada.. gurumi SOU1 kazurasaka saori_96 od3n Pagebakers spygame taqumi Joshua.Pheni.. mhaidarh film-instant.. set snowsunny110.. ckazu kubosho_ washinokanto.. Fat_Squirrel.. snaf sou_sk fantasista matthewmcvic.. juanolon boltforge danilomatos indyaner Omar12 hakim edo_m18 yd_niku TheSisb NatsukicKoha.. dentyu No_1026 FTMSuperfly demouth aaaabbbb 8th713 esimov pypupypa negic fingaholic turusuke GeckoTang calmbooks xl1 ethertank smallwind191.. sapphire_al2.. tikamoton gaina kleinschmidt.. iyaou: borderとtransitionを使ったエフェクト macevelly: cool ok1ku: buttoncss3effect corleonis: buttonanimation redhot-aky: css3 umanotuka: 良いですね！！ ebiallergy: no.1 kazu69: cssbuttonanimation Shingo_Fukuy..: css3transitions nakamura001: CSSでマウスオーバー時のエフェクト fallen: animation LorenzoNuvol..: animationborderbuttonnice yuya: css3border rizky: css3bordertransitionscss wiederspielw..: animationtransitionscss3 foldi: animationbordercss3Brilliant! jeffreylo: Yes! tkpea: css3animationtransitionsかわいいこれ良いですね vincicat: transitionscss3Amazing. fanatic_web: css3 a440hlz: css3effecttransitions ezabba: bordercss3transitionsbordi animati poperotico: (y) alanlee9898: css3Nice work! ndruger: transitions dmitri.smirn..: animationborder sladix: animationbordercss3effecttransitionsCSS3 effet items loranger: animationbordercsscss3transitions jnaO: sweet al-room: css nackey: CSS3animation kjunichi: css3 stepbros: css3effectanimation hced: bordereffectBorder transition vitaLee: css3effecttransitionsborder Liban: csscss3borderanimationかわいい volkan: Animationcss3effectborderborder transitions simurai: animationbordercss3So simple.. but great effect. oriol.tf: animationbordercsseffectcss border transition tsmallfield: おもしろい！ altmk: エフェクト kudakurage: CSS3 mehran: css3animationeffectcssbutton ginpei: animationcss3かわいいこれは可愛い。 JoseGerman: Like! siro_0x0: エフェクトcool!! chicken-taco..: bordercsseffectbuttonnice button effects nibushibu: cssbordereffectグッドアイデア！ bjesus: so awesome norahiko: なにこれかっこいい Forked sort new page view favorite forked forked: borderとtransitionを使ったエ.. remusjuncu 00 13views 2/12/64 bordes animados en css3 puesjuancho 01 101views 2/12/64 animation button cool css3 effect forked: borderとtransitionを使ったエ.. sakagen31 00 17views 2/12/64 forked: borderとtransitionを使ったエ.. sakagen31 00 17views 2/12/64 1 2 3 4 5 6 7 8 9 10NEXT>>
