You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > 403< / title >
< style >
* {
box-sizing : border-box ;
margin : 0 ;
padding : 0 ;
}
. container {
text-align : center ;
margin : 1 rem 0.5 rem 0 ;
}
. container p {
text-transform : uppercase ;
letter-spacing : 0.2 rem ;
font-size : 2 rem ;
margin : 1.5 rem 0 3 rem ;
}
svg . keyhole {
height : 82 px ;
width : 82 px ;
opacity : 0 ;
visibility : hidden ;
/* 为钥匙孔定义一个动画， ，
animation : showKey 0.5 s 0.5 s paused ease-out forwards ;
}
svg . key {
height : 164 px ;
width : 164 px ;
position : absolute ;
opacity : 0 ;
visibility : hidden ;
/* 为钥匙孔定义一个动画， ，
animation : showKey 0.5 s 0.5 s paused ease-out forwards ;
}
/* 定义关键帧动画-悬停鬼影使鬼影向右、向左移动，然后返回到其默认位置
-showKey将钥匙（ ）
-showText、showNewText、showFinalText显示不同的字符串*/
@ keyframes hoverGhost {
25 % {
transform : translateX ( 20 vw ) ;
}
75 % {
transform : translateX ( -20 vw ) ;
}
}
@ keyframes showKey {
to {
opacity : 1 ;
visibility : visible ;
}
}
< / style >
< / head >
< body >
<!-- 在一个容器中包括一个标题、段落和锁眼的svg -->
< div class = "container" >
< h1 > 请安装vpn并且保持登录状态< / h1 >
< p > access not granted< / p >
< svg class = "keyhole" >
< use href = "#keyhole" / >
< / svg >
< / div >
<!-- 在容器外部， ， -->
< svg class = "key" >
< use href = "#key" / >
< / svg >
<!--
将svg嵌套在div中， ，
从而在文本（ ）
-->
< div class = "ghost" >
< svg class = "ghost" >
< use href = "#ghost" / >
< / svg >
< / div >
< / body >
< / html >
