【新拟态】左上角标签样式、ICON图标样式、模仿AppStore的应用图标
生活随笔
收集整理的這篇文章主要介紹了
【新拟态】左上角标签样式、ICON图标样式、模仿AppStore的应用图标
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
?
效果如圖↑
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {background: #eeeff2;}/*左上角標簽，父元素必須設置position: relative;overflow: hidden;height: 大于150;width: 大于150px;，同時，角標標簽內加入屬性superscript-title="左上角標簽文字內容"*/.subscript:after {position: absolute;top: 15px;left: -45px;width: 150px;height: 30px;content: attr(superscript-title);text-align: center;font-size: 14px;color: white;line-height: 30px;font-family: 'Microsoft YaHei', 'PingFangSC-Regular', 'sans-serif', 'San Francisco', 'Microsoft Sans Serif', 'Arial'; /*背景旋轉角度漸變*/background: -webkit-linear-gradient(90deg, orange 0%, orangered 100%); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(90deg, orange 0%, orangered 100%); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(90deg, orange 0%, orangered 100%); /* Firefox 3.6 - 15 */background: linear-gradient(90deg, orange 0%, orangered 100%); /* 標準的語法（必須放在最后） *//*旋轉角標*/-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}/*時下流行的風格--【新擬態(tài)】________________________*/.subscript {position: relative;overflow: hidden;font-family: 'Arial';margin: 100px;border-radius: 40px;width: 200px;height: 200px;box-shadow: 0 20px 55px rgba(0, 0, 0, 0.1), -10px -10px 15px rgba(255, 255, 255, 0.9);background: linear-gradient(-180deg, #eee, #f9f9f9);}/*漸變文字樣式________________________*/.subscript p {margin: 0;padding: 0;line-height: 200px;font-size: 100px;text-align: center;color: #238aea;/*漸變文字（僅谷歌內核瀏覽器支持）*/background: -webkit-linear-gradient(0deg, #1858f1, #32c0e3);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}</style>
</head>
<body>
<div class="subscript" superscript-title="標簽內容"><p>Aa</p>
</div>
</body>
</html>總結
以上是生活随笔為你收集整理的【新拟态】左上角标签样式、ICON图标样式、模仿AppStore的应用图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Vant框架的组件van-pull-
- 下一篇： 【一语点醒梦中人】如何优雅地合并两个JS