iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
0
Modern Web

前端網頁設計學習旅程系列 第 30

Day30_CSS3-Text效果

繼續介紹CSS3的文字效果

文字陰影

h1
{
	text-shadow: 5px 5px 5px #FF5500;
}

https://ithelp.ithome.com.tw/upload/images/20201012/20130503Sq2UY4RDSh.png

方塊陰影

div
{
	width:100px;
	height:100px;
	background-color:orange;
	box-shadow: 10px 10px 5px #555555;
}

https://ithelp.ithome.com.tw/upload/images/20201012/20130503tHH3uS514R.png

陰影顏色

div {
    width: 100px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px green;
}

https://ithelp.ithome.com.tw/upload/images/20201012/20130503TorIdpgtwS.png

自動換行

p.test
{
	width:11em; 
	border:1px solid #000000;
	word-wrap:break-word;
}

https://ithelp.ithome.com.tw/upload/images/20201012/20130503S8noyP4vrt.png

動畫效果

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;}
	to {background:yellow;}
}

在五秒內,顏色從紅色轉變為黃色

其他動畫效果

CSS3其他動畫效果可以參考W3C
三十天終於結束了!!!


上一篇
Day29_CSS3
系列文
前端網頁設計學習旅程30

尚未有邦友留言

立即登入留言