主頁 > 前端設計 > 表白,整人,無門檻,娛樂代碼

表白,整人,無門檻,娛樂代碼

2020-12-22 12:31:14 前端設計

簡介

此篇純屬娛樂,還望不要介懷,行外看精彩,行內看笑話,
本篇,獻給那些零基礎,想學點創意,娛樂,或者來兩行代碼去表白的人,(程式員,也可以是很浪漫的,直男,也有心中旁人無法讀懂的美,希望此篇能對你有所幫助)

概要

該篇目錄大致如下:
一 :代碼定時關機&取消;
二 :vbs彈窗表白&整人;
三 :html樣式表白
四 :小游戲加表白

一:代碼定時關機和取消

1.1,代碼定時關機
此處我們用vsb來實作(vsb是一種腳本語言,一般系統都能支持)
CreateObject("Wscript.Shell").run "cmd.exe /c shutdown -s -t 12"

一行代碼,給你不一樣的關機體驗,上訴為定時關機,下面講解步驟,共三步即可:
① 創建一個記事本檔案
在這里插入圖片描述
②將上訴代碼無格式張貼放進去
在這里插入圖片描述
③保存并修改檔案后綴為.vbs
在這里插入圖片描述
然后雙擊運行即可,時間可自行修改上訴代碼,示例如下:

//該部分末尾12 表示秒,可自行修改
//該代碼的意思是表示電腦在12秒后關機
CreateObject("Wscript.Shell").run "cmd.exe /c shutdown -s -t 12"  
1.2,取消關機
在上訴12秒時間內,可用,
代碼:
CreateObject("Wscript.Shell").run "cmd.exe /c shutdown -a"

步驟如上,雙擊即可取消

贈送 **手動無鼠操作,一套走:
①Windows鍵 + R鍵
②輸入cmd
③輸入shutdown -s

二:vbs彈窗表白&整人

1.1,彈窗表白

該部分代碼依舊是vbs檔案,大致是雙擊檔案后彈窗,你不接受我,我就不讓你關閉不了這個彈窗(程序是比較now的,可以改為不接受我就把你電腦轟炸掉或讓你關機,乃至植入木馬,這種就有點過分了,暫不傳授),該部分可在任務管理器中強行結束,代碼如下:
①簡單無強制彈窗(代碼如下)

msgbox("做我女朋友好嗎")
msgbox("房產證上寫你的名字")
msgbox("保大")
msgbox("我媽會游泳")

程序同上,中文部分可自行修改,每一個msgbox為一次彈窗,上述彈窗四次,雙擊運行即可

②強制必須同意彈窗(代碼如下)
在這里插入圖片描述

const title = "小明給小花"       
const yourname = "我也愛你"	
const question = "我對你愛慕已久,希望,,,,,,如果你愛我,請在下面輸入“我也愛你” "	
const info ="不,這不是你的真實答案,請重新輸入"			
const scend ="那我們約會把吧,地點學校小公園,明天下午四點,不見不散"
dim youranswer
do
youranswer = inputbox(question, title)
if youranswer <> yourname then msgbox info,vbinformation+vbokonly,title 
loop until youranswer = yourname 
msgbox scend,vbinformation+vbokonly,title

步驟同一,雙擊即可,中文部分可自行改動,(有時,放手也是一種選擇,給出兩種強行關掉的方法,①關機重啟,②任務管理器(Ctrl+Shift+~)關掉改行程—推薦該方法,③通過cmd命令殺死)

1.2,彈窗整人

同上,只是換點文字,換種玩法,代碼如下

const title = "誰是豬測驗"
const yourname = "小明"
const question = "此乃機密檔案,請大聲告訴我,誰是pig,請沉默三秒,并將答案填在下面"
const info ="不,這不是你的真實答案,請重新輸入"
const scend ="你說的太對了,小明你就是一坨豬,歡迎下次光臨"
dim youranswer
do
youranswer = inputbox(question, title)
if youranswer <> yourname then msgbox info,vbinformation+vbokonly,title 
loop until youranswer = yourname 
msgbox scend,vbinformation+vbokonly,title

三:html樣式表白

該部分如果需要修改代碼,需要一點簡單代碼基礎,不過電腦本身不需要安裝什么支持,可直接操作和上手,介紹及效果如下

我的檔案目錄:
在這里插入圖片描述

上圖為所需檔案,以下為部分講解:
①提問不同意便彈窗部分
在這里插入圖片描述
在這里插入圖片描述
不愿意時,會有類似上訴詞條彈處,同意便是后面的煙花部分了,而上述彈出詞條可改
用記事本打開
在這里插入圖片描述
tallk.js檔案

