用JQ CSS實現(xiàn)浪漫表白必備
發(fā)布時間：2024-05-28 點擊：150
jq css實現(xiàn)浪漫表白必備頁面
效果圖：
圖片素材 ：
推薦：《js高級教程》
代碼如下，復制即可使用：
<!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 -此處需要自己修改圖片路徑-->
備案變更問題-備案平臺
Facebook移除多個虛假賬戶 擔憂大選期間黑客攻擊
云服務器怎么運行jar包
注冊域名這些技巧你要掌握 域名注冊也需要技巧
對方郵箱對方郵箱發(fā)過來-企業(yè)郵局
域名網(wǎng)站禁用-市場咨詢
收錄快、刪除也快，文章質量太差？
碎片式文案！文案鬼才李佳琦
效果圖：
圖片素材 ：
推薦：《js高級教程》
代碼如下，復制即可使用：
<!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 -此處需要自己修改圖片路徑-->
備案變更問題-備案平臺
Facebook移除多個虛假賬戶 擔憂大選期間黑客攻擊
云服務器怎么運行jar包
注冊域名這些技巧你要掌握 域名注冊也需要技巧
對方郵箱對方郵箱發(fā)過來-企業(yè)郵局
域名網(wǎng)站禁用-市場咨詢
收錄快、刪除也快，文章質量太差？
碎片式文案！文案鬼才李佳琦
上一篇：控制臺管理云服務器配置
下一篇：阿里云服務器能掛游戲不