zoukankan      html  css  js  c++  java
  • h5画圆

    下面一段代码是,h5的画圆,半圆,四分之一圆等效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
    
                 300px;
                height: 300px;
                border: 1px solid red;
                border-radius: 150px;
                background:url("image/Capture001.png") 0px 0px no-repeat;
                background-size: cover ;
                transition: 0.1s;
                box-shadow: 10px 10px 10px red;
    
    
    
            }
            div:hover{
                transform: rotate(360deg)scale(1);
                -webkit-transition:0.1s;
                -moz-transition: 0.1s;
                -ms-transition: 0.1s;
                -o-transition: 0.1s;
                transition:all 0.1s linear ;
    
            }
            @-webkit-keyframes circle{
                0%{ transform:rotate(0deg); }
                100%{ transform:rotate(-360deg); }
            }
    
            #a{
                 300px;
                height: 150px;
                border: 1px solid red;
                border-radius: 150px 150px 0px 0px;
    
            }
            #b{
                 300px;
                height: 150px;
                border: 1px solid red;
                border-radius: 0px 0px 150px 150px;
            }
            #c{
                 150px;
                height: 150px;
                border: 1px solid red;
                border-radius: 150px 0px 0px 0px;
            }
            #d{
                 150px;
                height: 150px;
                border: 1px solid red;
                border-radius: 0px 150px 0px 0px;
            }
            #e{
                 150px;
                height: 150px;
                border: 1px solid red;
                border-radius: 0px 0px 150px 0px;
            }
            #f{
                 150px;
                height: 150px;
                border: 1px solid red;
                border-radius: 0px 0px 0px 150px;
            }
            #g{
                 150px;
                height: 300px;
                border: 1px solid red;
                border-radius: 150px 0px 0px 150px;
            }
            #h{
                 150px;
                height: 300px;
                border: 1px solid red;
                border-radius: 0px 150px 150px 0px;
            }
        </style>
    </head>
    <body>
    <center>
    <div></div>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
    <div id="e"></div>
    <div id="f"></div>
    <div id="g"></div>
    <div id="h"></div>
    </center>
    </body>
    </html>
    

      

  • 相关阅读:
    开源的Ajax.Net类库
    开放的即时通信协议Jabber
    代码生成工具之MyGeneration
    清华梦的粉碎—写给清华大学的退学申请(牛人 王垠 )
    [.NET网格计算框架] Alchemi
    .net安全类库
    使用Facility:EnterpriseLibrary整合进Castle
    castle project 发布新版本
    10招步骤保护IIS服务器安全
    应用IBatisNet+Castle进行项目的开发
  • 原文地址:https://www.cnblogs.com/wangbenqing/p/7025774.html
Copyright © 2011-2022 走看看