diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/README.md" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/README.md" new file mode 100644 index 0000000..a91635c --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/README.md" @@ -0,0 +1,15 @@ +Border Animation Effect with SVG +========= + +Recreating the effect seen on carlphilippebrenner.com with SVG + +[Article on Codrops](http://tympanus.net/codrops/?p=18551) + +[Demo](http://tympanus.net/Tutorials/BorderAnimationSVG/) + +Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". + +Read more here: [License](http://tympanus.net/codrops/licensing/) + + +[© Codrops 2013](http://www.codrops.com) \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/css/component.css" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/css/component.css" new file mode 100644 index 0000000..313fd57 --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/css/component.css" @@ -0,0 +1,239 @@ +.box { + width: 300px; + height: 460px; + position: relative; + background: rgba(255,255,255,1); + display: inline-block; + margin: 0 10px; + cursor: pointer; + color: #2c3e50; + box-shadow: inset 0 0 0 3px #2c3e50; + -webkit-transition: background 0.4s 0.5s; + transition: background 0.4s 0.5s; +} + +.box:hover { + background: rgba(255,255,255,0); + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + +.box h3 { + font-family: "Ruthie", cursive; + font-size: 180px; + line-height: 370px; + margin: 0; + font-weight: 400; + width: 100%; +} + +.box span { + display: block; + font-weight: 400; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 13px; + padding: 5px; +} + +.box h3, +.box span { + -webkit-transition: color 0.4s 0.5s; + transition: color 0.4s 0.5s; +} + +.box:hover h3, +.box:hover span { + color: #fff; + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + +.box svg { + position: absolute; + top: 0; + left: 0; +} + +.box svg line { + stroke-width: 3; + stroke: #ecf0f1; + fill: none; + -webkit-transition: all .8s ease-in-out; + transition: all .8s ease-in-out; +} + +.box:hover svg line { + -webkit-transition-delay: 0.1s; + transition-delay: 0.1s; +} + +.box svg line.top, +.box svg line.bottom { + stroke-dasharray: 330 240; +} + +.box svg line.left, +.box svg line.right { + stroke-dasharray: 490 400; +} + +.box:hover svg line.top { + -webkit-transform: translateX(-600px); + transform: translateX(-600px); +} + +.box:hover svg line.bottom { + -webkit-transform: translateX(600px); + transform: translateX(600px); +} + +.box:hover svg line.left { + -webkit-transform: translateY(920px); + transform: translateY(920px); +} + +.box:hover svg line.right { + -webkit-transform: translateY(-920px); + transform: translateY(-920px); +} + +/* Alternatives */ + +/* Color */ +.demo-2 .box { + box-shadow: inset 0 0 0 10px #2c3e50; +} + +.demo-2 .box:hover h3, +.demo-2 .box:hover span { + color: #fe6f83; +} + +.demo-2 .box svg line { + stroke-width: 8; +} + +.demo-2 .box:hover svg line { + stroke: #fe6f83; +} + +/* Frame */ +.demo-3 .box { + background: rgba(0,0,0,0); + color: #fff; + box-shadow: none; + -webkit-transition: background 0.3s; + transition: background 0.3s; +} + +.demo-3 .box:hover { + background: rgba(0,0,0,0.4); +} + +.demo-3 .box h3, +.demo-3 .box span { + -webkit-transition: none; + transition: none; +} + +.demo-3 .box svg line { + -webkit-transition: all .5s; + transition: all .5s; +} + +.demo-3 .box:hover svg line { + stroke-width: 10; + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + +.demo-3 .box:hover svg line.top { + -webkit-transform: translateX(-300px); + transform: translateX(-300px); +} + +.demo-3 .box:hover svg line.bottom { + -webkit-transform: translateX(300px); + transform: translateX(300px); +} + +.demo-3 .box:hover svg line.left { + -webkit-transform: translateY(460px); + transform: translateY(460px); +} + +.demo-3 .box:hover svg line.right { + -webkit-transform: translateY(-460px); + transform: translateY(-460px); +} + +/* Spin */ +.demo-4 .box { + box-shadow: none; + background: rgba(0,0,0,0.4); + -webkit-transition: none; + transition: none; + color: #fff; +} + +.demo-4 .box h3, +.demo-4 .box span { + -webkit-transform: scale(0.9); + transform: scale(0.9); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transition: -webkit-transform 0.5s; + transition: transform 0.5s; +} + +.demo-4 .box:hover h3, +.demo-4 .box:hover span { + -webkit-transform: scale(1); + transform: scale(1); +} + +.demo-4 .box svg line { + stroke-width: 30; + -webkit-transition: all .4s; + transition: all .4s; +} + +.demo-4 .box:hover svg line { + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + +.demo-4 .box:hover svg line { + stroke-width: 0; +} + +.demo-4 .box svg line.top, +.demo-4 .box svg line.bottom { + stroke-dasharray: 300; +} + +.demo-4 .box svg line.left, +.demo-4 .box svg line.right { + stroke-dasharray: 460; +} + +.demo-4 .box:hover svg line.top { + -webkit-transform: translateX(-300px); + transform: translateX(-300px); +} + +.demo-4 .box:hover svg line.bottom { + -webkit-transform: translateX(300px); + transform: translateX(300px); +} + +.demo-4 .box:hover svg line.left { + -webkit-transform: translateY(460px); + transform: translateY(460px); +} + +.demo-4 .box:hover svg line.right { + -webkit-transform: translateY(-460px); + transform: translateY(-460px); +} \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/css/demo.css" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/css/demo.css" new file mode 100644 index 0000000..1418713 --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/css/demo.css" @@ -0,0 +1,157 @@ +@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Ruthie); +@font-face { + font-weight: normal; + font-style: normal; + font-family: 'codropsicons'; + src:url('../fonts/codropsicons/codropsicons.eot'); + src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), + url('../fonts/codropsicons/codropsicons.woff') format('woff'), + url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), + url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); +} + +*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } +.clearfix:before, .clearfix:after { content: ''; display: table; } +.clearfix:after { clear: both; } + +body { + background: #2c3e50; + color: #ecf0f1; + font-size: 100%; + line-height: 1.25; + font-family: 'Lato', Arial, sans-serif; +} + +a { + color: #95a5a6; + text-decoration: none; + outline: none; +} + +a:hover, a:focus { + color: #fff; +} + +.codrops-header { + margin: 0 auto; + padding: 2em; + text-align: center; +} + +.codrops-header h1 { + margin: 0; + font-weight: 300; + font-size: 2.5em; +} + +.codrops-header h1 span { + display: block; + padding: 0 0 0.6em 0.1em; + font-size: 0.6em; + opacity: 0.7; +} + +/* To Navigation Style */ +.codrops-top { + width: 100%; + text-transform: uppercase; + font-weight: 700; + font-size: 0.69em; + line-height: 2.2; +} + +.codrops-top a { + display: inline-block; + padding: 0 1em; + text-decoration: none; + letter-spacing: 1px; +} + +.codrops-top span.right { + float: right; +} + +.codrops-top span.right a { + display: block; + float: left; +} + +.codrops-icon:before { + margin: 0 4px; + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-family: 'codropsicons'; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; +} + +.codrops-icon-drop:before { + content: "\e001"; +} + +.codrops-icon-prev:before { + content: "\e004"; +} + +section { + padding: 4em 2em; + text-align: center; +} + +section h2 { + font-weight: 300; + font-size: 2em; + padding: 1em 0; +} + +.codrops-header + section { + padding-top: 1.5em; +} + +.related p { + font-size: 1.5em; +} + +.related > a { + background: rgba(0,0,0,0.05); + display: inline-block; + text-align: center; + margin: 20px 10px; + padding: 25px; + -webkit-transition: color 0.3s, background-color 0.3s; + transition: color 0.3s, background-color 0.3s; +} + +.related a:hover { + background-color: rgba(0,0,0,0.4); +} + +.related a img { + max-width: 100%; + opacity: 0.8; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; +} + +.related a:hover img, +.related a:active img { + opacity: 1; +} + +.related a h3 { + margin: 0; + padding: 0.5em 0 0.3em; + max-width: 300px; + text-align: left; +} + +@media screen and (max-width: 25em) { + + .codrops-icon span { + display: none; + } + +} \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/css/normalize.css" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/css/normalize.css" new file mode 100644 index 0000000..77feb20 --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/css/normalize.css" @@ -0,0 +1 @@ +article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.eot" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.eot" new file mode 100644 index 0000000..f46c7f4 Binary files /dev/null and "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.eot" differ diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.svg" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.svg" new file mode 100644 index 0000000..d202d21 --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.svg" @@ -0,0 +1,24 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.ttf" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.ttf" new file mode 100644 index 0000000..72bed1f Binary files /dev/null and "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.ttf" differ diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.woff" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.woff" new file mode 100644 index 0000000..1003218 Binary files /dev/null and "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/codropsicons.woff" differ diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/license.txt" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/license.txt" new file mode 100644 index 0000000..88a5cbc --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/fonts/codropsicons/license.txt" @@ -0,0 +1,6 @@ +Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ +License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL + + +Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico +License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/index.html" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/index.html" new file mode 100644 index 0000000..5104dcc --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/BorderAnimationSVG/BorderAnimationSVG/index.html" @@ -0,0 +1,183 @@ + + + + + + + Border Animation Effect with SVG + + + + + + + + + + +
+ +
+

Border Animation Effect Recreating the effect seen on carlphilippebrenner.com with SVG

+

Highly experimental, tested in Google Chrome and Firefox

+
+
+
+
+ + + + + + +

D

+ 2012 + Broccoli, Asparagus, Curry +
+
+ + + + + + +

A

+ 2013 + Arugula, Chickweed +
+
+ + + + + + +

S

+ 2014 + Strawberry, Lemon +
+
+
+
+

Color animation

+
+
+ + + + + + +

J

+ 2012 + Walnut, Pineapple +
+
+ + + + + + +

I

+ 2013 + Curry, Beancurd +
+
+ + + + + + +

C

+ 2014 + Lettuce, Asparagus +
+
+
+
+

Frame

+
+
+ + + + + + +

B

+ 2012 + Marmalade, Honey +
+
+ + + + + + +

U

+ 2013 + Beans, Chickweed +
+
+ + + + + + +

Q

+ 2014 + Broccoli, Lettuce +
+
+
+
+

Border spin

+
+
+ + + + + + +

C

+ 2012 + Berry, Spinach +
+
+ + + + + + +

A

+ 2013 + Arugula, Chickweed +
+
+ + + + + + +

J

+ 2014 + Broccoli, Asparagus, Lettuce +
+
+
+ +
+ More script and css style +: www.htmldrive.net + + + \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/css/default.css" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/css/default.css" new file mode 100644 index 0000000..59e07eb --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/css/default.css" @@ -0,0 +1,239 @@ +@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800); +@font-face { + font-family: 'icomoon'; + src:url('../fonts/icomoon.eot?rretjt'); + src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), + url('../fonts/icomoon.woff?rretjt') format('woff'), + url('../fonts/icomoon.ttf?rretjt') format('truetype'), + url('../fonts/icomoon.svg?rretjt#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body, html { font-size: 100%; padding: 0; margin: 0;} + +/* Reset */ +*, +*:after, +*:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ +.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} + +.clearfix:after { + clear: both; +} + +body{ + background: #fde3a7; + color: #404d5b; + font-weight: 500; + font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; +} +a{color: #2fa0ec;text-decoration: none;outline: none;} +a:hover,a:focus{color:#74777b;} + +.htmleaf-container{ + margin: 0 auto; + text-align: center; + overflow: hidden; +} +.htmleaf-content { + padding: 1em 0; +} + +.bgcolor-1 { background: #f0efee; } +.bgcolor-2 { background: #f9f9f9; } +.bgcolor-3 { background: #e8e8e8; }/*light grey*/ +.bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ +.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ +.bgcolor-6 { background: #2fa8ec; }/*sky blue*/ +.bgcolor-7 { background: #d0d6d6; }/*White tea*/ +.bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ +.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ +.bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ +.bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ +.bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ +/* Header */ +.htmleaf-header{ + padding: 1em 190px 1em; + letter-spacing: -1px; + text-align: center; +} +.htmleaf-header h1 { + font-weight: 600; + font-size: 2em; + line-height: 1; + margin-bottom: 0; + font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; +} +.htmleaf-header h1 span { + font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; + display: block; + font-size: 60%; + font-weight: 400; + padding: 0.8em 0 0.5em 0; + color: #fff; +} +/*nav*/ +.htmleaf-demo a{color: #1d7db1;text-decoration: none;} +.htmleaf-demo{width: 100%;padding-bottom: 1.2em;} +.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;} +.htmleaf-demo a:hover{opacity: 0.6;} +.htmleaf-demo a.current{background:#1d7db1;color: #fff; } +/* Top Navigation Style */ +.htmleaf-links { + position: relative; + display: inline-block; + white-space: nowrap; + font-size: 1.5em; + text-align: center; +} + +.htmleaf-links::after { + position: absolute; + top: 0; + left: 50%; + margin-left: -1px; + width: 2px; + height: 100%; + background: #dbdbdb; + content: ''; + -webkit-transform: rotate3d(0,0,1,22.5deg); + transform: rotate3d(0,0,1,22.5deg); +} + +.htmleaf-icon { + display: inline-block; + margin: 0.5em; + padding: 0em 0; + width: 1.5em; + text-decoration: none; +} + +.htmleaf-icon span { + display: none; +} + +.htmleaf-icon:before { + margin: 0 5px; + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-family: 'icomoon'; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; +} +/* footer */ +.htmleaf-footer{width: 100%;padding-top: 10px;} +.htmleaf-small{font-size: 0.8em;} +.center{text-align: center;} +/****/ +.related { + position: absolute; + top: 100%; + left: 0; + width: 100%; + color: #fff; + background: #333; + text-align: center; + font-size: 1.25em; + padding: 0.5em 0; + overflow: hidden; +} + +.related > a { + vertical-align: top; + width: calc(100% - 20px); + max-width: 340px; + display: inline-block; + text-align: center; + margin: 20px 10px; + padding: 25px; + font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; +} +.related a { + display: inline-block; + text-align: left; + margin: 20px auto; + padding: 10px 20px; + opacity: 0.8; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; + -webkit-backface-visibility: hidden; +} + +.related a:hover, +.related a:active { + opacity: 1; +} + +.related a img { + max-width: 100%; + opacity: 0.8; + border-radius: 4px; +} +.related a:hover img, +.related a:active img { + opacity: 1; +} +.related h3{font-family: "Microsoft YaHei", sans-serif;} +.related a h3 { + font-weight: 300; + margin-top: 0.15em; + color: #fff; +} +/* icomoon */ +.icon-htmleaf-home-outline:before { + content: "\e5000"; +} + +.icon-htmleaf-arrow-forward-outline:before { + content: "\e5001"; +} + +@media screen and (max-width: 50em) { + .htmleaf-header { + padding: 3em 10% 4em; + } + .htmleaf-header h1 { + font-size:2em; + } +} + + +@media screen and (max-width: 40em) { + .htmleaf-header h1 { + font-size: 1.5em; + } +} + +@media screen and (max-width: 30em) { + .htmleaf-header h1 { + font-size:1.2em; + } +} \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/css/normalize.css" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/css/normalize.css" new file mode 100644 index 0000000..77feb20 --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/css/normalize.css" @@ -0,0 +1 @@ +article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/css/styles.css" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/css/styles.css" new file mode 100644 index 0000000..418c658 --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/css/styles.css" @@ -0,0 +1,181 @@ +button { + background: none; + border: 0; + box-sizing: border-box; + box-shadow: inset 0 0 0 2px #f45e61; + color: #f45e61; + font-size: inherit; + font-weight: 700; + margin: 1em; + padding: 1em 2em; + text-align: center; + text-transform: capitalize; + position: relative; + vertical-align: middle; +} +button::before, button::after { + box-sizing: border-box; + content: ''; + position: absolute; + width: 100%; + height: 100%; +} + +.draw { + -webkit-transition: color 0.25s; + transition: color 0.25s; +} +.draw::before, .draw::after { + border: 2px solid transparent; + width: 0; + height: 0; +} +.draw::before { + top: 0; + left: 0; +} +.draw::after { + bottom: 0; + right: 0; +} +.draw:hover { + color: #60daaa; +} +.draw:hover::before, .draw:hover::after { + width: 100%; + height: 100%; +} +.draw:hover::before { + border-top-color: #60daaa; + border-right-color: #60daaa; + -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; + transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; +} +.draw:hover::after { + border-bottom-color: #60daaa; + border-left-color: #60daaa; + -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; + transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; +} + +.meet:hover { + color: #fbca67; +} +.meet::after { + top: 0; + left: 0; +} +.meet:hover::before { + border-top-color: #fbca67; + border-right-color: #fbca67; +} +.meet:hover::after { + border-bottom-color: #fbca67; + border-left-color: #fbca67; + -webkit-transition: height 0.25s ease-out, width 0.25s ease-out 0.25s; + transition: height 0.25s ease-out, width 0.25s ease-out 0.25s; +} + +.center:hover { + color: #6477b9; +} +.center::before, .center::after { + top: 0; + left: 0; + height: 100%; + width: 100%; + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.center::before { + border-top: 2px solid #6477b9; + border-bottom: 2px solid #6477b9; + -webkit-transform: scale3d(0, 1, 1); + transform: scale3d(0, 1, 1); +} +.center::after { + border-left: 2px solid #6477b9; + border-right: 2px solid #6477b9; + -webkit-transform: scale3d(1, 0, 1); + transform: scale3d(1, 0, 1); +} +.center:hover::before, .center:hover::after { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + -webkit-transition: -webkit-transform 0.5s; + transition: transform 0.5s; +} + +.spin { + width: 6em; + height: 6em; + padding: 0; +} +.spin:hover { + color: #0eb7da; +} +.spin::before, .spin::after { + top: 0; + left: 0; +} +.spin::before { + border: 2px solid transparent; +} +.spin:hover::before { + border-top-color: #0eb7da; + border-right-color: #0eb7da; + border-bottom-color: #0eb7da; + -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s; + transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s; +} +.spin::after { + border: 0 solid transparent; +} +.spin:hover::after { + border-top: 2px solid #0eb7da; + border-left-width: 2px; + border-right-width: 2px; + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); + -webkit-transition: -webkit-transform 0.4s linear 0s, border-left-width 0s linear 0.35s; + transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s; +} + +.circle { + border-radius: 100%; + box-shadow: none; +} +.circle::before, .circle::after { + border-radius: 100%; +} + +.thick { + color: #f45e61; +} +.thick:hover { + color: #fff; + font-weight: 700; +} +.thick::before { + border: 3em solid transparent; + z-index: -1; +} +.thick::after { + mix-blend-mode: color-dodge; + z-index: -1; +} +.thick:hover::before { + background: #f45e61; + border-top-color: #f45e61; + border-right-color: #f45e61; + border-bottom-color: #f45e61; + -webkit-transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s; + transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s; +} +.thick:hover::after { + border-top: 3em solid #f45e61; + border-left-width: 3em; + border-right-width: 3em; +} \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.eot" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.eot" new file mode 100644 index 0000000..5d067ed Binary files /dev/null and "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.eot" differ diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.svg" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.svg" new file mode 100644 index 0000000..d17e910 --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.svg" @@ -0,0 +1,12 @@ + + + +Generated by IcoMoon + + + + + + + + \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.ttf" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.ttf" new file mode 100644 index 0000000..7ffeed1 Binary files /dev/null and "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.ttf" differ diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.woff" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.woff" new file mode 100644 index 0000000..b3470d3 Binary files /dev/null and "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/fonts/icomoon.woff" differ diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/index.html" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/index.html" new file mode 100644 index 0000000..10517b0 --- /dev/null +++ "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/index.html" @@ -0,0 +1,32 @@ + + + + + + + 6种炫酷的CSS3按钮边框动画特效 + + + + + + +
+
+

6种炫酷的CSS3按钮边框动画特效 Button border animate

+ +
+
+

用鼠标滑过下面的按钮看看效果！

+ + + + + + +
+
+ + \ No newline at end of file diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/related/1.jpg" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/related/1.jpg" new file mode 100644 index 0000000..cb5baee Binary files /dev/null and "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/related/1.jpg" differ diff --git "a/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/related/2.jpg" "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/related/2.jpg" new file mode 100644 index 0000000..4ae677a Binary files /dev/null and "b/www.jugetaozi.com/\350\276\271\346\241\206\346\270\220\345\217\230/button-border(jb51.net)/button-border(jb51.net)/related/2.jpg" differ