css动画从上到下弹出下载按钮

html-css023

css动画从上到下弹出下载按钮,第1张

主要思路是利用hover来进行功能实现,transition-duration:来实现过度动画;

css这样实现

html如下

.download-block{

width:90%

height:100px

background:#0b0e32

/*margin:  100px  auto 0*/

    margin:0 auto

position:absolute

left:0

right:0

transition-duration:2s

opacity:0.7

}

.download-block1{

background:transparent

height:100px

overflow:hidden

position:relative

left:0

top:-100px

right:0

padding-top:100px

transition-duration:2s

opacity:0.7

cursor:pointer

}

.download-block1:hover{

padding-top:0

transition-duration:2s

opacity:0.7

}

代码如下:

这里先解说下——这里有A /B 两个按钮,分别链接a/b.css, 只要单击按钮就可以实现改变头部id为change_css 的css文件。当你希望change_css一开始没有css只是点击按钮的时候才有css的话,那么你给change_css这个id的链接 href=“ ”

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<link id="change_css" rel="stylesheet" type="text/css" href="a.css">

</head>

<body>

<input type=button value="A按钮" onclick="document.all.change_css.href='a.css'">

<input type=button value="B按钮" onclick="document.all.change_css.href='b.css'">

</body>

</html>