css3發光字體

• 運行環境
• • 關鍵效果
  • 快速查詢transition
  • 快速查詢animation
  • RunCode

運行環境

iview官網打開在線編輯，直接run

關鍵效果

transition 設置過度，元素指定的屬性變動觸發
animation 設置動畫，怎么寫就怎么觸發，寫哪，哪生效
-webkit-transition
-webkit-animation

快速查詢transition

transition-property 規定設置過渡效果的 CSS 屬性的名稱。

屬性描述

none	沒有屬性會獲得過渡效果。
all	所有屬性都將獲得過渡效果。
property	定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

transition-duration 規定完成過渡效果需要多少秒或毫秒。

屬性描述

time	規定完成過渡效果需要花費的時間（以秒或毫秒計）。

默認值是 0，意味著不會有效果。

transition-timing-function 規定速度效果的速度曲線。

屬性描述

inear	規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

transition-delay 定義過渡效果何時開始。

屬性描述

time	規定在過渡效果開始之前需要等待的時間，以秒或毫秒計。

快速查詢animation

animation-name 規定需要綁定到選擇器的 keyframe 名稱。

屬性描述

keyframename	規定需要綁定到選擇器的 keyframe 的名稱。
none	規定無動畫效果（可用于覆蓋來自級聯的動畫）。

animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。

屬性描述

time	規定完成動畫所花費的時間。默認值是 0，意味著沒有動畫效果。

animation-timing-function 規定動畫的速度曲線。

屬性描述

linear	動畫從頭到尾的速度是相同的。
ease	默認。動畫以低速開始，然后加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。

animation-delay 規定在動畫開始之前的延遲。

屬性描述

time	可選。定義動畫開始前等待的時間，以秒或毫秒計。默認值是 0。

animation-iteration-count 規定動畫應該播放的次數。

屬性描述

n	定義動畫播放次數的數值。
infinite	規定動畫應該無限次播放。

animation-direction 規定是否應該輪流反向播放動畫。

屬性描述

normal	默認值。動畫應該正常播放。
alternate	動畫應該輪流反向播放。

RunCode

run，直接run

// An highlighted block <template><Poptip trigger="hover" title="Title" content="content"><Button>Hover</Button></Poptip><Poptip trigger="focus" title="Title" content="content"><Button>Focus</Button></Poptip><Poptip><Button>Click</Button><div slot='content' class='content'><p>qrk</p></div></Poptip> </template> <script>export default {} </script> <style>.content {width: 250px;height: 250px;}p {font-family: 'Audiowide';text-align: center;color: #87ceeb;font-size: 7em;-webkit-transition: all 1.5s ease;transition: all 1.5s ease;}p:hover {color: #fff;-webkit-animation: Glow 1.5s ease infinite alternate;animation: Glow 1.5s ease infinite alternate;}@keyframes Glow {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #87ceeb,0 0 70px #87ceeb,0 0 80px #87ceeb,0 0 100px #87ceeb,0 0 150px #444444}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #87ceeb,0 0 35px #87ceeb,0 0 40px #87ceeb,0 0 50px #87ceeb,0 0 75px #87ceeb} } </style>

總結

以上是生活随笔為你收集整理的css3发光字体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。