---
title: 文字特效 # 簡報的名稱
tags: CSS # 簡報的標籤
---

<!-- 自訂CSS設定 -->
<style>

.comment {
font-size:70%;
color: grey;
}

.block {
cursor:default;
background: rgba( 200, 200, 200, .1 );
font-size: 85%;
border-radius: 5px;
padding: .4em;
width:auto;
text-align:center;
transition:0.5s;
position:relative;
bottom:0;
}

.block:hover{
font-size:1.5em;
padding:.2em;
}

.quiz {
background-color:rgba( 200, 200, 200, .1 );
padding:.6em;
position:relative;
width:90%;
counter-reset: my-counter;
left:-.5em;
margin-left:.5em;
}

[data-ans]{
list-style-type: none;
position:relative;
margin:.3em;
transition:1s;
counter-increment: my-counter;
}

[data-ans]::after {
content: '';
background-color:rgba( 200, 200, 200, .1 );
height: 100%;
width: 90%;
border-radius:.3em;
position:absolute;
left:-.3em;
margin-left:2em;
transition:1s;
z-index: -1;
}

.markdown-body [data-ans]::after {
height: 1.5em;
}

[data-ans]::before {
content: counter(my-counter);
margin-right:.5em;
position:absolute;
background-color:rgba(50, 50, 50,.8);
height:1.4em;
width:1.4em;
color:#ECF0F1;
text-align:center;
border-radius:50%;
position:relative;
float:left;
}

.quiz:hover [data-ans="x"] {
opacity:.4;
}

.quiz:hover [data-ans="x"]::before {
animation: wrong-ans 1s ease both;
}

.quiz:hover [data-ans="o"]::before {
animation: correct-ans 1s ease both;
}

@keyframes wrong-ans {
to{
transform: rotateY(180deg);
content: '✕';
}
}

@keyframes correct-ans {
to{
transform: rotateY(180deg);
content: '○';
}
}
</style>

<!-- 內建CSS設定 -->
<style>

.slides ::selection{
color:black;
}

/* 單行codeblock */
code:not([class$="hljs"]){
cursor:default;
background: rgba(255, 255, 255, .1);
font-size: 85%;
border-radius: 5px;
padding:.1em .2em;

}

code:not([class$="hljs"]):hover{
background: rgba(255, 255, 255, .3);
}

/* 單行codeblock (瀏覽模式) */
.markdown-body code{
background-color: rgba( 0, 0, 0, .04 );
border-radius: 3px;
padding:.3em 0 .2em 0;

}

.markdown-body code:not([class$="hljs"]):hover{
background-color: rgba( 0, 0, 0, .1 );
}

/* 螢光筆 */
mark {
cursor:default;
padding: 0px 1px;
position: relative;
}

.slides mark {
background-color: transparent;
color:white;
}
.markdown-body mark{
background-color: transparent;

}

mark::after {
content: '';
position: absolute;
width: 100%;
bottom: .2em;
left: 0;
border-bottom: .3em solid #07A5D3;
border-radius: .1em;
opacity: .4;
transition: 0.3s;
z-index: -1;
}

mark:hover::after{
bottom: -.1em;
border-bottom: 1.3em solid #07A5D3;
}

table .hljs-ln tr{
font-size: 2em;
}
</style>