CSS制作夢幻彩虹效果
發(fā)布時間：2016-07-06 16:12:09 作者：佚名 
我要評論
我要評論每個人都喜歡彩虹，都期待彩虹的出現(xiàn)，這篇文章主要為大家詳細(xì)介紹了CSS制作夢幻彩虹的5種效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天看到一篇文章，說到margin的塌陷的問題，并提供了好幾個例子。
自己之前還沒怎么遇到過這個問題，正好來研究一下。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div class="box1"></div>
- <div class="box2"></div>
- <div class="box3"></div>
- <div class="box4"></div>
css樣式一，使用margin塌陷：
CSS Code復(fù)制內(nèi)容到剪貼板
- .box1, .box2, .box3 {
- width: 200px;
- }
- .box1{
- margin-bottom: -80px;
- height:100px;
- background: blue;
- }
- .box2 {
- margin-bottom:-40px;
- height:60px;
- background: #ffff00;
- }
- .box3{
- height:20px;
- background: #ff0000;
- }
效果：
css樣式二，也是使用的margin塌陷，不過做出來的是弧形的彩虹：
CSS Code復(fù)制內(nèi)容到剪貼板
- .box1{
- width: 400px;
- height: 200px;
- overflow: hidden;
- }
- .box1::before{
- float: left;
- display: block;
- height: 400px;
- width:400px;
- border-radius: 100%;
- border: solid 10px blue;
- box-sizing: border-box;
- content: "";
- }
- .box1::after{
- margin-top: 10px;
- margin-left: 10px;
- display: block;
- width: 380px;
- height: 380px;
- border: solid #ffff00 10px;
- border-radius: 100%;
- box-sizing: border-box;
- content: "";
- }
- .box2{
- float: left;
- margin-top: -180px;
- margin-left: 20px;
- width: 360px;
- height: 180px;
- overflow: hidden;
- }
- .box2::before{
- float: left;
- display: block;
- margin: 0;
- width: 360px;
- height: 360px;
- border-radius: 100%;
- border: solid 10px #ff0000;
- box-sizing: border-box;
- content: "";
- }
- .box2::after{
- display: block;
- margin-top: 10px;
- margin-left: 10px;
- width: 340px;
- height: 340px;
- border-radius: 100%;
- border: solid 10px #ffff00;
- box-sizing: border-box;
- content: "";
- }
- .box3{
- margin-top: -160px;
- margin-left: 40px;
- width: 340px;
- height: 160px;
- overflow: hidden;
- }
- .box3::before{
- float: left;
- display: block;
- width: 320px;
- height: 320px;
- border: solid 10px blue;
- border-radius: 100%;
- box-sizing: border-box;
- content: "";
- }
效果：
css樣式三，使用的是box-shadow：
CSS Code復(fù)制內(nèi)容到剪貼板
- .box4{
- width: 200px;
- height: 200px;
- box-shadow: 0 10px 0 red,0 20px 0 yellow, 0 30px 0 green,0 40px 0 blue,0 50px 0 purple;
- }
效果：
CSS樣式四，使用position:absolute來實現(xiàn)，感覺這種是最常見的了
CSS Code復(fù)制內(nèi)容到剪貼板
- .box1{
- position: absolute;
- width: 200px;
- height: 100px;
- background: #008aff;
- }
- .box2{
- position: absolute;
- margin-top: 20px;
- width: 200px;
- height: 60px;
- background: #ffff00;
- }
- .box3{
- position: absolute;
- margin-top: 40px;
- width: 200px;
- height: 20px;
- background: #ff6633;
- }
效果：
CSS樣式五，使用radial-gradient：
CSS Code復(fù)制內(nèi)容到剪貼板
- .box4{
- width: 260px;
- height: 130px;
- overflow: hidden;
- }
- .box5{
- width: 260px;
- height: 260px;
- border-radius: 100%;
- background: radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
- background: -moz-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
- background: -webkit-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
- }
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
純CSS實現(xiàn)顏色漸變效果（包含環(huán)形漸變、線性漸變、彩虹效果等）
通過CSS border-radius，我向大家展示了如何實現(xiàn)方形元素的圓角效果，這解決了以前美工畫出這種效果而開發(fā)人員無法實現(xiàn)的問題。CSS漸變色(Gradients)也是一個類似的技術(shù)。2014-05-07- 想不想擁有可愛的多啦A夢，這篇文章主要教大家使用CSS畫出一個可愛神奇的多啦A夢,感興趣的小伙伴們可以參考一下2016-07-05
- 這篇文章主要為大家詳細(xì)介紹了CSS下拉菜單簡單制作教程，鼠標(biāo)移動到指定元素上會出現(xiàn)下拉菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-05
- 這篇文章主要為大家詳細(xì)介紹了CSS3邊框的不同效果實現(xiàn)代碼，包括CSS3圓角邊框、盒陰影、邊界圖片的制作方法，感興趣的小伙伴們可以參考一下2016-07-01
- 這篇文章主要為大家詳細(xì)介紹了CSS3制作酷炫的三維相冊效果的具體代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-01
- 下面小編就為大家?guī)硪黄狢SS實現(xiàn)曲面陰影效果的簡單實例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-08
- 下面小編就為大家?guī)硪黄狢SS3制作漂亮的照片墻的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-08
- 這篇文章主要為大家詳細(xì)介紹了CSS3制作漂亮的照片墻的具體步驟，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-07
CSS3輕松實現(xiàn)清新 Loading 效果的簡單實例
下面小編就為大家?guī)硪黄狢SS3輕松實現(xiàn)清新 Loading 效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06- CSS3中在rgb顏色的基礎(chǔ)上又有了透明度的設(shè)置功能成為rgba屬性,除此之外下面還會講到CSS3新增的hsl及hsla顏色的用法,下面就來看一下CSS3中各種顏色屬性的使用教程2016-05-17