コニファ・ロゴ

csstest:[CSS]映画のオープニングクレジットのようなニュースティッカー

CSSのみで作る映画のオープニングクレジットなどでよく見かける雰囲気のニュース(情報)ティッカーです。

百万石 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)}
}

 

 

戻るボタン