如何实现心形效果
0
悬赏园豆：80
[已解决问题]
解决于 2016-10-26 17:34
现在直播很流行，分享出去的H5直播视频，如何实现右下角心形效果呢！需要跟原声的心形效果一样，不停地往上冒心，心由小到大随机改变颜色，哪位大神帮忙看看如何实现，我的思路用svg实现，可是还是会有点不一样。
最佳答案
0
建议用canvas实现吧
收获园豆：80
1.HTML结构 <div class="wrap"> <div class="xin"> </div> <button id="btn"></button> </div>2.CSS代码 * { font-size: 14px; color: rgba(220,228,240); } .wrap { width: 320px; height: 500px; background: url(../images/bg.png) no-repeat; position: relative; } #btn { display: block; width: 18.4rem; height: 2.4rem; background: url(../images/bottomBg.png) no-repeat; background-size: 100% 100%; border: none; position: absolute; left: 50%; margin-left: -9.2rem; bottom: 10px; } .xin { width: 320px; height: 500px; position: relative; } .box { width:20px; height:17px; animation:xinMove .5s forwards; -webkit-animation:xinMove .5s forwards; position: absolute; right:20px; bottom:50px; } .anim { bottom: 200px; right: 10px; opacity: 0; transition: bottom 3s cubic-bezier(0.1, 0.5, 0.25, 1), right 3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 3s linear; -webkit-transition: bottom 3s cubic-bezier(0.1, 0.5, 0.25, 1), right 3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 3s linear; } @keyframes xinMove { from { transform:scale(0); } to { transform:scale(1); } } @-webkit-keyframes xinMove { from { transform:scale(0); } to { transform:scale(1); } } /*心的六种背景样式*/ .icon_star_blue { background: url(../images/blue.png) no-repeat; background-size: 100% 100%; } .icon_star_orange { background: url(../images/orange.png) no-repeat; background-size: 100% 100%; } .icon_star_red { background: url(../images/red.png) no-repeat; background-size: 100% 100%; } .icon_star_violet { background: url(../images/violet.png) no-repeat; background-size: 100% 100%; } .icon_star_green { background: url(../images/green.png) no-repeat; background-size: 100% 100%; } .icon_star_yellow { background: url(../images/yellow.png) no-repeat; background-size: 100% 100%; } 3.JS代码 1）根据随机函数实现心的背景颜色，心的定位bottom和right，心的贝塞尔曲线随意变化； 2）点击一次生成一个心，将生成的div添加到.xin元素里面。 // 随机函数 function randomTest(max, min) { return parseInt(Math.random() * (max - min + 1) + min, 10); } // 定义心的背景颜色 var color=["blue","orange","red","violet","green","yellow"] // 心形 var xin=""; $("#btn").on("click",function(){ var _box = $('<div class="box icon_star_'+ color[randomTest(0,5)] +'"></div>'); $(".xin").append(_box); setTimeout(function(){ // 心形 var xin=""; $("#btn").on("click",function(){ var _box = $('<div class="box icon_star_'+ color[randomTest(0,5)] +'"></div>'); $(".xin").append(_box); // cubic-bezier(0.1, 0.5, 0.25, 1), right 3s cubic-bezier(0.25, 0.1, 0.25, 1) setTimeout(function(){ _box.css({"bottom":"" + randomTest(200,270) + "px","right":"" + randomTest(20,100) + "px","opacity":"0","-webkit-transition":"bottom 3s cubic-bezier(" + randomTest(0.9,0.1) + ", " + randomTest(0.4,0.5) + ", " + randomTest(0.23,0.25) + ", " + randomTest(0.9,1) + "), right 3s cubic-bezier(" + randomTest(0.23,0.25) + ", " + randomTest(0.1,0.12) + ", " + randomTest(0.23,0.25) + ", " + randomTest(0.9,1) + "), opacity 3s linear"}); },500) setTimeout(function(){ _box.remove(); },3500) }) setTimeout(function(){ _box.remove(); },3500) })
