CSS transform: rotate

旋轉

transform: rotate(向右旋轉的角度deg)

範例

.rect
.rect
 width: 100px
 height: 100px
 border: solid 1px
 transform: rotate(30deg)

Display

原本的

 

旋轉後的

 

指定旋轉基點:transform-origin

  • 100%:以最右側不動,旋轉
  • 0%:以最左側不動,旋轉
  • default 50%:中心不動,旋轉
.bar
.bar
 width: 200px
 height: 3px
 background-color: #11c1a4
 transform: rotate(45deg)
 //左側為基點
 transform-origin: 0%

原本的

旋轉後的

 

 

 

 

 

 

 

 

CSS Animation

解説

  1. @keyframes 指定動畫名稱
    0%
    位置
    100%
    位置
  2. 要動的元素增加一行
    animation:  動畫名稱  秒數  次數

範例

.box
 .block 上下移動
.box
 width: 350px
 height: 300px
 border: solid 1px
 position: relative
 
.block
 width: 50px
 height: 50px
 border: solid 1px
 position: absolute
 bottom: 0px
 left: 150px
 animation: ani1 2s infinite
 
@keyframes ani1
 0%
   bottom: 250px
 50%
   bottom: 0px
 100%
   bottom: 250px

Display

上下移動

transition-delay

意義

變化延遲某指定秒數

範例

.block
  h5 請點選
  h1 標題
  p 内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文
.block
  border: solid 2px
  width: 300px
  height: 300px
  padding: 20px
  font-family: 微軟正黑體
  &:hover
    & h1,& p
      opacity: 1 
  & h1,& p
    opacity: 0
    transition-duration: 0.5s
  & p
    transition-delay: 0.5s

Dsiplay

請點選

標題

内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内文内

hover & active

定義

hover:游標移過
active:游標點擊時

hover

.block 請點擊
.block
 width: 100px
 height: 100px
 border: solid 1px

.block:hover
 background-color: #283618

Display

請點擊

active

.block 請點擊
.block
 width: 100px
 height: 100px
 border: solid 1px

.block:active
 background-color: #F0F3BD

Display

請點擊

進階:操控内部元素

.block1 請點擊
 .block2
 .block3
.block1
 width: 100px
 height: 100px
 border: solid 1px

.block2,.block3
 width: 20px
 height: 20px
 border: solid 1px

.block1:hover 
 .block2
  background-color: #04A777
  width: 80px

.block1:active
 background-color: #05668D

Display

請點擊

進階:延緩變化

.block1 請點擊
 .block2
 .block3
.block1
 width: 100px
 height: 100px
 border: solid 1px

.block2,.block3
 width: 20px
 height: 20px
 border: solid 1px

.block1:hover 
 .block2
  background-color: #04A777
  width: 80px
  transition-duration: 1s


.block1:active
 background-color: #05668D
 transition-duration: 1s

Display

請點擊

CSS偽元素

注意事項

空元素 (img, br等,沒有一對的元素),不能使用偽元素

目的

用CSS在HTML內容的前面或後面增添文字(可以批量增添)
偽元素下,文字要用【””】框住
一定要寫一行content

範例

div(data-size="small") 400
div(data-size="medium") 800 
div(data-size="large") 1200
div
  border: solid 2px black
  width: 150px
  height: 100px
  padding: 20px
  margin: 20px
  &::before
    content: attr(data-size) "-"
  &::after
    content: "$"

Display

small-400$
medium-800$
large-1200$

 

網頁縮小後格式不跑掉的方法

狀況

寫好的網頁一經視窗縮小,內容排版全部亂掉。

改善

視窗縮小後內文格式不動,但下方產生寬度卷軸。

方法

  1. 在大框架與所有內容中間新增一個div,變成大框架-父元素,新div-中元素,所有內容-子元素
  2. 修改新div的CSS
    div{
    width: 網頁格式能維持的最小寬度px;
    margin-right: auto;
    margin-left: auto;
    }
    

範例

CODEPEN

Glory Effect

Text Shadow

屬性:text-shadow: 水平陰影 垂直陰影 擴散程度 顏色;

範例

 <h1>微弱光暈</h1>
 h1{
color:#fff;
text-shadow: 0px 0px 15px #ffdd65;
position: absolute; 
top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-50%);
}

Display

微弱光暈

重複疊加光暈,增強光圈

<h1>中等光暈</h1>
h1{
color:#fff;
text-shadow: 0px 0px 15px #ffdd65, 0px 0px 5px #fff;
position: absolute; 
top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-50%);
}

Display

中等光暈

CodePen