1. 復(fù)古信封邊框
示例代碼:
html
<div>
I have a nice stone art border,don't i look pretty?
</div>
css
width: 300px;
height: 170px;
padding: 1em;
border:1em solid transparent;
background:
linear-gradient(white,white),
repeating-linear-gradient(-45deg, #ff6936 0, #ff6936 12.5%, transparent 0, transparent 25%,#58a 0,#58a 37.5%,transparent 0,transparent 50%);
background-clip: padding-box,border-box;
background-size: 8em 8em;
復(fù)古信封
解釋:background-clip:padding-box用于顯示內(nèi)容背景色白色,同時覆蓋條紋背景
background-clip:border-box用于顯示邊框(條紋背景)
2.螞蟻軍動態(tài)框
先上圖吧
無法顯示動態(tài)效果 我很抱歉
跟小時候理發(fā)店門口的滾動條很相似。大家自己想象啊,心有多大,夢有多大!!
css
width: 300px;
height: 170px;
padding: 3px;
border: 3px solid transparent;
background:
linear-gradient(white,white),
repeating-linear-gradient(-45deg, black 0, black 25%, tan 0,tan 50%);
background-clip: padding-box,border-box;
background-size: 1.2em 1.2em;
-moz-animation: ants 12s linear infinite;
animation: ants 12s linear infinite;
css動畫
@keyframes ants { 100%{ background-position:100% }}
3.還有一個我珍藏