السلام عليكم ورحمة الله وبركاته
الفكره بسيطه وهي كالاتي قدامك شريط بيقولك دوس عليه علشان تظهر الكود
الشكل ده واول ما تاشر علي الشريط الشريط الاحمر يبعد تمام وانا ظابطه علي ثانيتين
اول ما يبعد الكود ايبان ويكون بالشكل ده
واول ما تخلع الماشره عليه يرجع الشريط الاحمر لمكانه عامل تاثير بسيط للفلتر انه كلام الشريط الاحمر ميبانش ويظهر ذي مافي الصوره ولما يرجع الشريط يبان
الكود سهل وبسيط وفكرته سهله
الاكواد
كود PHP:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css">
<title>test</title>
</head>
<style>
.coupon{
border:2px dashed #C4D0CE;
background-color:#fff;
padding:10px;
width:200px;
margin:auto;
margin-top:100px;
overflow:hidden;
}
.coupon .code{
text-align:right;
color:#020202;
}
.coupon .dom{
position:absolute;
background-color:#901C3A;
width:200px;
padding:10px;
margin-top:-10px;
margin-left:-10px;
cursor:pointer;
transition:transform 2s ,filter 2s,width 2s ;
}
.coupon .dom:hover{
filter: blur(8px);
transform:translate(-200px,0px);
border:1px dashed #C4D0CE;
}
</style>
<body>
<div class="coupon">
<div id="click" class="dom">click to show coupon</div>
<div class="code">Helpernt.com</div>
</div>
</body>
الشكل التاني
اما لو عايزه يكون بالشكل ده واول ما تاشر عليه الكلام يظهر
ويكون بالشكل ده
code
كود PHP:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css">
<title>test</title>
</head>
<body>
<style>
.coupon{
border:2px dashed #C4D0CE;
background-color:#fff;
padding:10px;
width:200px;
margin:auto;
margin-top:100px;
overflow:hidden;
}
.coupon .code{
text-align:center;
color:#020202;
filter: blur(8px);
transition:filter 1s;
}
.coupon .code:hover{
filter: blur(0px);
}
</style>
<div class="coupon">
<div class="code">Helpernt.com</div>
</div>
</body>