mo实现表白按钮动画效果代码
代码语言：html
所属分类：动画
代码描述：mo实现表白按钮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en" class=" -webkit-"><head>
<meta charset="UTF-8">
<style>
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: rgba(241, 226, 215, 0.2);
position: relative;
background: #FD5061;
font-family: Arial, Open Sans, sans-serif;
}
.character {
color: white;
font-size: 68px;
position: absolute;
left:0;
top: 0;
bottom: 0;
right:0;
text-align: center;
line-height: .475;
font-family: Oswald, monospace;
}
.add-button {
overflow: hidden;
border-radius: 50%;
}
.modal-wrapper {
position: absolute;
width: 248px;
height: 184px;
margin-left: -124px;
margin-top: -92px;
left: 50%;
top: 50%;
z-index: 1;
}
.modal,
.modal__shake {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.modal-shape {
border-radius: 35px;
box-shadow: 5px 5px 0 rgba(0,0,0,.25);
overflow: hidden;
}
.modal__inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
}
.modal__text {
text-align: center;
font-size: 16px;
position: absolute;
width: 100%;
height: 50px;
padding-top: 34px;
color: #29363B;
letter-spacing: 1px;
backface-visibility: hidden;
}
.modal__buttons {
position: absolute;
bottom: 25px;
left: 0;
width: 100%;
text-align: center;
}
.modal__button {
background: white;
border-radius: 40px;
display: inline-block;
padding: 5px 10px;
width: 65px;
text-align: center;
font-size: 14px;
cursor: pointer;
color: #29363B;
letter-spacing: 1px;
backface-visibility: hidden;
}
.modal__button:hover {
opacity: 0.95;
}
.modal__button--love {
transform: rotate(3deg);
}
.modal__button--hate {
margin-left: 15px;
transform: rotate(-2deg);
}
.layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
}
.layer--modal {
z-index: 5;
}
.layer--modal-hide {
z-index: 10;
}
</style>
<style type="text/css">._handle_q1som_5 {
width: 13px;
width: 13px;
width: 0.8125rem;
height: 13px;
height: 13px;
height: 0.8125rem;
cursor: pointer;
-webkit-transform: translateX(0);
transform: translateX(0)
/*backface-visibility: hidden;*/
}
._handle__inner_q1som_1, ._handle__shadow_q1som_1 {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
border-radius: 50%;
cursor: pointer;
/*transform: translateZ(0);*/
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
._handle__inner_q1som_1 {
background: #FFF
}
._handle__shadow_q1som_1 {
box-shadow: 0.0625rem 0.0625rem 0.125rem black;
opacity: .35;
z-index: 0
}
._handle_q1som_5:hover ._handle__inner_q1som_1, ._handle_q1som_5:hover ._handle__shadow_q1som_1 {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
._handle_q1som_5:active ._handle__inner_q1som_1 {
-webkit-transform: scale(1.2);
transform: scale(1.2)
/*box-shadow: calc( $PX ) calc( $PX ) calc( 1*$PX ) rgba(0,0,0,.35);*/
}
._handle_q1som_5:active ._handle__shadow_q1som_1 {
opacity: .85;
-webkit-transform: scale(1);
transform: scale(1)
}
._handle_q1som_5._is-bound_q1som_54 {
width: 9px;
width: 9px;
width: 0.5625rem;
height: 20px;
height: 20px;
height: 1.25rem;
margin-left: -9px;
margin-left: -9px;
margin-left: -0.5625rem;
margin-top: -10px;
margin-top: -10px;
margin-top: -0.625rem
}
._handle_q1som_5._is-bound_q1som_54 ._handle__inner_q1som_1 {
background: #FF512F
}
._handle_q1som_5._is-bound_q1som_54 ._handle__inner_q1som_1:after {
content: '';
position: absolute;
right: 0;
top: 50%;
margin-top: -20px;
margin-top: -20px;
margin-top: -1.25rem;
width: 1px;
width: 1px;
width: 0.0625rem;
height: 40px;
height: 40px;
height: 2.5rem;
background: #FF512F
}
._handle_q1som_5._is-bound_q1som_54 ._handle__inner_q1som_1, ._handle_q1som_5._is-bound_q1som_54 ._handle__shadow_q1som_1 {
border-top-left-radius: 3px;
border-top-left-radius: 3px;
border-top-left-radius: 0.1875rem;
border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-left-radius: 0.1875rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
._handle_q1som_5._is-inversed_q1som_82 {
margin-left: 0
}
._handle_q1som_5._is-inversed_q1som_82 ._handle__shadow_q1som_1 {
box-shadow: -0.0625rem 0.0625rem 0.125rem black
}
._handle_q1som_5._is-inversed_q1som_82 ._handle__inner_q1som_1 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 3px;
border-top-right-radius: 3px;
border-top-right-radius: 0.1875rem;
border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-right-radius: 0.1875rem
}
._handle_q1som_5._is-inversed_q1som_82 ._handle__inner_q1som_1:after {
right: auto;
left: 0
}
</style><style type="text/css">._track_1inlw_5 {
position: relative;
height: 100%
}
._track__track_1inlw_1 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
height: 1px;
height: 0.0625rem;
background: #FFF;
box-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(0,0,0,.5)
}
._track__track_1inlw_1:after {
content: '';
position: absolute;
left: 0;
top: -20px;
top: -20px;
top: -1.25rem;
width: 100%;
height: 40px;
height: 40px;
height: 2.5rem;
cursor: pointer
/*background-color: yellow;*/
}
._track__track-progress_1inlw_1 {
position: absolute;
left: 0;
top: 50%;
margin-top: -1px;
margin-top: -1px;
margin-top: -0.0625rem;
height: 3px;
height: 3px;
height: 0.1875rem;
width: 1px;
/*background: $c-orange;*/
background: #FFFFFF;
z-index: 1;
-webkit-transform-origin: left center;
transform-origin: left center
}
._track__track-progress_1inlw_1:after {
content: '';
position: absolute;
left: 0;
top: -20px;
top: -20px;
top: -1.25rem;
width: 100%;
height: 40px;
height: 40px;
height: 2.5rem;
cursor: pointer
/*background-color: yellow;*/
}
._track__ripple_1inlw_1 {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1
}
._track_1inlw_5._is-inversed_1inlw_65 {
left: auto;
right: 0
}
._track_1inlw_5._is-inversed_1inlw_65 ._track__track-progress_1inlw_1 {
-webkit-transform-origin: right center;
transform-origin: right center
}
._track_1inlw_5._is-bound_1inlw_74 ._track__track-progress_1inlw_1 {
background: #FF512F
}
._track_1inlw_5._is-y_1inlw_78 ._track__track_1inlw_1 {
top: 0;
left: 50%;
height: 100%;
width: 1px;
width: 1px;
width: 0.0625rem
/*box-shadow: calc( $PX ) calc( $PX ) calc( $PX ) rgba(0,0,0,.5); */
}
</style><style type="text/css">/*@import './handle.postcss.css';*/
._slider_14t9x_6 {
position: relative;
width: 100%;
height: 30px;
height: 30px;
height: 1.875rem
}
._slider__inner_14t9x_1 {
width: 100%;
height: 100%;
position: relative
}
._slider_14t9x_6 ._handle_14t9x_17, ._slider_14t9x_6 ._progress-handle_14t9x_18 {
z-index: 3;
position: absolute;
top: 50%
}
._slider_14t9x_6 ._progress-handle_14t9x_18 {
left: 0;
margin-left: -6.5px;
margin-left: -6.5px;
margin-left: -0.40625rem;
margin-top: -6.5px;
margin-top: -6.5px;
margin-top: -0.40625rem
}
._slider_14t9x_6 ._track_14t9x_30 {
z-index: 2
}
._slider_14t9x_6._is-y_14t9x_34 {
width: 30px;
width: 30px;
width: 1.875rem;
height: 100%;
}
._slider_14t9x_6._is-y_14t9x_34 ._handle_14t9x_17 {
left: 50%;
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -6.5px;
margin-bottom: -6.5px;
margin-bottom: -0.40625rem
}
</style><style type="text/css">/*@import './handle.postcss.css';*/
._player-slider_1t00q_6 {
/*overflow: hidden;*/
height: 40px;
height: 40px;
height: 2.5rem
}
._player-slider_1t00q_6 > div {
position: absolute;
left: 0;
top: 0;
z-index: 2
}
._player-slider_1t00q_6 ._slider_1t00q_15 {
z-index: 1;
height: 100%
}
</style><style type="text/css">._icon_y498a_5 {
position: relative;
width: 12px;
width: 12px;
width: 0.75rem;
height: 12px;
height: 12px;
height: 0.75rem;
cursor: pointer
}
._icon_y498a_5 > svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
fill: inherit
}
._icon_y498a_5 > svg > use {
fill: inherit
}
._icon_y498a_5:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1
}
._icon_y498a_5._is-x2_y498a_33 {
width: 16px;
width: 16px;
width: 1rem;
height: 16px;
height: 16px;
height: 1rem
}
</style><style type="text/css">._button_r3ni6_4 {
position: relative;
width: 35px;
width: 35px;
width: 2.1875rem;
height: 40px;
height: 40px;
height: 2.5rem;
cursor: pointer;
fill: #FFF;
display: inline-block
}
._button__ripple_r3ni6_1 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 5;
overflow: hidden
}
._button__ripple_r3ni6_1:after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
cursor: pointer
}
._button_r3ni6_4:hover {
opacity: .85
}
._button_r3ni6_4:active {
opacity: 1
}
</style><style type="text/css">._icon-button_1yshr_4 {
/* styles */
}
._icon-button_1yshr_4 ._icon_1yshr_4 {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate( -50%, -50% );
transform: translate( -50%, -50% )
}
</style><style type="text/css">._button-switch_1g5lg_4 {
position: relative;
display: inline-block
}
._button-switch_1g5lg_4 > ._icon_1g5lg_8 {
position: absolute
}
._button-switch_1g5lg_4:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1
}
</style><style type="text/css">._label-button_1cxps_4 {
font-family: Arial, sans-serif;
font-size: 9px;
font-size: 9px;
font-size: 0.5625rem;
letter-spacing: 0.5px;
letter-spacing: 0.5px;
letter-spacing: 0.03125rem;
color: white
}
._label-button__label_1cxps_1 {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate( -50%, -50% );
transform: translate( -50%, -50% )
}
</style><style type="text/css">._speed-control_1svrw_4 {
position: relative;
display: inline-block;
height: 40px;
height: 40px;
height: 2.5rem
}
._speed-control__slider_1svrw_1 {
position: absolute;
bottom: 100%;
left: 3px;
left: 3px;
left: 0.1875rem;
width: 30px;
width: 30px;
width: 1.875rem;
height: 80px;
height: 80px;
height: 5rem;
padding-top: 20px;
padding-top: 20px;
padding-top: 1.25rem;
padding-bottom: 20px;
padding-bottom: 20px;
padding-bottom: 1.25rem;
border-top-right-radius: 3px;
border-top-right-radius: 3px;
border-top-right-radius: 0.1875rem;
border-top-left-radius: 3px;
border-top-left-radius: 3px;
border-top-left-radius: 0.1875rem;
background: #3A0839;
-webkit-transform: translate(-6249999.9375rem, -6249999.9375rem);
transform: translate(-6249999.9375rem, -6249999.9375rem);
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
._speed-control__slider_1svrw_1:before, ._speed-control__slider_1svrw_1:after {
content: '';
position: absolute;
top: 50%;
width: 3px;
width: 3px;
width: 0.1875rem;
height: 1px;
height: 1px;
height: 0.0625rem;
background: #FFF
}
._speed-control__slider_1svrw_1:before {
left: 5px;
left: 5px;
left: 0.3125rem
}
._speed-control__slider_1svrw_1:after {
right: 5px;
right: 5px;
right: 0.3125rem
}
._speed-control__button_1svrw_1 {
border: 1px solid cyan
}
._speed-control_1svrw_4._is-on_1svrw_48 ._speed-control__slider_1svrw_1 {
-webkit-transform: translate(0, 0);
transform: translate(0, 0)
}
</style><style type="text/css">._icon-fork_csg7t_4 {
}
._icon-fork_csg7t_4 > ._icon_csg7t_4 {
/*position: absolute;*/
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate( -50%, -50% );
transform: translate( -50%, -50% )
}
._icon-fork_csg7t_4 > ._icon_csg7t_4:nth-of-type(3) {
position: absolute;
opacity: 1
}
._icon-fork_csg7t_4._is-on_csg7t_18 > ._icon_csg7t_4:nth-of-type(2) {
opacity: 1
}
._icon-fork_csg7t_4._is-on_csg7t_18 > ._icon_csg7t_4:nth-of-type(3) {
opacity: 0
}
</style><style type="text/css">._play-button_16uj5_4 {
/* styles */
}
</style><style type="text/css">._stop-button_lpa7l_4 {
/* styles */
}
</style><style type="text/css">._opacity-switch_17z5s_4 {
opacity: .5;
}
._opacity-switch_17z5s_4 ._icon_17z5s_6 {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
._opacity-switch_17z5s_4:hover {
opacity: .4;
}
._opacity-switch_17z5s_4._is-on_17z5s_15 {
opacity: 1;
}
._opacity-switch_17z5s_4._is-on_17z5s_15:hover {
opacity: .85;
}
</style><style type="text/css">._repeat-button_1ce74_4 {
/* styles */
}
</style><style type="text/css">._hide-button_1hqr2_4 {
width: 22px;
width: 22px;
width: 1.375rem;
height: 16px;
height: 16px;
height: 1rem;
background: #3A0839;
border-top-left-radius: 3px;
border-top-left-radius: 3px;
border-top-left-radius: 0.1875rem;
border-top-right-radius: 3px;
border-top-right-radius: 3px;
border-top-right-radius: 0.1875rem
}
._hide-button__icon_1hqr2_1 {
position: absolute;
left: 50%;
top: 50%;
width: 8px;
width: 8px;
width: 0.5rem;
height: 8px;
height: 8px;
height: 0.5rem;
margin-top: 1px;
margin-top: 1px;
margin-top: 0.0625rem;
-webkit-transform: translate( -50%, -50% );
transform: translate( -50%, -50% )
}
._hide-button_1hqr2_4._is-hidden_1hqr2_24 ._hide-button__icon_1hqr2_1 {
-webkit-transform: translate( -50%, -65% ) rotate( 180deg );
transform: translate( -50%, -65% ) rotate( 180deg )
}
</style><style type="text/css">._mojs-player_tes6w_4 {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
height: 40px;
height: 2.5rem;
background: rgba( 58, 8, 57, .85 );
z-index: 100
}
._mojs-player__left_tes6w_1 {
position: absolute;
left: 0;
width: 175px;
width: 175px;
width: 10.9375rem
}
._mojs-player__mid_tes6w_1 {
position: absolute;
left: 175px;
left: 175px;
left: 10.9375rem;
right: 35px;
right: 35px;
right: 2.1875rem;
overflow: hidden;
padding: 0 20px;
padding: 0 20px;
padding: 0 1.25rem
}
._mojs-player__right_tes6w_1 {
position: absolute;
right: 0
}
._mojs-player__hide-button_tes6w_1 {
position: absolute;
right: 6px;
right: 6px;
right: 0.375rem;
bottom: 100%
}
._mojs-player_tes6w_4._is-hidden_tes6w_41 {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
._mojs-player_tes6w_4._is-transition_tes6w_44 {
-webkit-transition: all .15s ease-out;
transition: all .15s ease-out
}
</style></head>
<body >
<div id="js-modal-layer" class="layer layer--modal"></div>
<div id="js-modal-hide-layer" class="layer layer--modal-hide"></div>
<div class="scene" id="js-scene"></div>
<script id="js-modal-template" type="text/template">
<div class="modal__text" id="js-modal-text">
The web + motion <br /> is
</div>
<div class="modal__buttons">
<div class="modal__button modal__button--love" id="js-button-love">love</div>
<div class="modal__button modal__button--hate" id="js-button-hate">hate</div>
</div>
</script>
<!-- ABOUT LINK -->
<style> .what:hover { cursor: pointer; opacity: .75; } .what {display: block;width: 28px;height: 28px;position: fixed;right: 20px;bottom: 20px;background-size: 100% 100%; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjNweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMjMgMjMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+U2xpY2UgMTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPHBhdGggZD0iTTExLjUsMjIgQzE3LjI5ODk4OTksMjIgMjIsMTcuMjk4OTg5OSAyMiwxMS41IEMyMiw1LjcwMTAxMDEzIDE3LjI5ODk4OTksMSAxMS41LDEgQzUuNzAxMDEwMTMsMSAxLDUuNzAxMDEwMTMgMSwxMS41IEMxLDE3LjI5ODk4OTkgNS43MDEwMTAxMywyMiAxMS41LDIyIFoiIGlkPSJPdmFsIiBzdHJva2U9IiMzQTA1M0EiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4gICAgICAgIDxwYXRoIGQ9Ik0xMi4yNzkyOTY5LDEzLjQ2Mjg5MDYgTDEwLjc4NTE1NjIsMTMuNDYyODkwNiBDMTAuNzgxMjUsMTMuMjQ4MDQ1OCAxMC43NzkyOTY5LDEzLjExNzE4NzcgMTAuNzc5Mjk2OSwxMy4wNzAzMTI1IEMxMC43NzkyOTY5LDEyLjU4NTkzNTEgMTAuODU5Mzc0MiwxMi4xODc1MDE2IDExLjAxOTUzMTIsMTEuODc1IEMxMS4xNzk2ODgzLDExLjU2MjQ5ODQgMTEuNDk5OTk3NiwxMS4yMTA5Mzk1IDExLjk4MDQ2ODgsMTAuODIwMzEyNSBDMTIuNDYwOTM5OSwxMC40Mjk2ODU1IDEyLjc0ODA0NjQsMTAuMTczODI4NyAxMi44NDE3OTY5LDEwLjA1MjczNDQgQzEyLjk4NjMyODgsOS44NjEzMjcxNyAxMy4wNTg1OTM4LDkuNjUwMzkxNzggMTMuMDU4NTkzOCw5LjQxOTkyMTg4IEMxMy4wNTg1OTM4LDkuMDk5NjA3NzcgMTIuOTMwNjY1Myw4LjgyNTE5NjQ2IDEyLjY3NDgwNDcsOC41OTY2Nzk2OSBDMTIuNDE4OTQ0LDguMzY4MTYyOTIgMTIuMDc0MjIwOSw4LjI1MzkwNjI1IDExLjY0MDYyNSw4LjI1MzkwNjI1IEMxMS4yMjI2NTQyLDguMjUzOTA2MjUgMTAuODczMDQ4Myw4LjM3MzA0NTY4IDEwLjU5MTc5NjksOC42MTEzMjgxMiBDMTAuMzEwNTQ1NSw4Ljg0OTYxMDU3IDEwLjExNzE4OCw5LjIxMjg4ODE4IDEwLjAxMTcxODgsOS43MDExNzE4OCBMOC41LDkuNTEzNjcxODggQzguNTQyOTY4OTYsOC44MTQ0NDk2MyA4Ljg0MDgxNzU1LDguMjIwNzA1NTcgOS4zOTM1NTQ2OSw3LjczMjQyMTg4IEM5Ljk0NjI5MTgzLDcuMjQ0MTM4MTggMTAuNjcxODcwNSw3IDExLjU3MDMxMjUsNyBDMTIuNTE1NjI5Nyw3IDEzLjI2NzU3NTMsNy4yNDcwNjc4NCAxMy44MjYxNzE5LDcuNzQxMjEwOTQgQzE0LjM4NDc2ODQsOC4yMzUzNTQwMyAxNC42NjQwNjI1LDguODEwNTQzNTkgMTQuNjY0MDYyNSw5LjQ2Njc5Njg4IEMxNC42NjQwNjI1LDkuODMwMDc5OTQgMTQuNTYxNTI0NSwxMC4xNzM4MjY1IDE0LjM1NjQ0NTMsMTAuNDk4MDQ2OSBDMTQuMTUxMzY2MiwxMC44MjIyNjcyIDEzLjcxMjg5NCwxMS4yNjM2NjkxIDEzLjA0MTAxNTYsMTEuODIyMjY1NiBDMTIuNjkzMzU3NiwxMi4xMTEzMjk2IDEyLjQ3NzUzOTUsMTIuMzQzNzQ5MSAxMi4zOTM1NTQ3LDEyLjUxOTUzMTIgQzEyLjMwOTU2OTksMTIuNjk1MzEzNCAxMi4yNzE0ODQzLDEzLjAwOTc2MzQgMTIuMjc5Mjk2OSwxMy40NjI4OTA2IEwxMi4yNzkyOTY5LDEzLjQ2Mjg5MDYgWiBNMTAuNzg1MTU2MiwxNS42Nzc3MzQ0IEwxMC43ODUxNTYyLDE0LjAzMTI1IEwxMi40MzE2NDA2LDE0LjAzMTI1IEwxMi40MzE2NDA2LDE1LjY3NzczNDQgTDEwLjc4NTE1NjIsMTUuNjc3NzM0NCBaIiBpZD0iPyIgZmlsbD0iIzNBMDUzQSI+PC9wYXRoPiAgICA8L2c+PC9zdmc+);}</style><a href="http://mojs.io/tutorials/shape/" class="what" title="tutorial" target="_blank"></a>
<!-- ABOUT LINK -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mo.min.js"></script>
<script type="module">
// the readable code is here: https://github.com/legomushroom/shape-demo3
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "build/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _classCallCheck2 = __webpack_require__(2);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(3);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(72);
var _inherits3 = _interopRequireDefault(_inherits2);
var _classlistPolyfill = __webpack_require__(80);
var _classlistPolyfill2 = _interopRequireDefault(_classlistPolyfill);
var _mojsPlayer = __webpack_require__(81);
var _mojsPlayer2 = _interopRequireDefault(_mojsPlayer);
var _module = __webpack_require__(82);
var _module2 = _interopRequireDefault(_module);
var _colors = __webpack_require__(83);
var _colors2 = _interopRequireDefault(_colors);
var _showButton = __webpack_require__(84);
var _showButton2 = _interopRequireDefault(_showButton);
var _modal = __webpack_require__(87);
var _modal2 = _interopRequireDefault(_modal);
var _modalHide = __webpack_require__(100);
var _modalHide2 = _interopRequireDefault(_modalHide);
var _characters = __webpack_require__(101);
var _characters2 = _interopRequireDefault(_characters);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// require('../css/main.postcss.css');
// const CLASSES = require('../css/main.postcss.css.json');
// import AddButton from './components/add-button/add-button';
var Demo = function (_Module) {
(0, _inherits3.default)(Demo, _Module);
function Demo() {
(0, _classCallCheck3.default)(this, Demo);
return (0, _possibleConstructorReturn3.default)(this, _Module.apply(this, arguments));
}
/*
Method for initial module's render.
@private
*/
Demo.prototype._render = function _render() {
// super._render();
var mainTimeline = new mojs.Timeline();
mainTimeline.add(new _showButton2.default()
// new ModalHide
// new Characters({ delay: 200 })
// new Modal
).play();
// this._findEl( '#js-modal-hide-layer' ).style['transform'] = 'none';
// ;( new MojsPlayer({ add: mainTimeline }) )
// .el.style[ 'z-index' ] = 10;
};
return Demo;
}(_module2.default);
// import Vibro from './components/add-button/vibro-button';
new Demo();
exports.default = Demo;
/***/ },
/* 2 */
/***/ function(module, exports) {
"use strict";
exports.__esModule = true;
exports.default = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _typeof2 = __webpack_require__(4);
var _typeof3 = _interopRequireDefault(_typeof2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && ((typeof call === "undefined" ? "undefined" : (0, _typeof3.default)(call)) === "object" || typeof call === "function") ? call : self;
};
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _iterator = __webpack_require__(5);
var _iterator2 = _interopRequireDefault(_iterator);
var _symbol = __webpack_require__(56);
var _symbol2 = _interopRequireDefault(_symbol);
var _typeof = typeof _symbol2.default === "function" && typeof _iterator2.default === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof _symbol2.default === "function" && obj.constructor === _symbol2.default ? "symbol" : typeof obj; };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = typeof _symbol2.default === "function" && _typeof(_iterator2.default) === "symbol" ? function (obj) {
return typeof obj === "undefined" ? "undefined" : _typeof(obj);
} : function (obj) {
return obj && typeof _symbol2.default === "function" && obj.constructor === _symbol2.default ? "symbol" : typeof obj === "undefined" ? "undefined" : _typeof(obj);
};
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
module.exports = { "default": __webpack_require__(6), __esModule: true };
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
__webpack_require__(7);
__webpack_require__(51);
module.exports = __webpack_require__(55).f('iterator');
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var $at = __webpack_require__(8)(true);
// 21.1.3.27 String.prototype[@@iterator]()
__webpack_require__(11)(String, 'String', function(iterated){
this._t = String(iterated); // target
this._i = 0; // next index
// 21.1.5.2.1 %StringIteratorPrototype%.next()
}, function(){
var O = this._t
, index = this._i
, point;
if(index >= O.length)return {value: undefined, done: true};
point = $at(O, index);
this._i += point.length;
return {value: point, done: false};
});
/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {
var toInteger = __webpack_require__(9)
, defined = __webpack_require__(10);
// true -> String#at
// false -> String#codePointAt
module.exports = function(TO_STRING){
return function(that, pos){
var s = String(defined(that))
, i = toInteger(pos)
, l = s.length
, a, b;
if(i < 0 || i >= l)return TO_STRING ? '' : undefined;
a = s.charCodeAt(i);
return a < 0xd800 || a > 0xdbff || i + 1 === l || (b = s.charCodeAt(i + 1)) < 0xdc00 || b > 0xdfff
? TO_STRING ? s.charAt(i) : a
: TO_STRING ? s.slice(i, i + 2) : (a - 0xd800 << 10) + (b - 0xdc00) + 0x10000;
};
};
/***/ },
/* 9 */
/***/ function(module, exports) {
// 7.1.4 ToInteger
var ceil = Math.ceil
, floor = Math.floor;
module.exports = function(it){
return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it);
};
/***/ },
/* 10 */
/***/ function(module, exports) {
// 7.2.1 RequireObjectCoercible(argument)
module.exports = function(it){
if(it == undefined)throw TypeError("Can't call method on " + it);
return it;
};
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var LIBRARY = __webpack_require__(12)
, $export = __webpack_require__(13)
, redefine = __webpack_require__(28)
, hide = __webpack_require__(18)
, has = __webpack_require__(29)
, Iterators = __webpack_require__(30)
, $iterCreate = __webpack_require__(31)
, setToStringTag = __webpack_require__(47)
, getPrototypeOf = __webpack_require__(49)
, ITERATOR = __webpack_require__(48)('iterator')
, BUGGY = !([].keys && 'next' in [].keys()) // Safari has buggy iterators w/o `next`
, FF_ITERATOR = '@@iterator'
, KEYS = 'keys'
, VALUES = 'values';
var returnThis = function(){ return this; };
module.exports = function(Base, NAME, Constructor, next, DEFAULT, IS_SET, FORCED){
$iterCreate(Constructor, NAME, next);
var getMethod = function(kind){
if(!BUGGY && kind in proto)return proto[kind];
switch(kind){
case KEYS: return function keys(){ return new Constructor(this, kind); };
case VALUES: return function values(){ return new Constructor(this, kind); };
} return function entries(){ return new Constructor(this, kind); };
};
var TAG = NAME + ' Iterator'
, DEF_VALUES = DEFAULT == VALUES
, VALUES_BUG = false
, proto = Base.prototype
, $native = proto[ITERATOR] || proto[FF_ITERATOR] || DEFAULT && proto[DEFAULT]
, $default = $native || getMethod(DEFAULT)
, $entries = DEFAULT ? !DEF_VALUES ? $default : getMethod('entries') : undefined
, $anyNative = NAME == 'Array' ? proto.entries || $native : $native
, methods, key, IteratorPrototype;
// Fix native
if($anyNative){
IteratorPrototype = getPrototypeOf($anyNative.call(new Base));
if(IteratorPrototype !== Object.prototype){
// Set @@toStringTag to native iterators
setToStringTag(IteratorPrototype, TAG, true);
// fix for some old engines
if(!LIBRARY && !has(IteratorPrototype, ITERATOR))hide(IteratorPrototype, ITERATOR, returnThis);
}
}
// fix Array#{values, @@iterator}.name in V8 / FF
if(DEF_VALUES && $native && $native.name !== VALUES){
VALUES_BUG = true;
$default = function values(){ return $native.call(this); };
}
// Define iterator
if((!LIBRARY || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])){
hide(proto, ITERATOR, $default);
}
// Plug for library
Iterators[NAME] = $default;
Iterators[TAG] = returnThis;
if(DEFAULT){
methods = {
values: DEF_VALUES ? $default : getMethod(VALUES),
keys: IS_SET ? $default : getMethod(KEYS),
entries: $entries
};
if(FORCED)for(key in methods){
if(!(key in proto))redefine(proto, key, methods[key]);
} else $export($export.P + $export.F * (BUGGY || VALUES_BUG), NAME, methods);
}
return methods;
};
/***/ },
/* 12 */
/***/ function(module, exports) {
module.exports = true;
/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
var global = __webpack_require__(14)
, core = __webpack_require__(15)
, ctx = __webpack_require__(16)
, hide = __webpack_require__(18)
, PROTOTYPE = 'prototype';
var $export = function(type, name, source){
var IS_FORCED = type & $export.F
, IS_GLOBAL = type & $export.G
, IS_STATIC = type & $export.S
, IS_PROTO = type & $export.P
, IS_BIND = type & $export.B
, IS_WRAP = type & $export.W
, exports = IS_GLOBAL ? core : core[name] || (core[name] = {})
, expProto = exports[PROTOTYPE]
, target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE]
, key, own, out;
if(IS_GLOBAL)source = name;
for(key in source){
// contains in native
own = !IS_FORCED && target && target[key] !== undefined;
if(own && key in exports)continue;
// export native or passed
out = own ? target[key] : source[key];
// prevent global pollution for namespaces
exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key]
// bind timers to global for call from export context
: IS_BIND && own ? ctx(out, global)
// wrap global constructors for prevent change them in library
: IS_WRAP && target[key] == out ? (function(C){
var F = function(a, b, c){
if(this instanceof C){
switch(arguments.length){
case 0: return new C;
case 1: return new C(a);
case 2: return new C(a, b);
} return new C(a, b, c);
} return C.apply(this, arguments);
};
F[PROTOTYPE] = C[PROTOTYPE];
return F;
// make static versions for prototype methods
})(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out;
// export proto methods to core.%CONSTRUCTOR%.methods.%NAME%
if(IS_PROTO){
(exports.virtual || (exports.virtual = {}))[key] = out;
// export proto methods to core.%CONSTRUCTOR%.prototype.%NAME%
if(type & $export.R && expProto && !expProto[key])hide(expProto, key, out);
}
}
};
// type bitmap
$export.F = 1; // forced
$export.G = 2; // global
$export.S = 4; // static
$export.P = 8; // proto
$export.B = 16; // bind
$export.W = 32; // wrap
$export.U = 64; // safe
$export.R = 128; // real proto method for `library`
module.exports = $export;
/***/ },
/* 14 */
/***/ function(module, exports) {
// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
var global = module.exports = typeof window != 'undefined' && window.Math == Math
? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();
if(typeof __g == 'number')__g = global; // eslint-disable-line no-undef
/***/ },
/* 15 */
/***/ function(module, exports) {
var core = module.exports = {version: '2.4.0'};
if(typeof __e == 'number')__e = core; // eslint-disable-line no-undef
/***/ },
/* 16 */
/***/ function(module, exports, __webpack_require__) {
// optional / simple context binding
var aFunction = __webpack_require__(17);
module.exports = function(fn, that, length){
aFunction(fn);
if(that === undefined)return fn;
switch(length){
case 1: return function(a){
return fn.call(that, a);
};
case 2: return function(a, b){
return fn.call(that, a, b);
};
case 3: return function(a, b, c){
return fn.call(that, a, b, c);
};
}
return function(/* ...args */){
return fn.apply(that, arguments);
};
};
/***/ },
/* 17 */
/***/ function(module, exports) {
module.exports = function(it){
if(typeof it != 'function')throw TypeError(it + ' is not a function!');
return it;
};
/***/ },
/* 18 */
/***/ function(module, exports, __webpack_require__) {
var dP = __webpack_require__(19)
, createDesc = __webpack_require__(27);
module.exports = __webpack_require__(23) ? function(object, key, value){
return dP.f(object, key, createDesc(1, value));
} : function(object, key, value){
object[key] = value;
return object;
};
/***/ },
/* 19 */
/***/ function(module, exports, __webpack_require__) {
var anObject = __webpack_require__(20)
, IE8_DOM_DEFINE = __webpack_require__(22)
, toPrimitive = __webpack_require__(26)
, dP = Object.defineProperty;
exports.f = __webpack_require__(23) ? Object.defineProperty : function defineProperty(O, P, Attributes){
anObject(O);
P = toPrimitive(P, true);
anObject(Attributes);
if(IE8_DOM_DEFINE)try {
return dP(O, P, Attributes);
} catch(e){ /* empty */ }
if('get' in Attributes || 'set' in Attributes)throw TypeError('Accessors not supported!');
if('value' in Attributes)O[P] = Attributes.value;
return O;
};
/***/ },
/* 20 */
/***/ function(module, exports, __webpack_require__) {
var isObject = __webpack_require__(21);
module.exports = function(it){
if(!isObject(it))throw TypeError(it + ' is not an object!');
return it;
};
/***/ },
/* 21 */
/***/ function(module, exports) {
module.exports = function(it){
return typeof it === 'object' ? it !== null : typeof it === 'function';
};
/***/ },
/* 22 */
/***/ function(module, exports, __webpack_require__) {
module.exports = !__webpack_require__(23) && !__webpack_require__(24)(function(){
return Object.defineProperty(__webpack_require__(25)('div'), 'a', {get: function(){ return 7; }}).a != 7;
});
/***/ },
/* 23 */
/***/ function(module, exports, __webpack_require__) {
// Thank's IE8 for his funny defineProperty
module.exports = !__webpack_require__(24)(function(){
return Object.defineProperty({}, 'a', {get: function(){ return 7; }}).a != 7;
});
/***/ },
/* 24 */
/***/ function(module, exports) {
module.exports = function(exec){
try {
return !!exec();
} catch(e){
return true;
}
};
/***/ },
/* 25 */
/***/ function(module, exports, __webpack_require__) {
var isObject = __webpack_require__(21)
, document = __webpack_require__(14).document
// in old IE typeof document.createElement is 'object'
, is = isObject(document) && isObject(document.createElement);
module.exports = function(it){
return is ? document.createElement(it) : {};
};
/***/ },
/* 26 */
/***/ function(module, exports, __webpack_require__) {
// 7.1.1 ToPrimitive(input [, PreferredType])
var isObject = __webpack_require__(21);
// instead of the ES6 spec version, we didn't implement @@toPrimitive case
// and the second argument - flag - preferred type is a string
module.exports = function(it, S){
if(!isObject(it))return it;
var fn, val;
if(S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it)))return val;
if(typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it)))return val;
if(!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it)))return val;
throw TypeError("Can't convert object to primitive value");
};
/***/ },
/* 27 */
/***/ function(module, exports) {
module.exports = function(bitmap, value){
return {
enumerable : !(bitmap & 1),
configurable: !(bitmap & 2),
writable : !(bitmap & 4),
value : value
};
};
/***/ },
/* 28 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(18);
/***/ },
/* 29 */
/***/ function(module, exports) {
var hasOwnProperty = {}.hasOwnProperty;
module.exports = function(it, key){
return hasOwnProperty.call(it, key);
};
/***/ },
/* 30 */
/***/ function(module, exports) {
module.exports = {};
/***/ },
/* 31 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var create = __webpack_require__(32)
, descriptor = __webpack_require__(27)
, setToStringTag = __webpack_require__(47)
, IteratorPrototype = {};
// 25.1.2.1.1 %IteratorPrototype%[@@iterator]()
__webpack_require__(18)(IteratorPrototype, __webpack_require__(48)('iterator'), function(){ return this; });
module.exports = function(Constructor, NAME, next){
Constructor.prototype = create(IteratorPrototype, {next: descriptor(1, next)});
setToStringTag(Constructor, NAME + ' Iterator');
};
/***/ },
/* 32 */
/***/ function(module, exports, __webpack_require__) {
// 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties])
var anObject = __webpack_require__(20)
, dPs = __webpack_require__(33)
, enumBugKeys = __webpack_require__(45)
, IE_PROTO = __webpack_require__(42)('IE_PROTO')
, Empty = function(){ /* empty */ }
, PROTOTYPE = 'prototype';
// Create object with fake `null` prototype: use iframe Object with cleared prototype
var createDict = function(){
// Thrash, waste and sodomy: IE GC bug
var iframe = __webpack_require__(25)('iframe')
, i = enumBugKeys.length
, gt = '>'
, iframeDocument;
iframe.style.display = 'none';
__webpack_require__(46).appendChild(iframe);
iframe.src = 'javascript:'; // eslint-disable-line no-script-url
// createDict = iframe.contentWindow.Object;
// html.removeChild(iframe);
iframeDocument = iframe.contentWindow.document;
iframeDocument.open();
iframeDocument.write('<script>document.F=Object</script' + gt);
iframeDocument.close();
createDict = iframeDocument.F;
while(i--)delete createDict[PROTOTYPE][enumBugKeys[i]];
return createDict();
};
module.exports = Object.create || function create(O, Properties){
var result;
if(O !== null){
Empty[PROTOTYPE] = anObject(O);
result = new Empty;
Empty[PROTOTYPE] = null;
// add "__proto__" for Object.getPrototypeOf polyfill
result[IE_PROTO] = O;
} else result = createDict();
return Properties === undefined ? result : dPs(result, Properties);
};
/***/ },
/* 33 */
/***/ function(module, exports, __webpack_require__) {
var dP = __webpack_require__(19)
, anObject = __webpack_require__(20)
, getKeys = __webpack_require__(34);
module.exports = __webpack_require__(23) ? Object.defineProperties : function defineProperties(O, Properties){
anObject(O);
var keys = getKeys(Properties)
, length = keys.length
, i = 0
, P;
while(length > i)dP.f(O, P = keys[i++], Properties[P]);
return O;
};
/***/ },
/* 34 */
/***/ function(module, exports, __webpack_require__) {
// 19.1.2.14 / 15.2.3.14 Object.keys(O)
var $keys = __webpack_require__(35)
, enumBugKeys = __webpack_require__(45);
module.exports = Object.keys || function keys(O){
return $keys(O, enumBugKeys);
};
/***/ },
/* 35 */
/***/ function(module, exports, __webpack_require__) {
var has = __webpack_require__(29)
, toIObject = __webpack_require__(36)
, arrayIndexOf = __webpack_require__(39)(false)
, IE_PROTO = __webpack_require__(42)('IE_PROTO');
module.exports = function(object, names){
var O = toIObject(object)
, i = 0
, result = []
, key;
for(key in O)if(key != IE_PROTO)has(O, key) && result.push(key);
// Don't enum bug & hidden keys
while(names.length > i)if(has(O, key = names[i++])){
~arrayIndexOf(result, key) || result.push(key);
}
return result;
};
/***/ },
/* 36 */
/***/ function(module, exports, __webpack_require__) {
// to indexed object, toObject with fallback for non-array-like ES3 strings
var IObject = __webpack_require__(37)
, defined = __webpack_require__(10);
module.exports = function(it){
return IObject(defined(it));
};
/***/ },
/* 37 */
/***/ function(module, exports, __webpack_require__) {
// fallback for non-array-like ES3 and non-enumerable old V8 strings
var cof = __webpack_require__(38);
module.exports = Object('z').propertyIsEnumerable(0) ? Object : function(it){
return cof(it) == 'String' ? it.split('') : Object(it);
};
/***/ },
/* 38 */
/***/ function(module, exports) {
var toString = {}.toString;
module.exports = function(it){
return toString.call(it).slice(8, -1);
};
/***/ },
/* 39 */
/***/ function(module, exports, __webpack_require__) {
// false -> Array#indexOf
// true -> Array#includes
var toIObject = __webpack_require__(36)
, toLength = __webpack_require__(40)
, toIndex = __webpack_require__(41);
module.exports = function(IS_INCLUDES){
return function($this, el, fromIndex){
var O = toIObject($this)
, length = toLength(O.length)
, index = toIndex(fromIndex, length)
, value;
// Array#includes uses S.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0