• css3画半圆 , 加上一点动画




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

      

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

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

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

     .circlebg{
        background-color: #0081EE;
         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  会旋转的一个半圆 效果。

  • 相关阅读:
    如何使用go module导入本地包
    gin-vue-admin 03 项目打包上线
    golang map转xml
    vim简明文档
    goframe gf-cli的使用
    supervisor 的安装与使用
    element Tree 树形控件
    gin-vue-admin开发教程 02 了解项目目录结构和代码执行的流程
    gin-vue-admin开发教程 01安装与启用
    oraclesql遇见的问题(一)
  • 原文地址:https://www.cnblogs.com/jshare/p/7634322.html
Copyright © 2020-2023  润新知