border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆、下半圆、左半圆和右半圆效果。例如:
.semicircle { margin: 30px;
}
.top {
width: 100px;/*宽度为高度的2倍*/
height: 50px;
border-radius: 50px 50px 0 0;/*圆角半径为高度的值*/
}
.right {
height: 100px;/*高度为宽度的2倍*/
width: 50px;
border-radius: 0 50px 50px 0;/*圆角半径为宽度的值*/
}
.bottom {
width: 100px;/*宽度为高度的2倍*/
height: 50px;
border-radius: 0 0 50px 50px;/*圆角半径为高度的值*/
}
.left {
width: 50px;
height: 100px;/*高度为宽度的2倍*/
border-radius: 50px 0 0 50px;/*圆角半径为宽度的值*/
}

  

转自:http://www.cnblogs.com/afuge/p/4631173.html

-----------------------------

补充下,需要,我的实际使用, 加了点动画

 .circlebg{
background-color: #0081EE;
width: 200px;/*宽度为高度的2倍*/
height: 100px;
border-radius: 100px 100px 0 0;/*圆角半径为高度的值*/ -webkit-transform: rotate(320deg);
filter:alpha(Opacity=70);
-moz-opacity:0.7;
opacity: 0.7; //-webkit-animation:gogogo 2s infinite linear ; // infinite 无限次 -webkit-animation:gogogo 0.2s linear ;
}
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg);
filter:alpha(Opacity=30);
-moz-opacity:0.3;
opacity: 0.3;
}
50%{
-webkit-transform: rotate(160deg);
filter:alpha(Opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
100%{
-webkit-transform: rotate(320deg);
filter:alpha(Opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
}
}

  效果就是 一个0.2  会旋转的一个半圆 效果。

css3画半圆 , 加上一点动画的更多相关文章

  1. css3画半圆的两种方法

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...

  2. css3画半圆

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如:.semicirc ...

  3. css3 画半圆和1/4圆

    半圆: #circle1 { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px ...

  4. html5+css3画太极并添加动画效果

    可兼容移动端视图 效果图如下:太极图是可以旋转的 具体实现如下: <!DOCTYPE html> <html lang="zh"> <head> ...

  5. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  6. 一款纯css3实现的超炫动画背画特效

    之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览  ...

  7. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  8. 如何使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...

  9. (转)利用 SVG 和 CSS3 实现有趣的边框动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

随机推荐

  1. php-echo原理

    1.语法分析 unticked_statement: | T_ECHO echo_expr_list ';' ; echo_expr_list: echo_expr_list TSRMLS_CC); ...

  2. 漫谈NIO(1)之计算机IO实现

    1.前言 此系列将尽可能详细介绍断更博客半年以来个人的一个成长,主要是对Netty的源码的一个解读记录,将从整个计算机宏观IO体系上,到Java的原生NIO例子最后到Netty的源码解读.不求完全掌握 ...

  3. 【Java并发编程】:线程中断

    使用interrupt()中断线程 当一个线程运行时,另一个线程可以调用对应的Thread对象的interrupt()方法来中断它,该方法只是在目标线程中设置一个标志,表示它已经被中断,并立即返回.这 ...

  4. SpringMVC+AJAX+JSON

    在做一个ajax发送json到springmvc的控制层,控制层的对象中有一个List集合,ajax调用总是报415错误.发现了一个一直没有注意到的问题,借机记录一下. (细节部分都忽略了,在最后的d ...

  5. HUE配置文件hue.ini 的hdfs_clusters模块详解(图文详解)(分HA集群和非HA集群)

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  6. Java虚拟机(三):JVM垃圾回收机制

    概述 垃圾收集 Garbage Collection 通常被称为“GC”,它诞生于1960年 MIT 的 Lisp 语言,经过半个多世纪,目前已经十分成熟了. jvm 中,程序计数器.虚拟机栈.本地方 ...

  7. 机器学习--Gradient Boosting Machine(GBM)调参方法详解

    一.GBM参数 总的来说GBM的参数可以被归为三类: 树参数:调节模型中每个决策树的性质 Boosting参数:调节模型中boosting的操作 其他模型参数:调节模型总体的各项运作 1.树参数 现在 ...

  8. PTA (Advanced Level) 1021 Deepest Root

    Deepest Root A graph which is connected and acyclic can be considered a tree. The hight of the tree ...

  9. json list数据递归生成树状层级JSON

    <!DOCTYPE html> <html> <head> <script> var data=[ {"id":"aaa& ...

  10. Java对象的强、软、弱和虚引用+ReferenceQueue

    Java对象的强.软.弱和虚引用+ReferenceQueue 一.强引用(StrongReference) 强引用是使用最普遍的引用.如果一个对象具有强引用,那垃圾回收器绝不会回收它.当内存空间不足 ...