当前位置：Gxlcms > html代码 > 微信场景制作的步骤及实例代码

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

时间：2021-07-01 10:21:17 帮助过：33人阅读

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

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

备注：通过本套教程的学习，能够学到触摸事件的使用，多点触摸技术，手势事件滑动方向判断的算法，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/

05.png

01.png

02.png

03.png

04.png

详细代码：

  1. <!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="Pragma" contect="no-cache"><meta http-equiv="Cache-Control" contect="no-cache"><meta http-equiv="Expires" contect="0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="renderer" content="webkit"><title></title><style type="text/css">
  2.             @font-face {font-family:yyjcwfont;src:url(font/hand.ttf);}
  3.             @-webkit-keyframes musicrotate {from {
  4.                     -webkit-transform: rotate(0);}to {-webkit-transform: rotate(360deg);}}
  5.             
  6.             @keyframes dhfadein {from {
  7.                     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;}}
  8.             
  9.             
  10.             @keyframes dhfadein-p1 {from {
  11.                     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;   
  12.                     z-index: 100;}}
  13.             
  14.             @keyframes dhfadein-p2 {from {
  15.                     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;   
  16.                     z-index: 100;}}
  17.             
  18.             @keyframes dhfadein-p3 {from {
  19.                     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;   
  20.                     z-index: 100;}}
  21.             
  22.             @keyframes dhfadein-p4 {from {
  23.                     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;   
  24.                     z-index: 100;}}    
  25.             
  26.             @keyframes dhfadein-p5 {from {
  27.                     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;   
  28.                     z-index: 100;}}    
  29.             
  30.             
  31.             
  32.             
  33.             
  34.             
  35.             * {margin: 0;padding: 0;}
  36.             html,
  37.             body {width: 100%;height: 100%;}
  38.             ul {width: 100%;height: 100%;list-style: none;overflow: hidden;position: relative;background:radial-gradient(white,#FC7D08);display: none;}
  39.             ul li {width: 1%;height: 1%;display: block;position: absolute;top: 50%;left: 50%;opacity: 0.5;/*    animation: dhfadein 3s 1 forwards;*/}
  40.             ul li img {width: 100%;height: 100%;display: block;margin: 0 auto;opacity: 1;}
  41.             p{font-family: yyjcwfont;}
  42.             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;}
  43.             .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;}
  44.             div.closeroate{animation-play-state: paused;}
  45.             .loding{position: absolute;left: 0;top: 0;line-height: 30px;padding: 10px;color:green;}</style></head><body id="mybox"><div class="loding">加载中<img src="images/wait.gif"></div><ul><li><img src="images/01.png" /><p class="text1">两情若是久长时，</p><p class="text2">又岂在朝朝暮暮！</p></li><li><img src="images/02.png" /><p class="text1">当你老了，</p><p class="text2">头白了，</p><p class="text3">睡思昏沉，</p><p class="text4">依然爱慕你的美丽！</p><p class="text5">思念直到永远</p></li><li><img src="images/03.png" /><p class="text1">两情若是久长时，</p><p class="text2">又岂在朝朝暮暮！</p></li><li><img src="images/04.png" /><p class="text1">轻轻的我走了，</p><p class="text2">正如我轻轻的来！</p><p class="text3">我挥一挥衣袖，</p><p class="text4">不带走一片云彩！</p></li><li><img src="images/05.png" /><p class="text1">CSS3教程上线啦</p><p class="text2">QQ：1416759661！</p></li><li><img src="images/06.png" /><p class="text1">当你老了，</p><p class="text2">头白了，</p><p class="text3">睡思昏沉，</p><p class="text4">依然爱慕你的美丽！</p><p class="text5">思念直到永远</p></li><li><img src="images/07.png" /><p class="text1">两情若是久长时，</p><p class="text2">又岂在朝朝暮暮！</p></li><li><img src="images/08.png" /><p class="text1">轻轻的我走了，</p><p class="text2">正如我轻轻的来！</p><p class="text3">我挥一挥衣袖，</p><p class="text4">不带走一片云彩！</p></li><li><img src="images/09.png" /><p class="text1">CSS3教程上线啦</p><p class="text2">QQ：1416759661！</p></li></ul><audio src="music/music.mp3" autoplay="autoplay" loop="loop" id="audioPlay"></audio><div class="musicbox" id="musicbox"></div><script src="js/zepto_1.1.3.js?1.1.11" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//            $(function(){//                //            });//            $(window).load(function(){//                $(".loding").hide();//                $("ul").show();//            });            window.addEventListener('load', function(){
  46.                 $(".loding").hide();
  47.                 $("ul").show();
  48.             }, false);            var audio = document.getElementById("audioPlay");var musicbox=document.getElementById("musicbox");
  49.             
  50.             document.getElementById("musicbox").onclick=function(e){if(this.className=="musicbox")
  51.                 {
  52.                     audio.pause();
  53.                     musicbox.className="musicbox closeroate";
  54.                     
  55.                 }else{
  56.                     audio.loop = true;
  57.                     audio.play();                    this.className="musicbox";
  58.                 }
  59.             };            
  60.             var timer1=setInterval(function(){
  61.                 sliderNext();
  62.             },13000);
  63.             sliderNext();var container = document.getElementById("mybox");var start_x;var start_y;var end_x;var end_y;
  64.             container.addEventListener("touchstart", function(event) {
  65.                 clearInterval(timer1);if(event.targetTouches.length == 1) {var touch = event.targetTouches[0];
  66.                     start_x = touch.pageX;
  67.                     start_y = touch.pageY;
  68.                 };
  69.             }, {
  70.                 passive: false});
  71.             container.addEventListener("touchmove", function(event) {
  72.                 event.preventDefault();if(event.targetTouches.length == 1) {var touch = event.targetTouches[0];
  73.                     move_x = touch.pageX;
  74.                     move_y = touch.pageY;
  75.                 };
  76.             }, {
  77.                 passive: false});
  78.             container.addEventListener("touchend", function(event) {if(event.changedTouches.length == 1) {var touch = event.changedTouches[0];
  79.                     end_x = touch.pageX;
  80.                     end_y = touch.pageY;
  81.                 };var x=end_x-start_x;var y=end_y-start_y;     if(Math.abs(x) > Math.abs(y) && x > 0){
  82.                       console.log('向右'); 
  83.                 }else if(Math.abs(x) > Math.abs(y) && x < 0){
  84.                     console.log('向左');
  85.                 }else if(Math.abs(x) < Math.abs(y) && y > 0){
  86.                     console.log('向下');
  87.                     sliderPre();
  88.                 }else if(Math.abs(x) < Math.abs(y) && y < 0){
  89.                     console.log('向上');
  90.                     sliderNext();
  91.                 }
  92.                 
  93.                 timer1=setInterval(function(){
  94.                     sliderNext();
  95.                 },13000);
  96.                 
  97.             }, {
  98.                 passive: false});            
  99.             
  100. function sliderNext() {                var lastli = $("li:last-child")[0];                         
  101.                 $("li:last-child").prependTo($("ul"));
  102.                 $("li").removeAttr("style");
  103.                 lastli = $("li:last-child")[0];
  104.                 lastli.style.webkitAnimation = "dhfadein 3s 1 forwards";
  105.                 $("p").removeAttr("style");
  106.                 lastli.addEventListener('webkitAnimationEnd', function () {//console.log('Li动画执行完毕！');                    $(lastli).find("p").eq(0).css({"animation":"dhfadein-p1 3s 1 forwards"});
  107.                     $(lastli).find("p").eq(1).css({"animation":"dhfadein-p2 3s 1 forwards"});
  108.                     $(lastli).find("p").eq(2).css({"animation":"dhfadein-p3 3s 1 forwards"});
  109.                     $(lastli).find("p").eq(3).css({"animation":"dhfadein-p4 3s 1 forwards"});
  110.                     $(lastli).find("p").eq(4).css({"animation":"dhfadein-p5 3s 1 forwards"});
  111.                     
  112.                 }, false);
  113.             }function sliderPre() {
  114.                 $("p").removeAttr("style");
  115.                 $("li:first-child").appendTo($("ul"));
  116.                 $("li").removeAttr("style");                var lastli = $("li:last-child")[0];
  117.                 lastli.style.webkitAnimation = "dhfadein 3s 1 forwards";
  118.                 lastli.addEventListener('webkitAnimationEnd', function () {//console.log('Li动画执行完毕！');                    $(lastli).find("p").eq(0).css({"animation":"dhfadein-p1 3s 1 forwards"});
  119.                     $(lastli).find("p").eq(1).css({"animation":"dhfadein-p2 3s 1 forwards"});
  120.                     $(lastli).find("p").eq(2).css({"animation":"dhfadein-p3 3s 1 forwards"});
  121.                     $(lastli).find("p").eq(3).css({"animation":"dhfadein-p4 3s 1 forwards"});
  122.                     $(lastli).find("p").eq(4).css({"animation":"dhfadein-p5 3s 1 forwards"});
  123.                     
  124.                 }, false);
  125.             }            
  126.             </script></body></html>

以上就是微信场景制作的步骤及实例代码的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！