数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚学
法学CSS 仅动画 - 用 border-radius 和透明背景绘制圆
要用透明背景和边框半径绘制圆，请使用以下 CSS −
body {
background: repeating-linear-gradient(45deg, white 0px, green 100px);
height: 400px;
background-size: 400px 400px;
background-repeat: no-repeat;
}
html {
height: 100%;
}
#box {
position: absolute;
width: 400px;
height: 400px;
border: solid blue 2px;
animation: colors 5s infinite;
}
#demo {
width: 50%;
height: 100%;
right: 0px;
position: absolute;
overflow: hidden;
transform-origin: left center;
animation: cliprotate 18s steps(2) infinite;
-webkit-animation: cliprotate 18s steps(2) infinite;
}
.circlehalf {
box-sizing: border-box;
height: 100%;
right: 0px;
position: absolute;
border: solid 20px transparent;
border-top-color: blue;
border-left-color: blue;
border-radius: 50%;
}
#clipped {
width: 200%;
animation: rotate 8s linear infinite;
-webkit-animation: rotate 8s linear infinite;
}
#fixed {
width: 100%;
transform: rotate(145deg);
animation: showfixed 18s steps(2) infinite;
-webkit-animation: showfixed 18s linear infinite;
}
@-webkit-keyframes cliprotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes cliprotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
0% {transform: rotate(-45deg);}
100% {transform: rotate(135deg);}
}
@keyframes rotate {
0% {transform: rotate(-45deg);}
100% {transform: rotate(135deg);}
}
@-webkit-keyframes showfixed {
0% {opacity: 0;}
49.9% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}下面是我们的 HTML5 画布 −
<div id = "box"> <div id = "demo"> <div class = "circlehalf" id = "clipped"> </div> </div> <div class = "circlehalf" id = "fixed"> </div> </div>
更新于: 25-6 月 - 2020
635 次浏览
广告