我们先设置一个200x200的方块,然后我们在这里面完成我们的效果:.circleProgress_wrapper{ width: 200px; height: 200px; margin: 50px auto; position: relative; border:1px solid #ddd; }接下来我将在这个容器里再放两个矩形,每个矩形都占一半:&l
转载 2023-12-06 20:01:55
122阅读
   前几天在网上看到了一个css3的进度条,自己想了下。做了一个。           进度条由4层构成,最下面的一层表示初始状态,我用蓝色的圆形div表示,第二层到第四层用来做进度动画用,第二层的是由一个宽高都为0的div,加上border和圆角做出来的,初始状态的时候,border的颜色全都是透明,旋转45度
转载 2024-03-27 13:10:33
138阅读
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: .circleprogress{ width: 160px; height: 160p
在线演示 本地下载
转载 2018-12-05 19:25:00
351阅读
2评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "://.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="://.w3.org/1999/xhtml"> <head
转载 2010-07-20 18:03:00
153阅读
2评论
.redius{ border-left:10em solid red; border-top:10em solid; -webkit-border-top-left-radius:10em; -webkit-border-top-right-radius:0px; ...
css
转载 2014-12-15 10:08:00
233阅读
2评论
CSS3角边框实例:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3角边框</title> <style>  div{ text-align:center; border:2px&nbsp
原创 2015-10-15 14:25:33
786阅读
在线演示 本地下载
转载 2018-12-01 22:50:00
290阅读
2评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <
转载 精选 2013-06-09 00:42:36
447阅读
在线演示 本地下载
转载 2018-12-05 15:46:00
110阅读
2评论
div+css3普通圆角代码示例<style type="text/css"> #round { width:200px; height:100px; margin:0px auto; border: 5px solid #000; border-radius:15px; } </style> <div id="round"></div> 以上代码可直接复制到HTML文件中运行。 运行后的效果图 div+css3普通无边框圆角代码示例 <style type="text/css"&
转载 2013-06-20 19:58:00
196阅读
2评论
使用到的css3属性有border-radius,transform,animation,clip等,在这里着重讲一下clip这个属性。因为博主也是第一次用这个属性。。。这个
原创 2023-01-30 16:20:30
663阅读
在开发微信小程序的时候,遇到圆形进度条的需求。本文主要介绍了使用 css3 实现圆形进度条的示例,这里整理了详细的代码,非常具有实用价值,需要的朋友可以参考下,希望能帮助到大家。使用canvas绘图比较麻烦:1、为了实现在不同屏幕上面的适配,必须动态的计算进度条的大小;2、在小程序中,canvas的画布具有最高的层级,不易于扩展。但使用css3和js实现进度条就很容易的避免了这方面的问题。注:这篇
转载 2024-06-18 09:52:14
95阅读
http://tympanus.net/Tutorials/CircularNavigation/interactivedemo/index.html
转载 2014-12-15 10:14:00
388阅读
2评论
今天我给大家介绍一下如何使用纯CSS来实现的一个响应式导航菜单,我们使用的是HTML5+CSS3技术,当浏览器窗口变小或者使用手机浏览器访问的时候,原本横条菜单会收缩成一个下拉菜单,当鼠标滑向菜单时下拉展示全部菜单。此方法可以应用到有特别多的链接菜单项目中,特别在移动项目中,它可以将所有菜单转换成一个按钮式的下拉菜单。查看演示DEMOHTML示例中有一个导航菜单的html结构,元素<nav&
转载 精选 2014-05-07 10:48:57
747阅读
​注意:菜单翻转效果在搜狗浏览器上看不出来。推荐用FireFox <!DOCTYPE   html   PUBLIC   "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html
转载 2013-08-04 20:45:00
283阅读
2评论
在线演示 本地下载
转载 2018-12-03 20:23:00
171阅读
2评论
下拉菜单是我们做前端经常遇到的一些案例,今天学习了一下一个博客做的案例,例子如下:源代码下载地址 css部分代码ul {    font-family:Arial, Helvetica, sans-serif;    background:#ccc;    background:-webkit-gradient(linear, left top, l
原创 2022-06-30 16:05:14
126阅读
实现的难点在于:first-child,last-child 两个选择器,以后margin-left:-1px;的应
原创 2012-08-31 19:28:00
150阅读
以往我们要实现菜单,都需要借助Javascript,今天我们用CSS 3与Html 来实现一个纯菜单,首先来看核心的HTML片断代码:<nav><ul><li><a href="#">Home</a></li><li><a href="#">Language</a><ul&g
转载 2012-11-30 08:25:00
89阅读
2评论
  • 1
  • 2
  • 3
  • 4
  • 5