幾種css炫酷背景欣賞

阿新 • • 發佈：2019-02-16

這裡為大家帶來幾種表現驚人的css背景效果，純css表現效果，有桌布效果，星空效果，心形效果，磚牆效果等。請欣賞：

列表內容

background: 
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14 
%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255 
,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90 
%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;

這裡寫圖片描述

background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;

這裡寫圖片描述

background: 
radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%),
radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%),
radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%),

radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
background-color:#b03;
background-size:100px 100px;

這裡寫圖片描述

background-color: silver;
background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
linear-gradient(155deg, #d00 23px, transparent 23px),
linear-gradient(335deg, #b00 23px, transparent 23px),
linear-gradient(155deg, #d00 23px, transparent 23px);
background-size: 58px 58px; 
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;

這裡寫圖片描述

background-color: hsl(2, 57%, 40%);
background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, 
transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, 
rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, 
rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, 
rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, 
transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, 
rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, 
rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, 
rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, 
transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);

列表內容

background-color:white;
background-image:
radial-gradient(midnightblue 9px, transparent 10px),        
repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);    
background-size: 30px 30px, 90px 90px; 
background-position: 0 0;

效果圖為實際表現效果圖，讀者可以直接貼上複製，然後執行檢視效果，如果沒有看到效果，不要來私信我，你不給它寬高能看到效果嗎？

幾種css炫酷背景欣賞

這裡為大家帶來幾種表現驚人的css背景效果，純css表現效果，有桌布效果，星空效果，心形效果，磚牆效果等。請欣賞： background: radial-gradient(rgba(255,25

幾種CSS及網站開發常犯的錯誤

設計忽略電腦最大 XML 需要使用搜索引擎容器　　CSS網頁布局開始及網站常犯的幾種錯誤，無論是策劃、設計、開發，這些錯誤都要避免!鞍山治療白癜風好的醫院www.pf0412.cn 　　1、導航菜單使用圖片、FLASH 　　導航菜單使用圖片、FLASH當然比純

Android-25種開源炫酷動畫框架

提示控件進度顯示風格 spl nec 用戶 refresh class art 前言忙碌的工作終於可以停息一段時間了，最近突然有一個想法，就是自己寫一個app，所以找了一些合適開源控件，這樣更加省時，再此分享給大家，希望能對大家有幫助，此博文介紹的都是UI上面的框架

幾種CSS方法實現元素垂直居中

最近在專案中又用到了元素的垂直居中，在這裡整理總結一下可以實現元素垂直居中的幾種方法。方法1：（單行元素垂直水平居中）利用line-height實現單行元素的垂直居中。

幾種css屬性相容性寫法

mark幾種簡單介紹下為什麼需要相容性寫法： 1. 試驗一些還未成為標準的的CSS屬性——也許永遠不會成為標準， 2. 對新出現的標準的CSS3屬性特徵做實驗性的實現， 3. 對CSS3中一些新屬性

30種CSS3炫酷頁面預載入loading動畫特效

這是一組效果非常炫酷的CSS3頁面預載入loading動畫特效。該特效共有30種不同的loading效果。所有的載入動畫都是使用CSS3來完成，jQurey程式碼只是用於隱藏載入動畫。當你點選頁面的任何一個地方時，lo

文字居中的幾種CSS簡單的樣式設定方法

首先說明在CSS中的vertical-align屬性只對(X)HTML元素中擁有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>這樣的元素是沒有v

炫酷 CSS 背景效果的 10 個代碼片段

pos 圖片 http 動效變色基於用戶漸變 ani 面板在現代網頁設計中，大背景圖設計非常流行。隨著高清（現在是4K）顯示器的出現，越來越多的網頁設計師使用大背景圖來填充屏幕。因為這樣可以造成很大的視覺沖擊力，並有助於更好的傳遞所要表現的內容。但是，如果只是吧

css hover背景炫酷點綴

滑鼠懸停時候，一層半透明白色從左往右，效果圖如下：程式碼如下： <html> <head> <meta content = "text/html,charset=utf-8" > <style> html,body{ margin:0px

005_HTML製作炫酷登入介面（CSS精靈圖、背景圖片區域性顯示）

效果：說明：輸入框由三部分組成：裝區域性圖示的span 顯示提示文字的span 接受使用者輸入的input 互動效果剛開啟頁面，所有輸入框顯示提示文字當input獲得焦點，提示文字消失當input失去焦點，並且使用者沒有輸入內容

CSS中的幾種定位簡介

left 出現規則保留絕對定位影響 nbsp view 布局相對於元素在正常情況下出現在頁面文檔流的位置，CSS提供了幾種方法來定位。靜態定位（static）表示按照正常定位方案，元素盒按照在文檔流中出現的順序依次格式化；相對定位（relative）將移動元素

css-絕對居中的幾種方式

pre col code color ati absolute absolut width 方式 1 .parent{ 2 width:500px; 3 height:500px; 4 background:green; 5 position:r

關於修改css樣式的幾種js用法

click sel 改變 border blue 實現 round document selector 看了js也有一段時間了，對於修改css樣式有很多種方式可以實現，今天做一個小小的總結吧。首先寫個例子 body部分 <div class="box">&l

css中元素居中的幾種方法

ie9 技術 row 也會高度通過寬高內容 ati 對於在網頁端布局，垂直居中難於水平居中，同時實現水平和垂直居中是最難的。在移動端，因為設備的寬高是可變的，故一些方案很難實現。以下使用幾種方案對下面的html去實現居中，如有不足，可以提出寶貴的意見： <di

[轉] 用javascript修改css偽類的幾種方法

with pseudo com styles javascrip nts lan css偽類 pos 用javascript修改css偽類的幾種方法： Modify pseudo element styles with JavaScript http://pankajpar

QT中給各控件增加背景圖片(可縮放可旋轉)的幾種方法

.net detail eight iou rotate art board 按鈕 previous 1. 給QPushButton 增加背景圖片：背景圖片可根據Button大小自由縮放。 [cpp] view plain copy vo

css 垂直居中的幾種方法

div idt 浮動 spl head ref 維度 oot .html 1.圖片水平垂直居中 html: <div class="parent"> <div class="child">

兄弟連學Python----CSS中的幾種常用選擇器

元素選擇器類選擇器範圍命名沖突 post ora before 重復 -- Css選擇器常用的選擇器有如下幾種： 1、標簽選擇器標簽選擇器，此種選擇器影響範圍大，建議盡量應用在層級選擇器中。舉例： *{margin:0;padding:0} div{c

CSS實現下拉菜單的幾種方法

ansi display ora ble 下拉技術 body round too PS:轉自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一種:display:none和display:block切換 1 &l

css實現垂直居中的幾種方法

定位方法 cell 方式 middle ali ddl 顯示內容方法1、這個方法把一些 div 的顯示方式設置為表格，因此我們可以使用表格的 vertical-align 屬性。 #wrapper { //代表父元素 display: table; }

幾種css炫酷背景欣賞

相關推薦