Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
つべアンケ  アニメーションする拡張デザイン

これは何

  • YouTube配信者向けChrome拡張機能「つべアンケ」のアニメーションするデザイン拡張です。
  • ご本家様

誰が使っていいの

  • ご自由に。これを元にした改変もOKです。
  • 使用報告は必須ではありませんが、本デザインの作者に連絡頂けると次回作作る励みになるかもです。

使い方

  • 拡張機能「つべアンケ」をインストール
  • このgistをDLする
  • 自分で現在開催しているYouTUbeのライブ配信画面を開き、「アンケート機能を使う」を押す
  • 「外部CSSを読み込む」横のファイル選択ボタンから好きな方のCSSを読み込ませる
  • あとは公式の操作方法に従って下さい

内容物

  • tubeenquete_animation_theme01.css
    • 隅で三角が外側に動く
    • lxi_theme01
  • tubeenquete_animation_theme02.css
    • 隅で四角が伸びたり縮んだりする
    • lxi_theme02
@keyframes questionnaire_animation-upperright {
0%, 75%, 100%{
top: 0;
right: 0;
}
25% {
top: -5px;
right: -5px;
}
}
@keyframes questionnaire_animation-bottomleft {
0%, 75%, 100%{
bottom: 0;
left: 0;
}
25% {
bottom: -5px;
left: -5px;
}
}
/* グリーンバック */
body {
background-color: lime;
}
.questionnaire__result {
text-align: left;
margin-top: 20px;
width : 80%;
}
.questionnaire__result-window {
text-align: center;
width: 100%;
min-height: 300px;
padding: 10px;
}
/* 画面上部のアンケートタイトル部分 */
.questionnaire__result-title {
font-size: 1.75em;
width: 100%;
padding: 30px;
color: #fff;
text-align: center;
background: rgb(59, 59, 59);
}
/* アンケート項目text部分 */
.questionnaire__result-text {
font-size: 1.5em;
}
/* アンケートの枠デザイン */
.questionnaire__result-item {
display: inline-block;
position: relative;
width: 350px;
vertical-align: top;
padding: 25px;
overflow-wrap: break-word;
color: #fff;
background: #313a62;
margin: 10px 15px;
text-align: center;
}
.questionnaire__result-item::before {
content: '';
position: absolute;
top: 0;
right: 0;
z-index: 10;
border-top: 20px solid #F0897F;
border-right: 50px solid #f6da69;
border-bottom: 20px solid transparent;
border-left: 50px solid transparent;
animation-name: questionnaire_animation-upperright;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: infinite;
}
.questionnaire__result-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
border-top: 20px solid transparent;
border-right: 50px solid transparent;
border-bottom: 20px solid #F0897F;
border-left: 50px solid #f6da69;
animation-name: questionnaire_animation-bottomleft;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: infinite;
}
/* パーセンテージ(黄色)の部分 */
.questionnaire__result-percentage {
color: #fff;
font-weight: bold;
font-size: 1.75em;
}
@keyframes questionnaire_animation-upperright {
0%, 25%, 100% {
height: 40px;
box-shadow: -40px 0 #f6da69, -80px 0 #ffffff;
}
75% {
height: 40px;
box-shadow: -40px -20px #f6da69, -80px -30px #ffffff;
}
}
@keyframes questionnaire_animation-bottomleft {
0%, 25%, 100% {
height:40px;
box-shadow: 40px 0 #f6da69, 80px 0 #ffffff;
}
75% {
height:40px;
box-shadow: 40px 20px #f6da69, 80px 30px #ffffff;
}
}
/* グリーンバック */
body {
background-color: lime;
}
.questionnaire__result {
text-align: left;
margin-top: 20px;
width : 80%;
}
.questionnaire__result-window {
text-align: center;
width: 100%;
min-height: 300px;
padding: 10px;
}
/* 画面上部のアンケートタイトル部分 */
.questionnaire__result-title {
font-size: 1.75em;
width: 100%;
padding: 30px;
color: #fff;
text-align: center;
background: rgb(59, 59, 59);
}
/* アンケート項目text部分 */
.questionnaire__result-text {
font-size: 1.5em;
}
/* アンケートの枠デザイン */
.questionnaire__result-item {
display: inline-block;
position: relative;
overflow: hidden;
width: 350px;
vertical-align: top;
padding: 25px;
overflow-wrap: break-word;
color: #fff;
background: #313a62;
margin: 10px 15px;
text-align: center;
}
.questionnaire__result-item::before {
content: '';
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 30px;
height: 40px;
background-color: #F0897F;
box-shadow: -40px 0 #f6da69, -80px 0 #ffffff;
animation-name: questionnaire_animation-upperright;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: infinite;
}
.questionnaire__result-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
width: 30px;
height: 40px;
background-color: #F0897F;
box-shadow: 40px 0 #f6da69, 80px 0 #ffffff;
animation-name: questionnaire_animation-bottomleft;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: infinite;
}
/* パーセンテージ(黄色)の部分 */
.questionnaire__result-percentage {
color: #fff;
font-weight: bold;
font-size: 1.75em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment