当前位置:首页 > 技术博客 > CSS > 简约大气的网页背景渐变特效

简约大气的网页背景渐变特效

4年前 (2021-10-16)CSS916

渐变色背景的应用在各种网页制作、ui设计是非常普遍的,分享的这套渐变背景简约大气,颜色配比很灵活,给人舒适感。有没有也觉得不错的小伙伴呢?

bogy{
    background-image: radial-gradient(rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0) 40vw), radial-gradient(rgba(0, 128, 0, 0.3), rgba(0, 128, 0, 0) 40vw), radial-gradient(rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0) 40vw), radial-gradient(rgba(255, 255, 0, 0.3), rgba(255, 255, 0, 0) 40vw), radial-gradient(rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0) 40vw);
    background-position: -40vw 14rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw);
    background-size: 80vw 80vw;
}

当前页面就是用了这个效果

版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/193.html

标签: CSS

相关文章

css颜色渐变数值调试

css颜色渐变数值调试

<style> :root {   --color-background: #e8e0fd; &nbs...

3D文字关注动画页面

3D文字关注动画页面

使用css3 keyframes 属性制作蓝色大气的感谢关注3D数字动画特效。适用于404或引导页。<style> @import ur...

CSS原子环绕标志动画

CSS原子环绕标志动画

CSS原子环绕标志动画<head> <meta charset="UTF-8"> <meta...

纯css loading

纯css loading

页面加载loading沙漏动画特效<html> <head> <style> .container {...

糖果风格的动画按钮

糖果风格的动画按钮

这是一款糖果风格的动画按钮,共 16 个,每个按钮都有不同的渐变色和动画形式。<!DOCTYPE html>  &nb...

CSS卡片样式

CSS卡片样式

<html> <head>     <meta charset=&quo...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。