首页 新闻 赞助 找找看

如何实现心形效果

0
悬赏园豆:80 [已解决问题] 解决于 2016-10-26 17:34

现在直播很流行,分享出去的H5直播视频,如何实现右下角心形效果呢!需要跟原声的心形效果一样,不停地往上冒心,心由小到大随机改变颜色,哪位大神帮忙看看如何实现,我的思路用svg实现,可是还是会有点不一样。

xiaoleilei的主页 xiaoleilei | 初学一级 | 园豆:80
提问于:2016-10-20 16:27
< >
分享
最佳答案
0

建议用canvas实现吧

收获园豆:80
张云山 | 小虾三级 |园豆:642 | 2016-10-25 08:57

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) })

xiaoleilei | 园豆:80 (初学一级) | 2016-10-26 17:35
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册