6
पर बहता है मेरे पास अगला कोड है (सीमाएं दिखायी जानी चाहिए, मुझे नहीं पता कि वे डेमो में क्यों विघटित हुए हैं), स्क्रीन 8 बराबर भागों में विभाजित है और प्रत्येक भाग पर लहर प्रभाव होना चाहिए। क्रोम, मोज़िला, ओपेरा, सफारी में सभी ठीक काम करते हैं, लेकिन लहर आईई में तत्व बहती है। मेरे द्वारा यह कैसे किया जा सकता है?सीएसएस एनीमेशन div
$(document).ready(function() {
$(".button_line").on('click', ".menu_button", function (e) {
DoRipple($(this), e);
});
});
var parent, ink, d, x, y;
function DoRipple(parent, e) {
if (parent.find(".ink").length == 0) {
parent.prepend("<span class='ink'></span>");
}
ink = parent.find(".ink");
ink.removeClass("animate");
if (!ink.height() && !ink.width()) {
d = Math.max(parent.outerWidth(), parent.outerHeight());
ink.css({ height: d, width: d });
}
x = e.pageX - parent.offset().left - ink.width()/2;
y = e.pageY - parent.offset().top - ink.height()/2;
ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate");
function removeAnimationClass() {
ink.removeClass("animate");
}
setTimeout(
function() {
ink.removeClass("animate");
}, 650);
}
html, body{
height:100%;
width:100%;
margin:0;
padding:0;
}
.equal, .equal > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 1 0 auto;
}
.button_line {
height: 25%;
width: 100%;
}
a.menu_button {
width: 50%;
height: 100%;
float: left;
background-color: white;
display: table;
border-collapse: collapse;
text-decoration: none;
color: black;
position:relative;
overflow:hidden;
cursor:pointer;
}
a.menu_button > .menu_button_content {
display: table-cell;
vertical-align: middle;
}
a.menu_button > .border_overlay {
height:100%;
width:100%;
position:absolute;
border-right: 1px solid #E6F0F0;
border-bottom: 1px solid #E6F0F0;
}
a.menu_button > .menu_button_content > h2 {
text-align: center;
font-size: 1.1em;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle {
padding: 0;
width: 40px;
height: 3px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#residence {
background-color: #74dbce;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#citizenship {
background-color: #509194;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#forillegals {
background-color: #ff7662;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#soonillegals {
background-color: #ffd869;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#fastsearch {
background-color: #7b8dd8;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#cooperation {
background-color: #bb5b91;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#aboutapp {
background-color: #a29994;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#settings {
background-color: #f47b50;
}
.ink {
display: block;
position: absolute;
background: #006064;
border-radius: 100%;
transform: scale(0);
}
/*animation effect*/
.ink.animate {
animation: ripple 0.65s linear;
}
@keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
transform: scale(2.5);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="button_line">
<a class="ol-md-6 menu_button" id="Residence">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="ResidenceText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Residence %>" />
</h2>
<div class="menu_button_color_rectangle" id="residence"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="CitizenshipText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Citizenship %>" />
</h2>
<div class="menu_button_color_rectangle" id="citizenship"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="FastSearchText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, FastSearch %>" />
</h2>
<div class="menu_button_color_rectangle" id="fastsearch"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="CooperationText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Cooperation %>" />
</h2>
<div class="menu_button_color_rectangle" id="cooperation"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="ForIllegalsText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, ForIllegals %>" />
</h2>
<div class="menu_button_color_rectangle" id="forillegals"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="SoonIllegalsText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, SoonIllegals %>" />
</h2>
<div class="menu_button_color_rectangle" id="soonillegals"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="AboutAppText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, AboutApp %>" />
</h2>
<div class="menu_button_color_rectangle" id="aboutapp"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="Settings">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="SettingsText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Settings %>" />
</h2>
<div class="menu_button_color_rectangle" id="settings"></div>
</div>
</a>
</div>
हाँ, धन्यवाद यह वास्तव में मुझे मदद मिली। और स्थिति को तोड़ने के लिए मैंने सामग्री को एक रैपर में लपेट लिया जो प्रदर्शित था: तालिका – Cheese