CSS 点击按钮下载文件的代码怎么写啊

html-css020

CSS 点击按钮下载文件的代码怎么写啊,第1张

代码如下:

这里先解说下——这里有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>

<!DOCTYPE html>

<html>

<head>

<title>css模拟手机安装图标效果</title>

<meta charset="UTF-8">

<style>

*{/*外层margin,padding设置0*/

margin:0

padding:0

}

#abox{/*外层大容器相对定位,宽度高度各100px*/

position:relative

width:100px

height:100px

margin-left:100px

margin-top:100px

}

#abox::after{/*伪元素设置安装中字样,绑定动画myfirst3,安装完毕后安装中字样消失*/

content:""

display:block

width:100%

position:absolute

color:white

bottom:0

left:0

text-align:center

font-size:14px

font-weight:bold

animation:myfirst3 10s

-webkit-animation:myfirst3 10s/* Safari and Chrome */

}

@keyframes myfirst3/*安装中文字动画*/

{

from {

content:"安装中"

}

to {

content:""

}

}

#box1{/*底层图片,被透明的黑色层遮住*/

position:relative

width:100px

height:100px

background:url("123.png")

background-size:100% 100%

}

#box1::after{/*设置一个伪元素,让其绑定一个动画,透明度在动画完毕后变得完全透明*/

content:""

display:block

position:absolute

width:100%

height:100%

top:0

left:0

animation:myfirst2 10s

-webkit-animation:myfirst2 10s/* Safari and Chrome */

}

@keyframes myfirst2

{

from {

background:black

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

}

to {

background:none

filter:alpha(Opacity=0)

-moz-opacity:0

opacity:0

}

}

#box2{/*黑色层容器,绝对定位*/

position:absolute

width:60px

height:60px

top:20px

left:20px

overflow:hidden

border-radius:50%

}

#box2 img{/*插入一张图片,让其可以覆盖背景图片,且显示出效果*/

width:100px

height:100px

margin-top:-20px

margin-left:-20px

}

#box3{/*扇形黑色容器变化容器,注意控制left和top让其居中*/

position:absolute

width:46px

height:46px

left:7px

top:7px

border-radius:50%

animation:myfirst 3s/*绑定扇形变化动画效果*/

-webkit-animation:myfirst 3s/* Safari and Chrome */

}

@keyframes myfirst/*扇形黑色容器变化动画,利用css的裁剪功能模拟扇形变化*/

{

0%{

clip-path: polygon(50% 50%, 68% 0, 100% 0, 100% 100%, 0 100%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

10%{

clip-path: polygon(50% 50%, 100% 26%, 100% 45%, 100% 100%, 0 100%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

20%{

clip-path: polygon(50% 50%, 100% 71%, 100% 86%, 100% 100%, 0 100%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

30%{

clip-path: polygon(50% 50%, 100% 100%, 58% 100%, 34% 100%, 0 100%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

40%{

clip-path: polygon(50% 50%, 59% 100%, 7% 100%, 0 100%, 0 74%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

50%{

clip-path: polygon(50% 50%, 19% 100%, 0 100%, 0 58%, 0 35%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

60%{

clip-path: polygon(50% 50%, 0 78%, 0 51%, 0 29%, 0 18%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

70%{

clip-path: polygon(50% 50%, 0 40%, 0 27%, 0 13%, 0 0, 28% 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

80%{

clip-path: polygon(50% 50%, 0 11%, 0 0, 13% 0, 25% 0, 38% 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

90%{

clip-path: polygon(50% 50%, 7% 0, 15% 0, 23% 0, 32% 0, 41% 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

100%{

clip-path: polygon(50% 50%, 52% 0, 52% 0, 52% 0, 51% 0, 52% 0, 52% 0)

filter:alpha(Opacity=0)

-moz-opacity:0

opacity:0

background:none

}

}

</style>

</head>

<body>

<div id="abox"><!--外层容器-->

<div id="box1"></div><!---第一层背景容器-->

<div id="box2"><!--第二层图片容器-->

<div id="box3"></div>

<img src="123.png">

</div>

</div>

</body>

</html>