代碼演示:

$(function() {
    $('#yes').click(function(event) {
        modal('我就知道小姐姐您一定會愿意的,(^_^)', function() {
            $('.page_one').addClass('hide');
            $('.page_two').removeClass('hide');
            // typeWrite();
            fireworks();

        });
    });
    $('#no').click(function(event) {
        modal('明人不說暗話!', A);
    });
});

function A() {
    modal('我喜歡你!', B);
}

function B() {
    modal('我知道你在等我這一句話', C);
}

function C() {
    modal('請您不要拒絕我', D);
}

function D() {
    modal('拒絕我,不存在的', E);
}

function E() {
    modal('這輩子都不可能讓你離開我', F);
}

function F() {
    modal('跟我走吧', G);
}

function G() {
    modal('房產證上寫你名', H);
}

function H() {
    modal('我會做飯', I);
}

function I() {
    modal('愛你,么么噠!', J)
}

**上訴代碼表示如果沒有同意的情況下,你點確定,會重復彈處如上,不過當道方法I,及彈處愛你/么么噠時,后面有個j,表示呼叫了方法j,而j寫了結束該部分,就會直接帶你去看煙花,文字部分可改**
function J() {
    modal('行,我們去民政局登記吧', function() {
        fireworks();
    });
}

function fireworks() {
    $('.page_one').addClass('hide');
    initAnimate();
}

function modal(content, callback) {
    var tpl = '<div class="container">'+
        '<div class="mask"></div>'+
        '<div class="modal">'+
        '<p>'+ content +'</p>'+
        '<button type="button" id="confirm" class="confirm">確定</button>'+
        '</div>'+
        '</div>';
    $('body').append(tpl);
    $(document).on('click', '.confirm', function() {
        $('.container').remove();
        callback();
    });
}

②煙花部分:
效果:
在這里插入圖片描述

可用記事本打開上訴html檔案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        body{margin:0;padding:0;overflow: hidden;} .city{width:100%;position:fixed;bottom:
                0px;z-index: 100;} .city img{width: 100%;}
        audio{
            opacity: 0;
        }
    </style>
    <title>
        放煙花    <!--此部分為標題,可改-->
    </title>
    <link href="modal.css" rel="stylesheet"/>
</head>
<body onselectstart="return false">
<!--對話部分-->
<div class="share_img"><img src="a8b.png" alt=""></div>

<div class="page_one">
    <div class="content">
        <div class="text_wrapper">
            <img src="a8.png" alt="">
            <div class="text">
                小姐姐,我好喜歡你,你愿意做我女朋友嗎?<!--頁面提問部分,可改-->
            </div>
        </div>
    </div>
    <div class="btn-groups">
        <div class="heart-btn">
            <div id="yes" class="btn btn-a"><span>愿意</span></div>
        </div>
        <div id="no" class="btn btn-b"><span>不愿意</span></div>
    </div>
</div>
<!--煙花部分-->
<canvas id='cas' style="background-color:rgba(0,5,24,1)">
    瀏覽器不支持canvas
</canvas>
<div class="city">
    <img src="city.png" alt="" />
</div>
<img src="moon.png" alt="" id="moon" style="visibility: hidden;" />
<div style="display:none">
<!--以下為煙花效果部分,就是煙花爆炸形成的文字,
可改,也可以自己找個文字影像放進去,
特指里面的文字部分,如果你想加煙花,復制一個div部分,在如下添加即可-->
    <div class="shape">
        520
    </div>
    <!--上面從<div-...../div>為一個,里面520可換成自己想實作的效果-->
    <div class="shape">
        浩浩
    </div>
    <div class="shape">
        茫茫人海
    </div>
    <div class="shape">
        相遇是緣
    </div>
	<div class="shape">
        哈哈哈哈哈哈哈
    </div>
</div>
<!--音樂部分-->
<audio autoplay loop id="music">
    <source src="music.mp3" />
</audio>
<iframe  id="iframMusic" allow="autoplay" style="display:none" src="blank.mp3"></iframe>
<script src="jquery.min.js"></script>
<script src="fire.js"></script>
<script src="talk.js"></script>
</body>

</html>

上訴為html部分,效果如下:

③另有背景音樂music.mp3檔案,可自行修改,但檔案及后綴名,目錄相同必須

四:小游戲加表白

在這里插入圖片描述
該部分目錄結構如上,分問三個hmtl,又可分為三個部分:

①index.html,小游戲部分,是一個打地鼠的游戲,純html寫的,效果嘛,試試就知道了,不過哄女孩子應該還行,只有當你拿到一百積分通關后才能看到后面的東西,當然,通關積分可控,定個幾萬分也沒問題,只要你不怕,

