请问一下CSS3怎么实现这种进度效果？

html-css021

请问一下CSS3怎么实现这种进度效果？,第1张

<!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>

1、输入自己的账号及密码，登陆网站后台。

2、把事先准备好的模板通过FTP上传到/templets里面，与默认的default同在一起。

3、在网站后台，点击系统-系统基本参数，这个时候可发看到在下面有一项“模板默认风格”把默认的“default”改成你的模板文件夹名字，保存好。

4、点击生成-更新首页，这里可以看到上面有“选择主页模板”后面依然是“default”这时要把这改成“模板文件夹名字”，点击更新。

5、此时首页是正常的了，但是栏目，内容页面还是以前的样子，那是因为没有更新，这里要更新栏目、内容页面，更新缓存。

6、这个时候后台生成一下首页点击浏览，已经网站显示正常，栏目、内容也正常，如果还是原来的样子，此时强制更新一下页面或按F5，即可。

查看店铺，右击，查看源代码，在里面找到你要改字体的标签，可以使用ctrl+f，找到后，根据class名，更改样式即可，font-family：‘宋体’。

font-family、微软雅黑，宋体，seri、解释下：这个设置的意思是，优先微软雅黑，如果没有微软雅黑就用宋体，两个都没有就用serif类字体。

导航栏CSS样式制作流程：

1、导航栏CSS样式设置，预览:导航样式是选择设置后，预览区会自动发生变化，涉及到“经过"的效果，是指鼠标放到该元素上产生的效果，需要把鼠标放设置的元素上查看设置效果。

2、颜色、点击颜色选择器，在颜色选择界面，选择你喜欢的颜色，或者设置指定的颜色(在#位置，填写颜色编号，可以指定需要的颜色。

这个需要自己提前使用PS或者其他取色软件获得需要的颜色编号)。选择了马赛克，意思是不设置，没有任何颜色。

3、图片、部分设置框里，是设置图片。首先，进入淘宝店铺图片空间，上传准备好的背景素材图片，上传完成后，复制图片地址，在图片设置框里粘贴(一定是淘宝图片空间的图片，否则不能在淘宝店铺安装导航CSS代码)。

注意，部分样式设置里，一个位置有颜色设置，同样有图片设置，任取一种必须设置一种。

4、字体、字体大小、字体名称、字体样式，根据提供的选项进行选择即可。