HTML5动画可创建“泡沫"对材质ui图标形状的影响 [英] HTML5 animations creating "fizzy" effect on material ui icon shapes
本文介绍了HTML5动画可创建“泡沫"对材质ui图标形状的影响的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在制作一个拖放模块-围绕着云图标-我想让各种小形状在一个循环中颤抖/消失，使它看起来像是一个模糊的效果一瓶可乐.一种神奇的幸运符.
我该如何对这些形状进行循环动画处理?
我只希望它在该区域内制作动画
- 最新的分支-需要尝试将移动的云放入函数中
* {边距:0px;填充:0px;}.出口 {位置:绝对；背景颜色:白色；宽度:170像素；高度:100px；页边距:-140px;左边距:-20px;不透明度:0；}.云，.cloud_small，.fizz {位置:绝对；最高:50％；左:50％；转换:translate(-50％，-50％);}.云 {z索引:11；}.cloud_small {z索引:12；}.cloud我{字体大小:135px；变换:rotateY(180deg);}.cloud_small我{边距顶部:5像素;白颜色;字体大小:110px；转换:rotateY(180deg)scale(1.05，1.05);}.fizz {边距顶部:-70px;z索引:10；}.fizz .small {不透明度:0；位置:绝对；背景颜色:#FF5D00;边距顶部:30像素;左边距:-5px;高度:20px；宽度:20px；边界半径:50％；动画:fizz_out 2s线性无限；}.small:nth-child(2){背景颜色:#FF8038;高度:15像素；宽度:15像素；动画:fizz_out 2s 1.5s线性无限；左边距:-20px;}.fizz .small_border {不透明度:0；位置:绝对；背景色:透明；边框:2px实心#C900FF；高度:20px；宽度:20px；边界半径:50％；左边距:-50px;边距顶部:40像素;动画:fizz_out 2s 0.5s线性无限；}.small_border:nth-child(3){边框颜色:#FF0061;高度:10px；宽度:10px；边距顶部:60像素;左边距:-70px;动画:fizz_out 2s 1s线性无限；}.fizz .star {不透明度:0；位置:绝对；高度:20px；宽度:20px；背景颜色:#FFB600;剪切路径:多边形(50％0％，61％35％，100％49％，64％61％，59％73％，50％100％，44％74％，35％61％，0 50％，39％35％)；动画:fizz_out_star 3s 1s线性无限；左边距:50px;边距顶部:40像素;}.fizz .star:nth-child(5){背景颜色:#FFF300；高度:10px；宽度:10px；左边距:20px;动画:fizz_out_star 3s 2s线性无限；}.fizz .star:nth-child(6){高度:25像素；宽度:25像素；边距顶部:30像素;左边距:-60px;动画:fizz_out_star 3s 2.5s线性无限；}@keyframes fizz_out {0％{不透明度:0；转换:translateY(0px);}35％{不透明度:1；}60％{不透明度:0；}100％{不透明度:0；转换:translateY(-120px);}}@keyframes fizz_out_star {0％{不透明度:0；转换:translateY(0px)rotateZ(0deg);}40％{不透明度:1；}60％{不透明度:0；}100％{不透明度:0；转换:translateY(-120px)rotateZ(720deg);}}.背部 {过滤器:blur(1px);转换:scale(0.6)rotateY(180deg)translateX(-30px);}.back .small {转换:translateX(-10px);}< link href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"rel =" stylesheet"/>< div class ="cloud">< div class ="exit"></div>< i class ="fa fa-cloud"></i></div>< div class ="cloud_small">< i class ="fa fa-cloud"></i></div>< div class ="fizz">< div class ="small"></div>< div class ="small"></div>< div class ="small_border"></div>< div class ="small_border"></div>< div class ="star"></div>< div class ="star"></div>< div class ="star"></div></div>< div class ="fizz back">< div class ="small"></div>< div class ="small"></div>< div class ="small_border"></div>< div class ="small_border"></div>< div class ="star"></div>< div class ="star"></div></div>I'm making a drag and drop module - and around the cloud icon - I'd like to have various little shapes flutter into/out of existence on a loop -- making it look like a fizzy effect you'd see in a bottle of coke. A kind of magical lucky charms thing.
How would I go about animating these shapes in and out of existence on a loop?
https://codesandbox.io/s/vigorous-satoshi-knusw
-- I've tried adding animation like this - but it's not really working http://jsfiddle.net/zr7sb/10/
.magic-cloud { .small { font-size: 16px; } .large { font-size: 146px; } .purple { color: #a85e9f; } .blue { color: #c9dff7; } .gold { color: #fdbd00; } .lavendar { color: #c698c0; } } .bubble { position: absolute; } .x1 { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); opacity: 0.2; -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 15s linear infinite; -o-animation: moveclouds 15s linear infinite; } .x2 { left: 200px; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); opacity: 0.5; -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate; -moz-animation: moveclouds 25s linear infinite; -o-animation: moveclouds 25s linear infinite; } .x3 { left: 350px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.3; -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 20s linear infinite; -o-animation: moveclouds 20s linear infinite; } .x4 { left: 470px; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); opacity: 0.35; -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: moveclouds 18s linear infinite; -o-animation: moveclouds 18s linear infinite; } .x5 { left: 150px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.3; -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate; -moz-animation: moveclouds 7s linear infinite; -o-animation: moveclouds 7s linear infinite; } @-webkit-keyframes moveclouds { 0% { top: 500px; } 100% { top: -500px; } } @-webkit-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } } @-moz-keyframes moveclouds { 0% { top: 500px; } 100% { top: -500px; } } @-o-keyframes moveclouds { 0% { top: 500px; } 100% { top: -500px; } }<div className="magic-cloud"> <CloudQueueIcon className="large" /> <AddIcon className="small gold bubble x1" /> <RadioButtonUncheckedOutlinedIcon className="small pink bubble x2" /> <FiberManualRecordIcon className="small purple bubble x3" /> <AddIcon className="small purple bubble x1" /> <RadioButtonUncheckedOutlinedIcon className="small lavendar bubble x2" /> <FiberManualRecordIcon className="small gold bubble x3" /> </div>I only want it to animate within this region
- latest fork -- need to try and put moving clouds into a function https://codesandbox.io/s/relaxed-dream-08ueh
Here is my version - but the shapes although I can see them floating aren't really showing up -- jsfiddle.net/xpb90keq/3
alternative version
cloud animation into this jsfiddle - jsfiddle.net/xpb90keq –
latest version 14th December - please use this as a base. https://codesandbox.io/s/holy-tdd-57ov7?file=/src/MagicCloud.js
animating left to right https://codesandbox.io/s/nervous-lamarr-qhw8k
latest version 15th December - https://codesandbox.io/s/magical-wood-wjnd5 -- latest I got - but not sure why the bubbles linger at the top
解决方案Its a pure CSS version of cloud fizzy bubble effect
* { margin: 0px; padding: 0px; } .exit { position: absolute; background-color: white; width: 170px; height: 100px; margin-top: -140px; margin-left: -20px; opacity: 0; } .cloud, .cloud_small, .fizz { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .cloud { z-index: 11; } .cloud_small { z-index: 12; } .cloud i { font-size: 135px; transform: rotateY(180deg); } .cloud_small i { margin-top: 5px; color: white; font-size: 110px; transform: rotateY(180deg)scale(1.05, 1.05); } .fizz { margin-top: -70px; z-index: 10; } .fizz .small { opacity: 0; position: absolute; background-color: #FF5D00; margin-top: 30px; margin-left: -5px; height: 20px; width: 20px; border-radius: 50%; animation: fizz_out 2s linear infinite; } .small:nth-child(2) { background-color: #FF8038; height: 15px; width: 15px; animation: fizz_out 2s 1.5s linear infinite; margin-left: -20px; } .fizz .small_border { opacity: 0; position: absolute; background-color: transparent; border: 2px solid #C900FF; height: 20px; width: 20px; border-radius: 50%; margin-left: -50px; margin-top: 40px; animation: fizz_out 2s 0.5s linear infinite; } .small_border:nth-child(3) { border-color: #FF0061; height: 10px; width: 10px; margin-top: 60px; margin-left: -70px; animation: fizz_out 2s 1s linear infinite; } .fizz .star { opacity: 0; position: absolute; height: 20px; width: 20px; background-color: #FFB600; clip-path: polygon(50% 0%, 61% 35%, 100% 49%, 64% 61%, 59% 73%, 50% 100%, 44% 74%, 35% 61%, 0 50%, 39% 35%); animation: fizz_out_star 3s 1s linear infinite; margin-left: 50px; margin-top: 40px; } .fizz .star:nth-child(5) { background-color: #FFF300; height: 10px; width: 10px; margin-left: 20px; animation: fizz_out_star 3s 2s linear infinite; } .fizz .star:nth-child(6) { height: 25px; width: 25px; margin-top: 30px; margin-left: -60px; animation: fizz_out_star 3s 2.5s linear infinite; } @keyframes fizz_out { 0% { opacity: 0; transform: translateY(0px); } 35% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; transform: translateY(-120px); } } @keyframes fizz_out_star { 0% { opacity: 0; transform: translateY(0px)rotateZ(0deg); } 40% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; transform: translateY(-120px)rotateZ(720deg); } } .back { filter: blur(1px); transform: scale(0.6)rotateY(180deg)translateX(-30px); } .back .small { transform: translateX(-10px); }<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="cloud"> <div class="exit"></div> <i class="fa fa-cloud"></i> </div> <div class="cloud_small"> <i class="fa fa-cloud"></i> </div> <div class="fizz"> <div class="small"></div> <div class="small"></div> <div class="small_border"></div> <div class="small_border"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> </div> <div class="fizz back"> <div class="small"></div> <div class="small"></div> <div class="small_border"></div> <div class="small_border"></div> <div class="star"></div> <div class="star"></div> </div>这篇关于HTML5动画可创建“泡沫"对材质ui图标形状的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