效果如下:
在這里插入圖片描述

展示:
<!--<!DOCTYPE html>-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>愛的游戲</title>
 <style>
     body{
         background-image: url(image/bg.jpg);
         cursor: url(image/cursor.png),auto;
         /*cursor改變指標圖示樣式,默認樣式為auto,當自定義圖片滑鼠指標的時候,如果圖片無法加載,采用默認樣式,
         "瀏覽器還怕圖片無法正常加載,必須在圖片路徑后面加,auto"*/
         /*兼容性寫法:應為有瀏覽器不支持這個屬性
         谷歌和Safar瀏覽器內核:-webkit-
         火狐瀏覽器:-moz-
         歐朋瀏覽器:-o-*/
         -moz-user-select: none;
     }
     table{
         width: 600px;
         height: 600px;
         border: 1px solid #000;
         margin: 100 auto;
         /*margin: x頁面邊距如果一個值表示所有邊距都為這個值,如果兩個值表示上下
         margin: xy;上下X,左右Y;
         margin: xyz;上X左右y,z下
         margin: abcd;分別是上右下左*/
         /*定寬居中:1必須是塊級元素2必須有寬度3*/
     }
     td{
         width: 150px;
         height: 150px;
         background-image: url(image/hole.png);
         background-size: 120px 50px;
         /*前寬后高*/
         background-repeat: no-repeat;
         background-position: center bottom;
         /*背景的位置:前水平后數值*/
         text-align: center;
         /*塊級元素內的行內元素居中對齊*/
         vertical-align: bottom;
         /*豎直方向上靠下*/

     }
     img{
         width: 80px;
         height: 0;
         position: relative;
         /*相對于元素本身進行定位*/
         bottom: 15px;
          animation-timing-function: linear;
         animation-fill-mode: both;
         
     }
     p{/*當元素設定絕對定位時會變成塊狀元素*/
         background: rgba(10, 10, 10,0.5);
         position:absolute;
         width: 200px;
         height: 60px;
         color:#000;
         text-align:center;
         line-height:50px;
         font-size:30px;
         left: 0;
         border-top-right-radius: 5px;
         /*先上下后左右 可寫兩個值,如果兩個值一樣,可以寫一個值*/
         border-bottom-right-radius: 5px;
     }
     /*rgb顯示幕三原色取值0-255,a=alpha是透明度 默認為1,取值0-1,0是為隱藏*/
     .up{
         animation-name: up;
         /*影片名*/
         animation-duration: 0.3s;
         /*影片時間*/
         /*animation-timing-function: linear;*/
         /*勻速上升*/
         /*animation-fill-mode: both;*/
         /*讓影片保持在結束時的狀態*/
     }
       @keyframes up{
         0%{
             height: 0;
         }
         100%{
             height: 80px;
         }
     } 
     .down{
         animation-name: down;
         animation-duration: 0.1s;
         /*animation-timing-function: linear;
         animation-fill-mode: both;*/
     }
     @keyframes down{
         0%{
             height: 80px;
         }
         100%{
             height: 0;
         }
     } 
       
 </style>
    
</head>
<body>
    <audio src="audio/music.mp3" autoplay loop></audio>
    <!--插入音頻,路徑,屬性:autoplay自動播放,loop回圈播放,寫在標簽里面的都是標簽屬性-->
    <audio src="" id="dazhong"></audio>
        <!--可以這樣寫table>(tr>td>*4)*4就可以-->
        <p id="score">得分:0</p>
        <table>
            <tr>
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            <!--alt表示當圖片無法加載時alt中的內容會呈現在頁面-->
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            </tr>
            <tr>
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            <!--alt表示當圖片無法加載時alt中的內容會呈現在頁面-->
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            </tr>
            <tr>
           <td><img src="image/mouse.png"  alt="地鼠" ></td>
            <!--alt表示當圖片無法加載時alt中的內容會呈現在頁面-->
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            </tr>
            <tr>
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            <!--alt表示當圖片無法加載時alt中的內容會呈現在頁面-->
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            <td><img src="image/mouse.png" alt="地鼠" ></td>
            </tr>
        </table>
        <script src="./jquery.js">  </script>
