时间:2020-11-07来源:www.pcxitongcheng.com作者:电脑系统城
先来看效果:
这效果看起来挺炫,但原理并不复杂,能实现一片花瓣动起来,就能实现9片花瓣。效果的叠加而已。
HTML:
?1 2 3 4 5 6 7 8 9 10 11 12 13 |
< 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:
?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
View Code body { background-color : #000 ; } .demo { margin : 0px auto ; width : 500px ; } /*莲花花瓣的容器*/ .box { position : relative ; /*设置相对定位,因为花瓣都要进行绝对定位*/ height : 400px ; margin-top : 400px } /*花瓣进行绝对定位*/ .box .leaf { position : absolute ; } /*绘制莲花花瓣*/ .leaf { margin-top : 0px ; width : 200px ; height : 200px ; border-radius: 200px 0px ; /*制作花瓣角*/ background : -moz-linear-gradient( 45 deg,rgba( 188 , 190 , 192 , 1 ) 8% ,rgba( 158 , 31 , 99 , 1 ) 30% ,rgba( 158 , 31 , 99 , 1 ) 100% ); /*制作花瓣颜色*/ background : -webkit-linear-gradient( 45 deg,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( 135 deg); /*花瓣旋转135deg*/ transform-origin: top right ; /*重置花瓣旋转原点,这个很重要*/ } @keyframes show -2 { 0% { transform: rotate( 135 deg); } 50% { transform: rotate( 45 deg); } 100% { transform: rotate( 135 deg); } } @keyframes show -3 { 0% { transform: rotate( 135 deg); } 50% { transform: rotate( 65 deg); } 100% { transform: rotate( 135 deg); } } @keyframes show -4 { 0% { transform: rotate( 135 deg); } 50% { transform: rotate( 85 deg); } 100% { transform: rotate( 135 deg); } } @keyframes show -5 { 0% { transform: rotate( 135 deg); } 50% { transform: rotate( 105 deg); } 100% { transform: rotate( 135 deg); } } @keyframes show -6 { 0% { transform: rotate( 135 deg); } 50% { transform: rotate( 165 deg); } 100% { transform: rotate( 135 deg); } } @keyframes show -7 { 0% { transform: rotate( 135 deg); } 50% { transform: rotate( 185 deg); } 100% { transform: rotate( 135 deg); } } @keyframes show -8 { 0% { transform: rotate( 135 deg); } 50% { transform: rotate( 205 deg); } 100% { transform: rotate( 135 deg); } } @keyframes show -9 { 0% { transform: rotate( 135 deg); } 50% { transform: rotate( 225 deg); } 100% { transform: rotate( 135 deg); } } .leaf:nth-child( 1 ) { background : -moz-linear-gradient( 45 deg,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 6 s ease-in-out infinite; } .leaf:nth-child( 3 ) { animation: show -3 6 s ease-in-out infinite; } .leaf:nth-child( 4 ) { animation: show -4 6 s ease-in-out infinite; } .leaf:nth-child( 5 ) { animation: show -5 6 s ease-in-out infinite; } .leaf:nth-child( 6 ) { animation: show -6 6 s ease-in-out infinite; } .leaf:nth-child( 7 ) { animation: show -7 6 s ease-in-out infinite; } .leaf:nth-child( 8 ) { animation: show -8 6 s ease-in-out infinite; } .leaf:nth-child( 9 ) { animation: show -9 6 s ease-in-out infinite; } |
以上就是CSS3实现莲花绽放得动画效果的详细内容
2020-11-05
dedecms系统安全设置 防止入侵,挂马的基本安全操作方法2020-11-04
dedecms织梦php7+删除不了后台栏目的解决方法2020-11-04
dedecms php7以上版本备份数据还原不出来正常数据的解决方法