prefixfree+css实现莲花花瓣展开动画效果代码
代码语言:html
所属分类:动画
代码描述:prefixfree+css实现莲花花瓣展开动画效果代码
代码标签: prefixfree css 莲花 花瓣 展开 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prefixfree.js"></script> <style> body { background-color: #d4d4d4; } .demo { margin: 40px auto; width: 500px; } /*莲花花瓣的容器*/ .box { position: relative;/*设置相对定位,因为花瓣都要进行绝对定位*/ height: 400px; } /*花瓣进行绝对定位*/ .box .leaf { position: absolute; } /*绘制莲花花瓣*/ .leaf { margin-top: 400px; width: 300px; height: 300px; border-radius: 300px 0px;/*制作花瓣角*/ background: -*-linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/ opacity: 0.5; filter:alpha(opacity=50); transform: rotate(45deg);/*花瓣旋转45deg*/ transform-origin: top right;/*é‡ç½®èŠ±ç“£æ—‹è½¬åŽŸç‚¹ï¼Œè¿™ä¸ªå¾ˆé‡è¦*/ } @keyframes show-2 { 0% { transform: rotate(45deg); } 100% { transform: rotate(71deg); } } @keyframes show-3 { 0% { transform: rotate(45deg); } 100% { transform: rotate(96deg); } } @keyframes show-4 { 0% { transform: rotate(45deg); } 100% { transform: rotate(123deg); } } @keyframes show-5 { 0% { transform: rotate(45deg); } 100% { transform: rotate(149deg); } } @keyframes show-6 { 0% { transform: rotate(45deg); } 100% { transform.........完整代码请登录后点击上方下载按钮下载查看
网友评论0