微信场景制作的步骤及实例代码

来源：互联网 2024-10-15 05:11:49

微信是目前最流行的社交软件，每逢节假日，很多人都会在朋友圈分享自己的照片，有的人更是把照片做成了相册，图片的切换还伴随有音乐，这个就是微信场景。

接下来就带领大家做一个微信场景。

备注：通过本套教程的学习，能够学到触摸事件的使用，多点触摸技术，手势事件滑动方向判断的算法，CSS3动画调用，文字动画（动画全部自定义），音乐的播放和控制，CSS3动画的控制，网络字体的使用，js操作DOM等知识。大家学习过程中遇到任何问题可以加我QQ：1416759661.

大致步骤如下：

001、效果预览

002、创建项目

003、mete属性和径向渐变

004、添加图片

005、定位图片

006、监听触摸开始事件

007、监听触摸结束事件

008、滑动方向判断

009、上滑切换图片

010、添加过渡动画效果

011、调用动画和重置属性

012、下滑切换图片

013、添加3d旋转效果

014、添加文字效果

015、文字移动移动

016、文字样式重置

017、文字旋转效果

018、下滑文字效果

019、圆形音乐控制按钮

020、按钮旋转动画

021、停止旋转动画

022、控制音乐的播放与停止

023、自动调用动画切换效果

先体验下制作好的效果，使用微信扫描下面的二维码就可以看到效果。

也可以点击下面的链接查看效果，由于是国外的服务器，可能比较慢。

https://1416759661.github.io/changjing/

详细代码：

