百万石 BtoB WEB受注システム
BtoB EC
既存システムの変更不要で即行稼動!
チャンスロス無し
多数の受注オペレーター不要
大幅コスト削減
スマートフォン、iPad等の端末から発注可能
顧客満足度アップ
百万石 BtoB WEB受注システム
BtoB EC
既存システムの変更不要で即行稼動!
チャンスロス無し
多数の受注オペレーター不要
大幅コスト削減
スマートフォン、iPad等の端末から発注可能
顧客満足度アップ
サンプルのhtmlソース
<div id="rotate-words">
<div>百万石 BtoB WEB受注システム<br><span>BtoB EC</span></div>
<div>既存システムの変更不要で即行稼動!<br><span>チャンスロス無し</span></div>
<div>多数の受注オペレーター不要<br><span>大幅コスト削減</span></div>
<div>スマートフォン、iPad等の端末から発注可能<br><span>顧客満足度アップ</span></div>
<div>百万石 BtoB WEB受注システム<br><span>BtoB EC</span></div>
<div>既存システムの変更不要で即行稼動!<br><span>チャンスロス無し</span></div>
<div>多数の受注オペレーター不要<br><span>大幅コスト削減</span></div>
<div>スマートフォン、iPad等の端末から発注可能<br><span>顧客満足度アップ</span></div>
</div>
サンプルのCSSソース
#rotate-words {
width:100%;
max-width:500px;
margin:auto;
padding:20% 0;
font-size:2.2em;
}
#rotate-words span {
display:block;
height:50px;
font-size:.7em;
}
#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 32s linear infinite 0s;
}
@keyframes rotate-word {
0% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
3% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(.9)}
12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
80% { opacity: 0}
100% { opacity: 0}
}
#rotate-words div:nth-child(2) { animation-delay: 4s}
#rotate-words div:nth-child(3) { animation-delay: 8s}
#rotate-words div:nth-child(4) { animation-delay: 12s}
#rotate-words div:nth-child(5) { animation-delay: 16s}
#rotate-words div:nth-child(6) { animation-delay: 20s}
#rotate-words div:nth-child(7) { animation-delay: 24s}
#rotate-words div:nth-child(8) { animation-delay: 28s}
@keyframes author {
0% { opacity: 0; transform: translateY(100px);filter:blur(10px);transform: scaleY(2)}
20% { opacity:0; transform: translateY(200px);filter:blur(10px); transform: scaleY(2)}
30% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(1)}
90% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(.9)}
100% { opacity:0; transform: translateY(0);filter:blur(10px);transform: scale(2)}
}