jQuery + CSS realizes romantic confession! (with code)
This article will introduce to you the necessary page to use jQuery CSS to realize romantic confession. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
JQ CSS necessary page to realize romantic confession
Rendering:
Picture material:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浪漫表白 By：阿杜</title>
<style type = "text/css">
*{
margin:0px;
padding:0px;
}
html,body{
height:100%;
}
body{
font-family:"微软雅黑"; <!-- 此处需要自己修改图片路径 -->
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 10s 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 8s 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 15s 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;
animation:color 10s linear infinite;
}
@keyframes color{
0%{color:#039;}
20%{color:#9C3;}
40%{color:#6C6;}
60%{color:#66F;}
80%{color:#FC9;}
100%{color:#9FF;}
}
</style>
</head>
<body>
<!--S top-->
<div class = "top">
<marquee behavior="alternate">Love Page By:阿杜</marquee>
</div>
<!--E top-->
<!--S box-->
<div class = "box">
<div class = "wrap"> <!-- 此处需要自己修改图片路径 -->
<ul>
<li><img src="images/1.gif" height="210px" width="210px"/></li>
<li><img src="images/2.gif" height="210px" width="210px"/></li>
<li><img src="images/3.gif" height="210px" width="210px"/></li>
<li><img src="images/4.gif" height="210px" width="210px"/></li>
<li><img src="images/5.gif" height="210px" width="210px"/></li>
<li><img src="images/6.gif" height="210px" width="210px"/></li>
</ul>
</div>
</div>
<!--E box -此处需要自己修改图片路径-->
<div class = "xin">
<img src="images/xin.png" width="100px" height="100px"/>
</div>
<div class = "xin1">
<img src="images/xin.png" width="100px" height="100px"/>
</div>
<div class = "text">
<p id = "test"></p>
</div> <!-- 此处需要自己修改音频路径 -->
<embed src="sound/bg.mp3" hidden="true"/>
<!-- 此处需要自己修改JQ路径 -->
<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();
$(this).css({
"transform":"rotateY("+Deg*i+"deg) translateZ(220px)"
});
});
});
window.onload = function autoplay(){
var b = ['能够遇见你，对我来说是最大的幸福。有了你，我的生活变的无限宽广，有了你，世界变得如此迷人。你是世界，世界是你。我愿意用自己的心，好好的陪着你，爱着你。陪你到你想去的地方，用心走完我们人生的余下的旅程。在未来的日子里，也许什么都无法确定，但唯一可以确定的是，我爱的人是你，无论现在还是将来，我想我这里都会是你最温暖的港湾，都是为你遮风避雨的城墙。无论狂风，无论暴雨。我都会陪在你的身旁，让你不会感到丝毫的担心和惶恐。我会珍惜和你在一起的每一刻，每一分，每一秒。谁叫你是我最爱的人，谁叫你是第二幸福的人（因为爱上她你是最幸福的了，哈哈）。为了你，我愿用自己的双手为你撑起一片艳阳！'];
// 分隔字符串
var str = b.join(""),i=0,arr = str.split('');
var ms_stop = setInterval(function(){
// 设置自动出现文字
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>
</html>The above is the detailed content of jQuery + CSS realizes romantic confession! (with code). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What does placeholder mean in vue
May 07, 2024 am 09:57 AM
In Vue.js, the placeholder attribute specifies the placeholder text of the input element, which is displayed when the user has not entered content, provides input tips or examples, and improves form accessibility. Its usage is to set the placeholder attribute on the input element and customize the appearance using CSS. Best practices include being relevant to the input, being short and clear, avoiding default text, and considering accessibility.
What is node in js
May 07, 2024 pm 09:06 PM
Nodes are entities in the JavaScript DOM that represent HTML elements. They represent a specific element in the page and can be used to access and manipulate that element. Common node types include element nodes, text nodes, comment nodes, and document nodes. Through DOM methods such as getElementById(), you can access nodes and operate on them, including modifying properties, adding/removing child nodes, inserting/replacing nodes, and cloning nodes. Node traversal helps navigate within the DOM structure. Nodes are useful for dynamically creating page content, event handling, animation, and data binding.
What language is the browser plug-in written in?
May 08, 2024 pm 09:36 PM
Browser plug-ins are usually written in the following languages: Front-end languages: JavaScript, HTML, CSS Back-end languages: C++, Rust, WebAssembly Other languages: Python, Java
How to set unknown attributes in vscode vscode method to set unknown attributes
May 09, 2024 pm 02:43 PM
1. First, open the settings icon in the lower left corner and click the settings option. 2. Then, find the CSS column in the jumped window. 3. Finally, change the drop-down option in the unknownproperties menu to the error button.
Can less files in vue introduce data?
May 07, 2024 pm 12:06 PM
Yes, Less files in Vue can introduce data through CSS variables and Less mixins: create a JSON file containing data. Import JSON files using the @import rule. Access JSON data using CSS variables or Less mixins.
How to use less style in vue
May 07, 2024 pm 12:03 PM
Using LESS styles in Vue improves code maintainability and extensibility, specifically: Install the LESS compiler and LESS language plugin. Use lang="less" in the .vue file to specify the LESS style. Configure webpack in the Vue.js configuration file to compile LESS to CSS. The main advantages of the LESS style include: Using variables enhances maintainability and reusability. Use blending to simplify the use of repeating styles. Use functions to easily handle color and style manipulation.
Graphical steps for setting the default properties of CSS in Visual Studio 2019
May 09, 2024 pm 02:01 PM
1. Open Visual Studio 2019, find its option settings, and click CSS. 2. Here you can see the technical settings of the following attributes. 3. Now you can set text and fill borders here. 4. At this time, you can also set the floating positioning here. 5. At this moment, you can also set the border and background here to complete the operation. 6. Finally, click the OK button here to set the CSS default properties.
How to isolate styles in components in vue
May 09, 2024 pm 03:57 PM
Style isolation in Vue components can be achieved in four ways: Use scoped styles to create isolated scopes. Use CSS Modules to generate CSS files with unique class names. Organize class names using BEM conventions to maintain modularity and reusability. In rare cases, it is possible to inject styles directly into the component, but this is not recommended.
