第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

這份答案很棒

<!doctype html>

<html>

<head>

? <meta charset="UTF-8">

? <title>Just a little Demo</title>

? <style>

? *{margin:0;padding:0;}

? ? .head {

? ? ? font-size: 12px;

? ? ? padding: 6px 0 0 10px;

? ? }


? ? #login_box {

? ? ? width: 300px;

? ? ? height: 150px;

? ? ? background: #eee;

? ? ? border: 1px solid #ccc;

? ? ? position: absolute;

? ? ? left:50%; top:50%;

? ? ? margin-left: -150px;

? ? ? margin-top: -75px;

? ? ? display: none;

? ? }


? ? #login_box p {

? ? ? height: 20px;

? ? ? border-bottom: 1px solid #ccc;

? ? ? font-size: 12px;

? ? ? padding: 6px 0 0 5px;

? ? ? font-weight: bold;

? ? }


? ? #login_box:before {

? ? ? content: ":）";

? ? ? position: absolute;

? ? ? top: 75px;

? ? ? left: 134px;

? ? ? font-size: 32px;

? ? ? transform: rotate(90deg);

? ? }


? ? ?#close {

? ? ? width: 14px;

? ? ? height: 14px;

? ? ? /*background:url(close.png) no-repeat;*/

? ? ? position: absolute;

? ? ? right: 4px;

? ? ? top: 6px;

? ? ? cursor: pointer;

? ? }


? ? #close:before, #close:after {

? ? ? content: '';

? ? ? position: absolute;

? ? ? right: -3px;

? ? ? top: 7px;

? ? ? width: 19px;

? ? ? height: 1px;

? ? ? background: #ccc;

? ? ? -webkit-transform: rotate(45deg);

? ? ? -moz-transform: rotate(45deg);

? ? ? -ms-transform: rotate(45deg);

? ? ? -o-transform: rotate(45deg);

? ? ? transform: rotate(45deg);

? ? ? transition: all .5s;

? ? }


? ? #close:after {

? ? ? -webkit-transform: rotate(-45deg);

? ? ? -moz-transform: rotate(-45deg);

? ? ? -ms-transform: rotate(-45deg);

? ? ? -o-transform: rotate(-45deg);

? ? ? transform: rotate(-45deg);

? ? }

? ? #close:hover:before, #close:hover:after {

? ? ? /*-webkit-transform: rotate(225deg);*/

? ? ? /*-moz-transform: rotate(225deg);*/

? ? ? /*-ms-transform: rotate(225deg);*/

? ? ? /*-o-transform: rotate(225deg);*/

? ? ? background: #f00;

? ? }

? ? ? /*#close:hover:after{*/

? ? ? /* -webkit-transform: rotate(135deg);*/

? ? ? /* -moz-transform: rotate(135deg);*/

? ? ? /* -ms-transform: rotate(135deg);*/

? ? ? /* -o-transform: rotate(135deg);*/

? ? /*}*/

? ? .anim_fadeInDown {

? ? ? animation-name: fadeInDown;

? ? ? -webkit-animation-name: fadeInDown;

? ? ? -moz-animation-name: fadeInDown;

? ? ? -o-animation-name: fadeInDown;

? ? ? -ms-animation-name: fadeInDown;

? ? }


? ? .anim_fadeOutUp {

? ? ? animation-name: fadeOutUp;

? ? ? -webkit-animation-name: fadeOutUp;

? ? ? -moz-animation-name: fadeOutUp;

? ? ? -o-animation-name: fadeOutUp;

? ? ? -ms-animation-name: fadeOutUp;

? ? }


? ? .animated {

? ? ? animation-fill-mode: both;

? ? ? -webkit-animation-fill-mode: both;

? ? ? -moz-animation-fill-mode: both;

? ? ? -o-animation-fill-mode: both;

? ? ? -ms-animation-fill-mode: both;

? ? }


? ? .speed_fast {

? ? ? animation-duration: 0.2s;

? ? ? -webkit-animation-duration: 0.2s;

? ? ? -moz-animation-duration: 0.2s;

? ? ? -o-animation-duration: 0.2s;

? ? ? -ms-animation-duration: 0.2s;

? ? }


? ? @keyframes fadeInDown{ ?

? ? ? 0%{

? ? ? ? opacity: 0;

? ? ? ? transform: scale(0) translateY(-10px);

? ? ? } ?

? ? ? 100%{

? ? ? ? opacity: 1;

? ? ? ? transform: scale(1) translateY(0);

? ? ? }

? ? }


? ? @-webkit-keyframes fadeInDown{ ?

? ? ? 0%{

? ? ? ? opacity: 0;

? ? ? ? -webkit-transform: scale(0) translateY(-10px);

? ? ? } ?

? ? ? 100%{

? ? ? ? opacity: 1;

? ? ? ? -webkit-transform: scale(1) translateY(0);

? ? ? }

? ? }


? ? @-moz-keyframes fadeInDown{ ?

? ? ? 0%{

? ? ? ? opacity: 0;

? ? ? ? -moz-transform: scale(0) translateY(-10px);

? ? ? } ?

? ? ? 100%{

? ? ? ? opacity: 1;

? ? ? ? -moz-transform: scale(1) translateY(0);

? ? ? }

? ? }


