CSS3是Cascading StyleSheet Language的縮寫,用來為網頁增加豐富的樣式效果。微信小程序作為移動端APP的一種新型開發形式,也廣泛應用了CSS3技術。
一般來說,在微信小程序開發中可以將CSS樣式定義在一個單獨的樣式文件中,通過<style>
標簽引入,也可以直接寫在<view>
等標簽內部。下面列舉一些CSS3常用的微信小程序樣式效果:
/* 圓角樣式 */ .rounded { border-radius: 50%; } /* 漸變色樣式 */ .gradient-bg { background: linear-gradient(to right, #ff9966, #ff5e62); } /* 動畫樣式 */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .show { animation: fadeIn 0.5s; } /* 3D旋轉樣式 */ .rotate-x { transform-style: preserve-3d; transform: rotateX(180deg); }
除此之外,CSS3還有很多的樣式效果可以滿足各式各樣的需求。了解并熟練使用這些效果,可以讓你在微信小程序的UI設計中事半功倍。
上一篇css3 彈跳動畫
下一篇css3 彩色心形冒泡