</body>
</html>
<script>
    // 全域變數,沒一個標簽都是一個節點,js獲取html節點,對節點進行操作的
    // js獲取節點的方法:document=html檔案
    // element=節點/元素
        var score=0
     // var im=document.getElementBYId(score)
        // var p=$('#score')
        // 獲取節點的簡單做法
        var mouses=$('img')
        // 函式 獲取亂數show為名 Math亂數  向下取整
     function show(){
         var a=Math.random()*16
         a=Math.floor(a)
         var mouse=mouses.get(a)
         $(mouse).addClass('up').removeClass('down')
        //  添加up類洗掉down類
        setTimeout(function(){
            $(mouse).addClass('down').removeClass('up')
        },2000)
        // 延遲多長時間執行

     } 
     function play(){
          show()
          show()
          show()
          show()
        //   for( var i=0;i<4;i++)
        //   show()
     }
    setInterval(play,2000)
    // 每隔兩秒呼叫以下函式
    $('img').click(function(){
       $('#dazhong').attr('src','audio/dazhong.wav').get(0).play()
    //    .attr()添加屬性
    $(this).addClass('down').removeClass('up')
    // 讓當前被點擊的圖片執行down影片,
    score += 10
    // score=score+10
    // .innerText=
    //以下該部分可控積分
    if(score == 100){
        if (confirm('真棒恭喜你闖關成功,點擊確認開啟甜蜜之旅吧!')==true){  
           window.location.href="./lovenote.html"
        }else{   
           score = 0; 
        } 
    }
    $('#score').text('得分:'+score)
    })
    $('body').mousedown(function(){
        $('body').css('cursor','url(image/cursor-down.png),auto')
    }).mouseup(function(){
      $('body').css('cursor','url(image/cursor.png),auto')  
    })
</script>

②lovenote.html,進入正題了,開始你的宣言了
效果如下:
在這里插入圖片描述

代碼如下:
<!--<!DOCTYPE html>-->
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="王鴻基">
        <title>愛的短信</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
        <style>
            body{
                margin: 0;
                padding: 0;  
            }
            div{
                position: relative;
                width: 60%;
                height: 100%;
                margin: 0 auto;
                font-family: '宋體';
                text-indent: 36px;
                font-size: 20px;
                line-height: 30px;
                background-color: rgba(red, green, blue, alpha);
                z-index: 1;
            }
            h1{
                text-align: center;
               margin-top: 20px;
               font-size: 1.5rem;
            }
            .clear{clear: both;}
            .img1{
                position: absolute;
                z-index: 100;
                top: 20vw;
                left: -5vw;
                width: 30%;
                height: 40%;
                position: fixed;
            }
              .img2{
                position: absolute;
                z-index: 100;
                top:45vh;
                right:28vw;
                width: 50%;
                height: 50%;
                position: fixed;
                opacity: 0.5;
            }
              .img3{
                position: absolute;
                z-index: 100;
                right:-5vw;
                width: 30%;
                height: 30%;
                position: fixed;
            }
        </style>
    </head>
    <body>
        <audio src="audio/1.mp3" autoplay loop></audio>
        <img class="img1" src="image/1.1.png" alt="">
        <img class="img2" src="image/1.2.png" alt="">
        <img class="img3" src="image/1.3.png" alt="">
        <div>
        <section  id="wrap">
            <p><h1>感動中的留情,短信中的深情</h1>
            <h5 style="text-align: right;color: pink;padding-right: 20%">- - 請閱讀到底部6秒鐘后有驚喜奧</h4>
親愛的還記得我們第一年相遇,那些準時的短信嗎?還記著那些<mark>甜甜蜜蜜</mark>的照片嗎?

****該部分為煽情碼字的地方,有事沒事啥的,對話記錄啥的,多寫點,聊天記錄啥的,寫上去,對你真心的肯定會看完,不喜歡的就一笑而過,你也就看看好了** **


暖暖,希望在平安夜這個寒冷的夜晚,她能夠收到,鴻基送來暖暖祝福!   夢杰<br>
</p>
</section>
        </div>
    </body>
</html>
<script>
    function flake(){
    //  document指的就是HTML檔案 
    //  element 代表節點
    // snowFlowerFly  駝峰式命名
    // 可變的是變數,不變的是常量
      var f = document.createElement('img')
    //   獲取HTML檔案的可視寬高
      var w = document.documentElement.clientWidth
      var h = document.documentElement.clientHeight
    // Math.random() 表示隨機取值0~1 可以取值為0,但是永遠不會為1
      var top = h * Math.random()
      var left = w * Math.random()
      var s = Math.random() / 2
    //   alert(typeof s)
    //   在JS里面,都是對節點進行操作
    // 對標簽進行操作 要加引號 
    // 對變數進行操作的時候,不用引號
      f.src = 'image/flow.png'
      f.style.position = 'absolute'
      f.style.position = 'fixed'
      f.style.top = top + 'px'
      f.style.left = left + 'px'
    //   變數不能寫在引號里邊
      f.style.transform = 'scale(' + s + ')'
      document.body.appendChild(f)
      
      function down(){
         top += 2
        //  top = top + 2
         left += 2
         f.style.top = top + 'px'
         f.style.left = left + 'px'
         if(left > w)left = -100
         if(top > h) top = -100
      }
      setInterval(down,50)
    }
    // 呼叫函式
      
    for(var i=0;i<50;i++){
          flake()
    }

    //獲取檔案的高度
