码迷,mamicode.com
首页 > Web开发 > 详细

css3画半圆 , 加上一点动画

时间:2017-10-07 15:01:07      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:比例   nsf   tom   一个   无限   css3   init   高度   nim   



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画半圆 , 加上一点动画

标签:比例   nsf   tom   一个   无限   css3   init   高度   nim   

原文地址:http://www.cnblogs.com/jshare/p/7634322.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!