borderとtransitionを使ったエフェクト

ksk1015

2011-10-07 03:20:24

License: MIT License

Fork: 193

Fav: 241

View: 156762

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 12 lines
CSS 64 lines

ブラウザによってだいぶ違いますが、
solidのボーダーは安定した効果

borderとtransitionを使ったエフェクト

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);}

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

ksk1015

CSSerです。JSも好きです。ブラウザ上の技術全般に興味があります。詰めの甘いコード多いので参考にする際は要検証。

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/cLLl/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

yazioh

nyamogera

sutorato

walts4debby

louchoff

Kusyalu

negi02

Aki-note

matsui_a

gameQB

dorasena

akata

alw-AYs

onhime_lines

takeaki

S-ed

Pozozo

shofuku921

shuuuuuny

m.toyoda

digibot

yomenamiyama

typista

Marcio.Koji.

yasusic

kenji_is

Suto

obomemo

albert.lang

Taihei.Onish

jag

sota1235

llxin

ookami

8000hs

.slp1206

mildseven

voyage

nami.723

ryotanize

savage69kr

goyanDIDI

nia

tsubao

raabye

tjoen

kazuki.shiba

Na.Iga

Yukisuke

kimil

kroska

7me

Kobayashi.Ma

yokoh9

KiKiKi

salad_rolls

higashi34455

water.yohkan

Lorena.Lopes

tomano

shuhei

go.shirogauc

choristes

odn_chn

Maran.Emil

zaky2

mmt

superatom

T.I-T.I

caiwj13

mahyan

dosuroku

cppiii

bongiovi015

niski

Ayaka.Osaga

chapa0106

shiruco

tetsuya

Misiran

tashima.toru

yossy_morisa

Keisuke.Wata

brad426

hikipuro

syun4403

koichironish

meSte

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

washinokanto

Fat_Squirrel

snaf

sou_sk

fantasista

matthewmcvic

juanolon

boltforge

danilomatos

indyaner

Omar12

hakim

edo_m18

yd_niku

TheSisb

meqane

dentyu

No_1026

FTMSuperfly

demouth

aaaabbbb

8th713

esimov

pypupypa

negic

fingaholic

turusuke

GeckoTang

calmbooks

xl1

ethertank

smallwind191

sapphire_al2

tikamoton

gaina

kleinschmidt

ボタンエフェクト

アニメーションエフェクト transitions

tominaga:

css3

ATOM_13:

animation border css3css3エフェクト

sak1:

エフェクトかわいい

_pipo_:

3d art&design effect animation かわいい

CSS3css3

animation アニメーションエフェクト transitions リングメニュー

uusk13:

css3 エフェクトborderとtransitionを使ったエフェクト

css3 アニメーション素敵！

アニメーション effect css animation border

Awesome work!

css3 HTML5 effect button

koma_studio:

css3borderとtransitionを使ったエフェクト

これはかっこいい！

css3 アニメーションかわいいエフェクト button

D.age:

css3 animation アニメーション

KotaMatsumot:

HTML5 アニメーションかわいい

hidekism_ok:

CSS3 animation button

4848

CSS3 HTML5 エフェクトアニメーション画像

borderとtransitionを使ったエフェクト

良いですね！！

no.1

CSSでマウスオーバー時のエフェクト

animation border buttonnice

yuya:

css3 border

rizky:

css3 border transitions css

wiederspielw:

animation transitions css3

foldi:

animation border css3Brilliant!

jeffreylo:

Yes!

tkpea:

css3 animation transitions かわいいこれ良いですね

vincicat:

transitions css3Amazing.

fanatic_web:

css3

a440hlz:

css3 effect transitions

ezabba:

border css3 transitionsbordi animati

(y)

css3Nice work!

animation border css3 effect transitionsCSS3 effet items

loranger:

animation border css css3 transitions

sweet

css3 effect animation

hced:

border effectBorder transition

vitaLee:

css3 effect transitions border

Liban:

css css3 border animation かわいい

volkan:

Animation css3 effect borderborder transitions

simurai:

animation border css3So simple.. but great effect.

oriol.tf:

animation border css effectcss border transition

おもしろい！

css3 animation effect css button

ginpei:

animation css3 かわいいこれは可愛い。

JoseGerman:

Like!

siro_0x0:

エフェクトcool!!

chicken-taco:

border css effect buttonnice button effects

nibushibu:

css border effectグッドアイデア！

bjesus:

so awesome

norahiko:

なにこれかっこいい

Forked

sort by

forked: borderとtransitionを使ったエ

kondo_orange

2/12/64
- user_interface

forked: borderとtransitionを使ったエ

eakpt3l22

2/12/64
- css

forked: borderとtransitionを使ったエ

tarouda1

2/3/39
- css

forked: borderとtransitionを使ったエ

shuko.masbch

2/12/64

borderとtransitionを使ったエフェクト

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked