几种div点击关闭消失动画效果代码
代码语言:html
所属分类:布局界面
代码描述:几种div点击关闭消失动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); .container { overflow: hidden; min-height: 200vh; } .pop-up { height: 100px; width: 50%; border-radius: 10px; margin: 5px auto; position: relative; } .pop-up div { color: white; line-height: 100px; padding-left: 10%; font-family: 'Roboto', sans-serif; } .close { background: transparent; border: none; position: absolute; right: 5px; color: white; font-size: 25px; cursor: pointer; outline: none; } #one { background: salmon; } #two { background: orange; } #three { background: skyblue; } #four { background: #405CBF; } #five { background: blue; position: relative; } #five:before { content: ""; display: none; background: blue; height: 100px; width: 50%; position: absolute; border-radius: 10px 0px 0px 10px; } #five:after { content: ""; display: none; background: blue; height: 100px; width: 50%; position: absolute; left: 50%; border-radius: 0px 10px 10px 0px; } #six { background: darkblue; position: relative; } #six span { background: darkblue; height: 100px; width: 10%; border-radius: 0%; top: 0; position: absolute; } #last { background: #030B4D; } </style> </head> <body > <div class="container"> <div class="pop-up animate" id="one"> <button class="close one"> x </button> <div>this one fades</div> </div> <div class="pop-up animate" id="two"> <button class="close two"> x </button> <div>this one gets swiped</div> </div> <div class="pop-up animate" id="three"> <button class="close three"> x </button> <div>this one spins</div> </div> <div class="pop-up animate" id="four"> <button class="close four"> x </button> <div>and so does this one</div> </div> <div class="pop-up animate" id="five"> <button class="close five"> x </button> <div>this one breaks in two</div> </div> <div class="pop-up animate" id="six"> <button class="close six"> x </button> <div>this one breaks apart</div> </div> <div class="pop-up animate" id="last"> <button class="close last"> x </button> <div>this one falls</div> </div> </div> <script type="text/javascrip.........完整代码请登录后点击上方下载按钮下载查看
网友评论0