Steps and example codes for WeChat scene creation-HTML Tutorial-php.cn

WeChat is currently the most popular social software. During holidays, many people will share their photos in Moments. Some people even make photo albums. The switching of pictures is accompanied by music. This is WeChat. Scenes.

Next, I will lead you to create a WeChat scene.

Remarks: By studying this set of tutorials, you can learn the use of touch events, multi-touch technology, the algorithm for judging the sliding direction of gesture events, CSS3 animation calling, text animation (all animations are customized), music Knowledge of playback and control, CSS3 animation control, use of web fonts, js manipulation of DOM, etc. If you encounter any problems during the learning process, you can add me on QQ: 1416759661.

The general steps are as follows:

001, effect preview

002, create Project

003, mete attribute and radial gradient

004, add image

005, position image

006, listen for touch start event

007. Monitor the touch end event

008. Determine the sliding direction

009. Swipe up to switch pictures

010. Add transition animation effect

011. Call animation and reset properties

012. Slide down to switch pictures

013. Add 3D rotation effect

014. Add text effect

015. Text movement

016, text style reset

017, text rotation effect

018, sliding text effect

019, circular music control button

020. Button rotation animation

021. Stop rotation animation

022. Control the playback and stop of music

023. Automatically call animation switching effect

Experience the effect first. Use WeChat to scan the QR code below to see the effect.

You can also click the link below to view the effect. Since it is a foreign server, it may be slow.

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

Steps and example codes for WeChat scene creation

##Detailed code:

nbsp;html><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;}
            div.closeroate{animation-play-state: paused;}
            .loding{position: absolute;left: 0;top: 0;line-height: 30px;padding: 10px;color:green;}</style><div>加载中<img  alt="Steps and example codes for WeChat scene creation" >
</div>

Copy after login

两情若是久长时，

又岂在朝朝暮暮！
当你老了，

头白了，

睡思昏沉，

依然爱慕你的美丽！

思念直到永远
两情若是久长时，

又岂在朝朝暮暮！
轻轻的我走了，

正如我轻轻的来！

我挥一挥衣袖，

不带走一片云彩！
CSS3教程上线啦

QQ：1416759661！
当你老了，

头白了，

睡思昏沉，

依然爱慕你的美丽！

思念直到永远
两情若是久长时，

又岂在朝朝暮暮！
轻轻的我走了，

正如我轻轻的来！

我挥一挥衣袖，

不带走一片云彩！
CSS3教程上线啦

QQ：1416759661！

The above is the detailed content of Steps and example codes for WeChat scene creation. For more information, please follow other related articles on the PHP Chinese website!