JQ + CSS is essential for achieving romantic confession, jqcss

JQ + CSS is essential for achieving romantic confession, jqcss

JQ + CSS essential pages for romantic confession

:

Image material:

 

The Code is as follows:

<! DOCTYPE html> <! -- Modify the image path here --> background: url (images/b1j.jpg) no-repeat fixed; background-size: cover ;}. top {width: 500px; height: 150px; margin: 50px auto; font-size: 30px; color: # ea544d ;}. box {width: 310px; height: 310px; margin: 0px auto; perspective: 800px; margin-top:-40px ;}. box. wrap {width: 210px; height: 210px; position: relative; transform-style: preserve-3d; animation: play 10 s linear infinite ;}. box. wrap Ul li {list-style: none; position: absolute; top: 0; left: 0 ;}@ keyframes play {from {transform: rotateY (0deg);} to {transform: rotateY (360deg );}}. xin ,. xin1 {position: absolute ;}. xin {animation: xin 8 s linear infinite;} @ keyframes xin {0% {top: 0%; left: 50%; opacity: 1;} 20% {top: 20%; left: 80%; opacity: 0;} 40% {top: 50%; left: 50%; opacity: 1;} 60% {top: 80%; left: 40%; opacity: 0;} 80% {top: 50%; left: 20%; opacity: 1;} 100% {Top: 10%; left: 0%; opacity: 0 ;}}. xin1 {animation: xin 15 s linear infinite;} @ keyframes xin1 {0% {top: 10%; right: 50%; opacity: 1;} 20% {top: 50%; right: 80%; opacity: 0;} 40% {top: 40%; right: 50%; opacity: 1;} 60% {top: 60%; right: 40%; opacity: 0;} 80% {top: 50%; right: 20%; opacity: 1;} 100% {top: 0%; right: 0%; opacity: 0 ;}}. text {width: 60%; margin: 0 auto; margin-top:-60px; font-size: 20px; line-height: 30px; font-weight: 500; ani Mation: color 10 s linear infinite;} @ keyframes color {0% {color: #039;} 20% {color: #9C3;} 40% {color: #6C6 ;} 60% {color: # 66F;} 80% {color: # FC9;} 100% {color: # 9FF ;}</style> 
<! -- Modify the image path here. -->
<Ul> <li>  </li>  </li>  </li>  </li>  </li>  </li> </ul> </div> </Div> <! -- E box-Modify the image path here --> <div class = "xin">  </div> <div class = "xin1">  </div> <div class = "text"> <p id = "test"> </p> </div>
　　
<! -- Modify the audio path here. -->
<Embed src = "sound/bg.mp3" hidden = "true"/> <! -- Modify the JQ path here --> <script type = "text/javascript" src = "js/jquery. min. js "> </script> <script type =" text/javascript "> $ (function () {$ (". wrap ul li "). each (function (I) {var Deg = 360/$ (". wrap ul li "). size (); values (this).css ({"transform": "rotateY (" + Deg * I + "deg) translateZ (220px)"}) ;}); window. onload = function autoplay () {var B = ['it's the greatest happiness for me to meet you. With you, my life becomes infinitely broad. With you, the world becomes so charming. You are the world, and the world is you. I am willing to use my own heart to stay with you and love you. Accompany you to where you want to go, and finish the rest of our life with your heart. In the days to come, nothing can be determined, but the only thing that can be determined is that I love you, whether in the present or in the future, I think I will be your warmest harbor here, and it is a city wall for you to shelter from the wind and rain. Regardless of the storm or rainstorm. I will always be with you, so that you will not feel any worries or fear. I will cherish every moment, every minute, and every second with you. Who calls you my favorite person, who calls you the second happiest person (because you love her, you are the happiest, haha ). For you, I would like to use my hands to hold up the sun for you! ']; // Separator string var str = B. join (""), I = 0, arr = str. split (''); var ms_stop = setInterval (function () {// set automatic text if (I> str. length-1) {I = 0; document. getElementById ('test '). innerHTML = '';} document. getElementById ('test '). innerHTML = document. getElementById ('test '). innerHTML + arr [I]; I ++; }, 200) ;}</script> </body> 
If you have better ideas or more functions, please share them with us. If you have any mistakes, please contact me to correct them. Thank you very much !!!