h5画圆
2024-08-29 21:21:02
下面一段代码是，h5的画圆，半圆，四分之一圆等效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{ width: 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{
width: 300px;
height: 150px;
border: 1px solid red;
border-radius: 150px 150px 0px 0px; }
#b{
width: 300px;
height: 150px;
border: 1px solid red;
border-radius: 0px 0px 150px 150px;
}
#c{
width: 150px;
height: 150px;
border: 1px solid red;
border-radius: 150px 0px 0px 0px;
}
#d{
width: 150px;
height: 150px;
border: 1px solid red;
border-radius: 0px 150px 0px 0px;
}
#e{
width: 150px;
height: 150px;
border: 1px solid red;
border-radius: 0px 0px 150px 0px;
}
#f{
width: 150px;
height: 150px;
border: 1px solid red;
border-radius: 0px 0px 0px 150px;
}
#g{
width: 150px;
height: 300px;
border: 1px solid red;
border-radius: 150px 0px 0px 150px;
}
#h{
width: 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>
最新文章
- Asp.net MVC的ViewData与ViewBag以及TemplateData的使用与区别
- 日志系统实战(一)—AOP静态注入
- web响应式图片设计实现
- linux yum软件管理
- 尽量少用if else
- [HDOJ2473]Junk-Mail Filter（并查集，删除操作，马甲）
- poj 3352 边连通分量
- 端口扫描器之java实现
- SuspendLayout()了解方法
- Java中的网络支持InetAddress&URL
- 前端开发面试题总结之——JAVASCRIPT（三）
- python logging详解及自动添加上下文信息
- 修改svn默认端口
- 安装mysql服务时提示“找不到msvcp140.dll”
- override与new的区别
- 16 利用Zabbix完成windows监控
- python+unittet在linux与windows使用的区别
- angularjs探秘<二>表达式、指令、数据绑定
- 3.linux基本操作命令
- zabbix web 配置