nbsp;html&gt;<meta><meta><meta><meta><meta><meta><meta><title></title><style>            @font-face {font-family:yyjcwfont;src:url(font/hand.ttf);}            @-webkit-keyframes musicrotate {from {                    -webkit-transform: rotate(0);}to {-webkit-transform: rotate(360deg);}}                        @keyframes dhfadein {from {                    width: 1%;height: 1%;display: block;position: absolute;top: 50%;left: 50%;opacity: 0.5;z-index: 1;}to {width: 100%;height: 100%;top: 0;left: 0;opacity: 1;transform: rotate(720deg) rotateY(360deg);z-index: 100;}}                                    @keyframes dhfadein-p1 {from {                    width: 1%;height: 1%;left:-100%;top:-100%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:50%;font-size:3rem;opacity:1;color: #1477E2;transform: rotateX(360deg) rotateY(720deg);text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;                       z-index: 100;}}                        @keyframes dhfadein-p2 {from {                    width: 1%;height: 1%;left:200%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:60%;font-size:3rem;opacity:1;color: #1477E2;transform: rotateX(360deg) rotateY(720deg);text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;                       z-index: 100;}}                        @keyframes dhfadein-p3 {from {                    width: 1%;height: 1%;left:-100%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:70%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;                       z-index: 100;}}                        @keyframes dhfadein-p4 {from {                    width: 1%;height: 1%;left:200%;top:90%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:80%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;                       z-index: 100;}}                            @keyframes dhfadein-p5 {from {                    width: 1%;height: 1%;left:50%;bottom:-100%;position: absolute;bottom: 0;opacity: 0;}to {width:10%;left:80%;top:10%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;                       z-index: 100;}}                                                                                        * {margin: 0;padding: 0;}            html,            body {width: 100%;height: 100%;}            ul {width: 100%;height: 100%;list-style: none;overflow: hidden;position: relative;background:radial-gradient(white,#FC7D08);display: none;}            ul li {width: 1%;height: 1%;display: block;position: absolute;top: 50%;left: 50%;opacity: 0.5;/*    animation: dhfadein 3s 1 forwards;*/}            ul li img {width: 100%;height: 100%;display: block;margin: 0 auto;opacity: 1;}            p{font-family: yyjcwfont;}            ul li p.text1 {width: 1%;height: 1%;left:-100%;top:-100%;position: absolute;bottom: 0;opacity: 0;}ul li p.text2 {width: 1%;height: 1%;left:200%;position: absolute;bottom: 0;opacity: 0;}ul li p.text3 {width: 1%;height: 1%;left:-100%;position: absolute;bottom: 0;opacity: 0;}ul li p.text4 {width: 1%;height: 1%;left:200%;top:90%;position: absolute;bottom: 0;opacity: 0;}ul li p.text5 {width: 1%;height: 1%;left:50%;bottom:-100%;position: absolute;bottom: 0;opacity: 0;}            .musicbox {background-image: url(images/m.jpg);background-position: 0 0;width:38px;height:38px;overflow: hidden;background-repeat: no-repeat;background-size: contain;border-radius:19px;position: absolute;z-index: 102;top: 10px;right:10px;cursor: pointer;animation:musicrotate 1s linear infinite;box-shadow: 0 0 15px 2px blue;}            p.closeroate{animation-play-state: paused;}            .loding{position: absolute;left: 0;top: 0;line-height: 30px;padding: 10px;color:green;}</style><p>加载中<img  alt="微信场景制作的步骤及实例代码" ></p>

两情若是久长时，
又岂在朝朝暮暮！
当你老了，
头白了，
睡思昏沉，
依然爱慕你的美丽！
思念直到永远
两情若是久长时，
又岂在朝朝暮暮！
轻轻的我走了，
正如我轻轻的来！
我挥一挥衣袖，
不带走一片云彩！
CSS3教程上线啦
QQ：1416759661！
当你老了，
头白了，
睡思昏沉，
依然爱慕你的美丽！
思念直到永远
两情若是久长时，
又岂在朝朝暮暮！
轻轻的我走了，
正如我轻轻的来！
我挥一挥衣袖，
不带走一片云彩！
CSS3教程上线啦
QQ：1416759661！

<ｓｃｒｉｐｔ></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ>// $(function(){// // });// $(window).load(function(){// $(".loding").hide();// $("ul").show();// }); window.addEventListener('load', function(){ $(".loding").hide(); $("ul").show(); }, false); var audio = document.getElementById("audioPlay");var musicbox=document.getElementById("musicbox"); document.getElementById("musicbox").onclick=function(e){if(this.className=="musicbox") { audio.pause(); musicbox.className="musicbox closeroate"; }else{ audio.loop = true; audio.play(); this.className="musicbox"; } }; var timer1=setInterval(function(){ sliderNext(); },13000); sliderNext();var container = document.getElementById("mybox");var start_x;var start_y;var end_x;var end_y; container.addEventListener("touchstart", function(event) { clearInterval(timer1);if(event.targetTouches.length == 1) {var touch = event.targetTouches[0]; start_x = touch.pageX; start_y = touch.pageY; }; }, { passive: false}); container.addEventListener("touchmove", function(event) { event.preventDefault();if(event.targetTouches.length == 1) {var touch = event.targetTouches[0]; move_x = touch.pageX; move_y = touch.pageY; }; }, { passive: false}); container.addEventListener("touchend", function(event) {if(event.changedTouches.length == 1) {var touch = event.changedTouches[0]; end_x = touch.pageX; end_y = touch.pageY; };var x=end_x-start_x;var y=end_y-start_y; if(Math.abs(x) > Math.abs(y) && x > 0){ console.log('向右'); }else if(Math.abs(x) > Math.abs(y) && x < 0){ console.log('向左'); }else if(Math.abs(x) < Math.abs(y) && y > 0){ console.log('向下'); sliderPre(); }else if(Math.abs(x) < Math.abs(y) && y < 0){ console.log('向上'); sliderNext(); } timer1=setInterval(function(){ sliderNext(); },13000); }, { passive: false}); function sliderNext() { var lastli = $("li:last-child")[0]; $("li:last-child").prependTo($("ul")); $("li").removeAttr("style"); lastli = $("li:last-child")[0]; lastli.style.webkitAnimation = "dhfadein 3s 1 forwards"; $("p").removeAttr("style"); lastli.addEventListener('webkitAnimationEnd', function () {//console.log('Li动画执行完毕！'); $(lastli).find("p").eq(0).css({"animation":"dhfadein-p1 3s 1 forwards"}); $(lastli).find("p").eq(1).css({"animation":"dhfadein-p2 3s 1 forwards"}); $(lastli).find("p").eq(2).css({"animation":"dhfadein-p3 3s 1 forwards"}); $(lastli).find("p").eq(3).css({"animation":"dhfadein-p4 3s 1 forwards"}); $(lastli).find("p").eq(4).css({"animation":"dhfadein-p5 3s 1 forwards"}); }, false); }function sliderPre() { $("p").removeAttr("style"); $("li:first-child").appendTo($("ul")); $("li").removeAttr("style"); var lastli = $("li:last-child")[0]; lastli.style.webkitAnimation = "dhfadein 3s 1 forwards"; lastli.addEventListener('webkitAnimationEnd', function () {//console.log('Li动画执行完毕！'); $(lastli).find("p").eq(0).css({"animation":"dhfadein-p1 3s 1 forwards"}); $(lastli).find("p").eq(1).css({"animation":"dhfadein-p2 3s 1 forwards"}); $(lastli).find("p").eq(2).css({"animation":"dhfadein-p3 3s 1 forwards"}); $(lastli).find("p").eq(3).css({"animation":"dhfadein-p4 3s 1 forwards"}); $(lastli).find("p").eq(4).css({"animation":"dhfadein-p5 3s 1 forwards"}); }, false); } </ｓｃｒｉｐｔ>

微信场景制作

本文地址：http://www.wztg.net/wenda/71518.html

免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）