library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add logo svg animation

Browse Source
This commit is contained in:
Jeremy Thomas 2016-09-24 10:35:20 +01:00
parent a5a33eefe1
commit 08baf20b3e
6 changed files with 160 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/head.html
View File

@ -6,7 +6,7 @@
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="{{ site.baseurl }}/css/bulma-docs.css">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">

12
docs/_includes/svg/bulma-icon.svg
View File

@ -1,12 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="480px" height="480px" viewBox="0 0 480 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
<title>bulma-icon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bulma-icon" fill="#11E4C4">
<polygon id="Path" points="136 296 156 156 236 76 336 176 276 236 356 316 236 396"></polygon>
</g>
<g stroke="none" stroke-width="1" fill="#11E4C4" fill-rule="evenodd">
<polygon id="Path" points="136 296 156 156 236 76 336 176 276 236 356 316 236 396"></polygon>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 631 B

After

Width:  |  Height:  |  Size: 394 B

4
docs/blog.html
View File

@ -9,7 +9,7 @@ route: blog
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-8">
<div class="column is-4">
<p class="subtitle4">
{{ post.date | date_to_string }}
</p>
@ -18,6 +18,8 @@ route: blog
{{ post.title }}
</a>
</h2>
</div>
<div class="column is-8">
<div class="content">
{{ post.content }}
</div>

66
docs/bulma-docs.sass
View File

@ -77,18 +77,82 @@ $twitter: #55acee
border-color: $twitter
color: $white
@keyframes floatUp
from
box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
transform: scale(0.86)
to
box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
transform: scale(1)
@keyframes strokePath
from
stroke-dashoffset: 880
to
stroke-dashoffset: 0
@keyframes fadeIn
from
opacity: 0
transform: scale(0.86)
to
opacity: 1
transform: scale(1)
@keyframes fadeOut
0%
opacity: 1
transform: scale(0.86)
67%
opacity: 1
transform: scale(0.86)
100%
opacity: 0
transform: scale(1)
$curve: cubic-bezier(0, 0.71, 0.29, 1)
#b
animation-delay: 1s
animation-duration: 1s
animation-fill-mode: both
animation-name: floatUp
animation-timing-function: $curve
border-radius: 20px
box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
display: inline-block
height: 240px
margin-bottom: 40px
position: relative
vertical-align: top
width: 240px
svg
+overlay
display: block
height: 240px
width: 240px
&:first-child
animation-duration: 1.5s
animation-fill-mode: both
animation-name: fadeOut
animation-timing-function: $curve
g
animation-duration: 1s
animation-fill-mode: both
animation-name: strokePath
animation-timing-function: $curve
fill: none
stroke: $turquoise
stroke-dasharray: 880
stroke-width: 2px
&:last-child
animation-delay: 1s
animation-duration: 1s
animation-fill-mode: both
animation-name: fadeIn
animation-timing-function: $curve
g
fill: $turquoise
+mobile
border-radius: 10px
height: 120px

88
docs/css/bulma-docs.css
View File

@ -6310,22 +6310,108 @@ body.page-grid .column > .notification {
color: white;
}
@keyframes floatUp {
from {
box-shadow: 0 0 0 rgba(18, 18, 18, 0), 0 0 0 rgba(18, 18, 18, 0), 0 0 0 rgba(18, 18, 18, 0);
transform: scale(0.86);
}
to {
box-shadow: 0 20px 60px rgba(18, 18, 18, 0.05), 0 5px 10px rgba(18, 18, 18, 0.1), 0 1px 1px rgba(18, 18, 18, 0.2);
transform: scale(1);
}
}
@keyframes strokePath {
from {
stroke-dashoffset: 880;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.86);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: scale(0.86);
}
67% {
opacity: 1;
transform: scale(0.86);
}
100% {
opacity: 0;
transform: scale(1);
}
}
#b {
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: both;
animation-name: floatUp;
animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(18, 18, 18, 0.05), 0 5px 10px rgba(18, 18, 18, 0.1), 0 1px 1px rgba(18, 18, 18, 0.2);
display: inline-block;
height: 240px;
margin-bottom: 40px;
position: relative;
vertical-align: top;
width: 240px;
}
#b svg {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
height: 240px;
width: 240px;
}
#b svg:first-child {
animation-duration: 1.5s;
animation-fill-mode: both;
animation-name: fadeOut;
animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
}
#b svg:first-child g {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: strokePath;
animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
fill: none;
stroke: #11e4c4;
stroke-dasharray: 880;
stroke-width: 2px;
}
#b svg:last-child {
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeIn;
animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
}
#b svg:last-child g {
fill: #11e4c4;
}
@media screen and (max-width: 768px) {
#b {
border-radius: 10px;

1
docs/index.html
View File

@ -14,6 +14,7 @@ route: index
<div class="container">
<p id="b">
{% include svg/bulma-icon.svg %}
{% include svg/bulma-icon.svg %}
</p>
<h1 class="title">
Bulma