? ? @-o-keyframes fadeInDown{ ?

? ? ? 0%{

? ? ? ? opacity: 0;

? ? ? ? -o-transform: scale(0) translateY(-10px);

? ? ? } ?

? ? ? 100%{

? ? ? ? opacity: 1;

? ? ? ? -o-transform: scale(1) translateY(0);

? ? ? }

? ? }


? ? @-ms-keyframes fadeInDown{ ?

? ? ? 0%{

? ? ? ? opacity: 0;

? ? ? ? -ms-transform: scale(0) translateY(-10px);

? ? ? } ?

? ? ? 100%{

? ? ? ? opacity: 1;

? ? ? ? -ms-transform: scale(1) translateY(0);

? ? ? }

? ? }


? ? @keyframes fadeOutUp{

? ? ? 0%{

? ? ? ? opacity: 1;

? ? ? ? transform: translateY(0);

? ? ? }

? ? ? 100%{

? ? ? ? opacity: 0;

? ? ? ? transform: translateY(-10px);

? ? ? }

? ? }


? ? @-webkit-keyframes fadeOutUp{

? ? ? 0%{

? ? ? ? opacity: 1;

? ? ? ? -webkit-transform: translateY(0);

? ? ? }

? ? ? 100%{

? ? ? ? opacity: 0;

? ? ? ? -webkit-transform: translateY(-10px);

? ? ? }

? ? }


? ? @-moz-keyframes fadeOutUp{

? ? ? 0%{

? ? ? ? opacity: 1;

? ? ? ? -moz-transform: translateY(0);

? ? ? }

? ? ? 100%{

? ? ? ? opacity: 0;

? ? ? ? -moz-transform: translateY(-10px);

? ? ? }

? ? }


? ? @-o-keyframes fadeOutUp{

? ? ? 0%{

? ? ? ? opacity: 1;

? ? ? ? -o-transform: translateY(0);

? ? ? }

? ? ? 100%{

? ? ? ? opacity: 0;

? ? ? ? -o-transform: translateY(-10px);

? ? ? }

? ? }


? ? @-ms-keyframes fadeOutUp{

? ? ? 0%{

? ? ? ? opacity: 1;

? ? ? ? -ms-transform: translateY(0);

? ? ? }

? ? ? 100%{

? ? ? ? opacity: 0;

? ? ? ? -ms-transform: translateY(-10px);

? ? ? }

? ? }

? </style>

? <script>

? ? window.onload = function() {

? ? ? var login_btn = document.getElementById('login'),

? ? ? ? ? login_box = document.getElementById('login_box'),

? ? ? ? ? close = document.getElementById('close');

? ? ? // 封裝添加事件監(jiān)聽(tīng)程序

? ? ? function addEvent(ele, type, hander){

? ? ? ? if(ele.addEventListener){

? ? ? ? ? ele.addEventListener(type, hander, false);

? ? ? ? } else if(ele.attachEvent){

? ? ? ? ? ele.attachEvent('on' + type, hander);

? ? ? ? } else {

? ? ? ? ? ele['on' + type] = hander;

? ? ? ? }

? ? ? }

? ? ? // 顯示登錄層函數(shù)

? ? ? function showLogin(){

? ? ? ? login_box.style.display = "block";

? ? ? ? login_box.className = 'anim_fadeInDown speed_fast animated';

? ? ? }

? ? ? // 隱藏登錄層函數(shù)

? ? ? function hideLogin(){

? ? ? ? setTimeout(function() {

? ? ? ? ? login_box.style.display = "none";

? ? ? ? },200);

? ? ? ? login_box.className = 'anim_fadeOutUp speed_fast animated';

? ? ? }

? ? ? addEvent(login_btn, 'click', showLogin);

? ? ? addEvent(close, 'click', hideLogin);

? ? ? //點(diǎn)擊登錄按鈕顯示登錄層?

? ? ? // 執(zhí)行代碼

? ? ? //點(diǎn)擊關(guān)閉按鈕隱藏登錄層

? ? ? // 執(zhí)行代碼

? ? }

? </script>

? <script type="text/javascript">

? ? window.onblur = function() {

? ? ? document.title = '(●—●)';

? ? };

? ? window.onfocus = function() {

? ? ? document.title = "Just a little Demo";

? ? };

? </script>

</head>

<body>

? <div>親，您好！<input type="button" value="登 錄" id="login"></div>

? <div id="login_box">

? ? <p>用戶登錄</p><span id="close"></span>

? </div>

</body>

</html>


正在回答

2 回答

贊~\(≧▽≦)/~~想問(wèn)那個(gè)小X和笑臉都是畫(huà)出來(lái)的么？?

厲害！

0 回復(fù) 有任何疑惑可以回復(fù)我~
#1

哦哦噠

笑臉是用:）加上旋轉(zhuǎn)做出來(lái)的，小X是把span整個(gè)縮成了1PX然后再做兩個(gè)旋轉(zhuǎn)，就出了X，寫(xiě)代碼的人腦洞真大，太有才了
2015-08-08 回復(fù) 有任何疑惑可以回復(fù)我~
#2

阿啦嘞 回復(fù) 哦哦噠

確實(shí)很棒
2015-09-26 回復(fù) 有任何疑惑可以回復(fù)我~ 
小白表示看不懂:)


0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150
提交
取消
DOM事件探秘
  • 參與學(xué)習(xí)       99532    人
  • 解答問(wèn)題       1291    個(gè)

DOM事件？本課程會(huì)通過(guò)實(shí)例來(lái)給小伙伴們講解如何使用這些事件

進(jìn)入課程
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)