var wraptop = document.getElementById("wrap").clientHeight;
window.onscroll = function(){
  //判斷滾動條的垂直位置來顯示回傳頂部按鈕
  if(document.body.scrollTop + document.body.clientHeight == wraptop+20){
    //三秒跳轉頁面
    var href = setTimeout(function(){
        window.location.href="./lovespin.html"
    },6000); 
  }
}

</script>

③lovespin.html部分,拼圖特效
之前19年抖音挺火的一個東西,今天咱用起來,效果如下:
在這里插入圖片描述
是一個類三D的一個旋轉圖形界面,純css,其實還是比較簡單的,大小縮放也很有藝術感

代碼如下:

css:
@charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
}
li{
	list-style: none;
}
.box{
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: 42%;
	margin-top: 22%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move 5s linear infinite;
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:50px;
	top:30px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(../img/01.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../img/06.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(../img/1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../img/2.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../img/3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../img/4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../img/5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../img/6.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	-webkit-transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.2;
	-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
	-webkit-transform:translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>純CSS實作滑鼠經過3D立體動態展示圖片特效代碼</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="box">
	<ul class="minbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol class="maxbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>
</body>
</html>

可放12張照片,在上述目錄的img目錄下,可換成女友斬訓生活照,還是很有效果感的

本文至此結束,也希望真心想學的人能有所成,生活是艱苦的,但陽光也總愛出現在風雨后,心向暖陽,何懼寒冬,

個人情感語錄:
愛人的手是溫暖的,當你遇到對的人時,也要學會勇敢的去表達,愛過,有過方知其珍貴,拿起,放下,方知其不易,

本文參考git開源網站及vsb,html相關學習網站(愛學者,可自行參考)
https://gitee.com/explore
http://www.vbtutor-chinese.net/
https://www.w3school.com.cn/html/index.asp

轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/238566.html

標籤:其他

上一篇:289頁初中級前端題助你拿下Offer

下一篇:html愛心表白代碼(最全)

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low,請各位大佬留情,一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁,頂部多層導航

    一個個人用的瀏覽器首頁,可以把一下常用的網站放在這里,平常打開會比較方便。 第一步,HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式,需要用到$(window).height(); 由于手寫demo的時候,過于自信,其實對前端方面的認識也不夠體系,用文本檔案直接敲出來的html代碼,第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前,必須要做好網站資料的備份,這個問題良家佐言是遇見過的;在剛開始接觸WordPress博客程式的時候,因為升級問題和博客網站的修改的一些嘗試,良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名,每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統,受到英文博客愛好者和中文博客愛好者的追捧,并逐步演化成一款內容管理系統軟體;它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新,就會牽動無數WordPress愛好者的心, ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果,首字改變樣式或者首行改變樣式,效果如下圖。 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽? <a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。 a標簽的語法格式:<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中,鏈接的默認外觀如下: 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址: 鏈接:https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼:4aks swiper.min.css地址 鏈接:https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片(全屏顯示,且不拉伸)

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解(上)

    HTML詳解 初識HTML Hyper Text Markup Language(超文本標記語言) 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽,描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年,面對生產環境,盡管都是小心翼翼,慎之又慎,還是難免捅出簍子。輕則滿頭大汗,面紅耳赤。重則系統停擺,損失資金。每一個生產事故的背后,都是寶貴的經驗和教訓,都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故,特開此專題,長期更新和記錄大大小小的各類事故。有些是親身經歷,有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 打開游戲界面,看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上,有一個白色的矩形框,里面不斷下落著各種單詞,而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配,那么我就可以獲得得分;如果我輸入的單詞錯誤或者時間過長,那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前,了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子,引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板(滑鼠和觸摸)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作,和在桌面端做法基本一致。 首先,使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流,并將其傳遞給 <video> 標簽進行渲染。 接著,使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 短視頻已經無數不在了,但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲,一圖頂百辯,且看下圖: 網址鏈接(需在微信或者手Q中瀏覽) 從上圖可以看到,我們主要實作的功能也是本文要講解的有: ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網(www)誕生,HTTP(HyperText Transfer Protocol)經歷了眾多版本迭代,WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more