自己 做网站学什么 平面设计创意规划设计有限公司官网

自己 做网站学什么 平面设计,创意规划设计有限公司官网,做外贸网站注意事项,wordpress获取指定分类的图像描述有的时候简单的广告条#xff0c;或部分区块#xff0c;不想弄背景图#xff0c;只好用css来实现。 但大多数人应该都会认为css实现的背景也就是各种渐变了。 那么看看下面的样式#xff0c;怎么样#xff1f; 这有个别的效果是动画效果#xff0c;颜色不停的变幻。所以…有的时候简单的广告条或部分区块不想弄背景图只好用css来实现。但大多数人应该都会认为css实现的背景也就是各种渐变了。那么看看下面的样式怎么样这有个别的效果是动画效果颜色不停的变幻。所以这截图显示不出来。效果动心了么。部分代码/* 广告条背景样式定义 */ /* 1. 钻石纹理背景 */ .diamond-texture { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.2) 2px, transparent 2px), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.15) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 3px, transparent 3px); background-size: 40px 40px, 30px 30px, 50px 50px; } /* 2. 四色渐变 */ .four-color-gradient { background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a18cd1, #fbc2eb); background-size: 400% 400%; animation: gradientShift 8s ease infinite; } keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* 3. 几何钻石 */ .geometric-diamond { background-color: #0f3460; background-image: linear-gradient(30deg, #e94560 12%, transparent 12.5%, transparent 87%, #e94560 87.5%, #e94560), linear-gradient(150deg, #e94560 12%, transparent 12.5%, transparent 87%, #e94560 87.5%, #e94560), linear-gradient(30deg, #e94560 12%, transparent 12.5%, transparent 87%, #e94560 87.5%, #e94560), linear-gradient(150deg, #e94560 12%, transparent 12.5%, transparent 87%, #e94560 87.5%, #e94560), linear-gradient(60deg, rgba(233, 69, 96, 0.5) 25%, transparent 25.5%, transparent 75%, rgba(233, 69, 96, 0.5) 75%, rgba(233, 69, 96, 0.5)), linear-gradient(60deg, rgba(233, 69, 96, 0.5) 25%, transparent 25.5%, transparent 75%, rgba(233, 69, 96, 0.5) 75%, rgba(233, 69, 96, 0.5)); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; } /* 4. 蓝紫钻石渐变 */ .blue-purple-diamond { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: relative; overflow: hidden; } .blue-purple-diamond::before { content: ; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%), linear-gradient(-45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); background-size: 60px 60px; transform: rotate(30deg); } /* 5. 霓虹钻石 */ .neon-diamond { background: linear-gradient(45deg, #ff00cc, #333399); background-image: linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.2) 50%, transparent 51%), linear-gradient(transparent 49%, rgba(255, 255, 255, 0.2) 50%, transparent 51%); background-size: 40px 40px; } /* 6. 宝石切割效果 */ .gem-cut { background: linear-gradient(135deg, #12c2e9, #c471ed, #f64f59); position: relative; overflow: hidden; } .gem-cut::after { content: ; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.1) 50%, transparent 55%), linear-gradient(-45deg, transparent 45%, rgba(255, 255, 255, 0.1) 50%, transparent 55%); background-size: 80px 80px; transform: rotate(20deg); }完整版下载吧https://wangpanmao.com/archives/7441/https://wangpanmao.com/archives/7441/