CSS3 制作綻放的蓮花采用效果疊加實(shí)現(xiàn)
發(fā)布時(shí)間：2013-01-31 09:05:02 作者：佚名 
我要評(píng)論
我要評(píng)論這效果看起來挺炫，反正我很喜歡，大家不妨看看，或許對(duì)你學(xué)習(xí)css3有所幫助，但原理并不復(fù)雜，能實(shí)現(xiàn)一片花瓣動(dòng)起來，就能實(shí)現(xiàn)9片花瓣。效果的疊加而已，感興趣的朋友可以練練手啊
這效果看起來挺炫，但原理并不復(fù)雜，能實(shí)現(xiàn)一片花瓣動(dòng)起來，就能實(shí)現(xiàn)9片花瓣。效果的疊加而已。
HTML：
<section class="demo">
<div class="box">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>
</section>
CSS：
View Code
body {
background-color: #000;
}
.demo {
margin:0px auto;
width: 500px;
}
/*蓮花花瓣的容器*/
.box {
position: relative;/*設(shè)置相對(duì)定位，因?yàn)榛ò甓家M(jìn)行絕對(duì)定位*/
height: 400px;
margin-top:400px
}
/*花瓣進(jìn)行絕對(duì)定位*/
.box .leaf {
position: absolute;
}
/*繪制蓮花花瓣*/
.leaf {
margin-top:0px;
width: 200px;
height: 200px;
border-radius: 200px 0px;/*制作花瓣角*/
background: -moz-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣顏色*/
background: -webkit-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣顏色*/
opacity: .6;
filter:alpha(opacity=50);
transform: rotate(135deg);/*花瓣旋轉(zhuǎn)135deg*/
transform-origin: top right;/*重置花瓣旋轉(zhuǎn)原點(diǎn)，這個(gè)很重要*/
}
@keyframes show-2 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(45deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-3 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(65deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-4 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(85deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-5 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(105deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-6 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(165deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-7 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(185deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-8 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(205deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-9 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(225deg);
}
%{
transform: rotate(135deg);
}
}
.leaf:nth-child(1) {
background: -moz-linear-gradient(45deg,rgba(250,250,250,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣顏色*/
}
.leaf:nth-child(2) {
animation: show-2 6s ease-in-out infinite;
}
.leaf:nth-child(3) {
animation: show-3 6s ease-in-out infinite;
}
.leaf:nth-child(4) {
animation: show-4 6s ease-in-out infinite;
}
.leaf:nth-child(5) {
animation: show-5 6s ease-in-out infinite;
}
.leaf:nth-child(6) {
animation: show-6 6s ease-in-out infinite;
}
.leaf:nth-child(7) {
animation: show-7 6s ease-in-out infinite;
}
.leaf:nth-child(8) {
animation: show-8 6s ease-in-out infinite;
}
.leaf:nth-child(9) {
animation: show-9 6s ease-in-out infinite;
}
演示：
提示：您可以先修改部分代碼再運(yùn)行
HTML：
復(fù)制代碼
代碼如下:<section class="demo">
<div class="box">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>
</section>
CSS：
復(fù)制代碼
代碼如下:View Code
body {
background-color: #000;
}
.demo {
margin:0px auto;
width: 500px;
}
/*蓮花花瓣的容器*/
.box {
position: relative;/*設(shè)置相對(duì)定位，因?yàn)榛ò甓家M(jìn)行絕對(duì)定位*/
height: 400px;
margin-top:400px
}
/*花瓣進(jìn)行絕對(duì)定位*/
.box .leaf {
position: absolute;
}
/*繪制蓮花花瓣*/
.leaf {
margin-top:0px;
width: 200px;
height: 200px;
border-radius: 200px 0px;/*制作花瓣角*/
background: -moz-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣顏色*/
background: -webkit-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣顏色*/
opacity: .6;
filter:alpha(opacity=50);
transform: rotate(135deg);/*花瓣旋轉(zhuǎn)135deg*/
transform-origin: top right;/*重置花瓣旋轉(zhuǎn)原點(diǎn)，這個(gè)很重要*/
}
@keyframes show-2 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(45deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-3 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(65deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-4 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(85deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-5 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(105deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-6 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(165deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-7 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(185deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-8 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(205deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-9 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(225deg);
}
%{
transform: rotate(135deg);
}
}
.leaf:nth-child(1) {
background: -moz-linear-gradient(45deg,rgba(250,250,250,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣顏色*/
}
.leaf:nth-child(2) {
animation: show-2 6s ease-in-out infinite;
}
.leaf:nth-child(3) {
animation: show-3 6s ease-in-out infinite;
}
.leaf:nth-child(4) {
animation: show-4 6s ease-in-out infinite;
}
.leaf:nth-child(5) {
animation: show-5 6s ease-in-out infinite;
}
.leaf:nth-child(6) {
animation: show-6 6s ease-in-out infinite;
}
.leaf:nth-child(7) {
animation: show-7 6s ease-in-out infinite;
}
.leaf:nth-child(8) {
animation: show-8 6s ease-in-out infinite;
}
.leaf:nth-child(9) {
animation: show-9 6s ease-in-out infinite;
}
演示：
提示：您可以先修改部分代碼再運(yùn)行
相關(guān)文章
jQuery/CSS3實(shí)現(xiàn)的可折疊側(cè)邊欄菜單特效源碼
這是一款非常優(yōu)秀的jQuery菜單插件源碼，這款菜單插件是可折疊的側(cè)邊欄菜單，其菜單特點(diǎn)是點(diǎn)擊按鈕可以實(shí)現(xiàn)展開和折疊菜單，并伴隨動(dòng)畫效果。而且每一個(gè)菜單項(xiàng)都有一個(gè)小圖2014-09-01
橢圓形CSS3動(dòng)畫按鈕，Animated Buttons源碼，Animated Buttons動(dòng)態(tài)按鈕源碼下載，響應(yīng)鼠標(biāo)動(dòng)作，鼠標(biāo)放上的時(shí)候，按鈕前端出現(xiàn)動(dòng)畫效果，一個(gè)小箭頭不停的向下變化，感謝大2012-10-03
CSS3制作了一個(gè)動(dòng)畫導(dǎo)航效果(鼠標(biāo)懸浮會(huì)放大)
使用了CSS3的animation、transform、transition制作了一個(gè)動(dòng)畫導(dǎo)航效果，其中利用了Ligature Icon UI制作了導(dǎo)航中的ICON圖標(biāo),需要了解的朋友可以參考下2012-12-27
css3 loading css3技術(shù)實(shí)現(xiàn)5款不同風(fēng)格的網(wǎng)頁loading加載動(dòng)畫案例
CSS3技術(shù)實(shí)現(xiàn)5款不同風(fēng)格的網(wǎng)頁Loading動(dòng)畫，點(diǎn)擊每一個(gè)Demo，都有不同的Loading效果，一個(gè)完美的CSS3動(dòng)畫實(shí)例2013-01-18
如何使用html5與css3完成google涂鴉動(dòng)畫
今天我們將介紹，如何使用css3完成google涂鴉動(dòng)畫。當(dāng)你點(diǎn)擊demo頁面的【開始】按鈕之后，頁面中的騎手和馬匹將會(huì)運(yùn)動(dòng)起來,需要的朋友可以了解下
2012-12-16 CSS3 實(shí)現(xiàn)側(cè)邊欄展開收起動(dòng)畫
這篇文章主要介紹了如何使用CSS3 實(shí)現(xiàn)側(cè)邊欄展開收起動(dòng)畫，并附上了示例代碼，非常的詳細(xì)，推薦給需要的小伙伴。
2014-12-22