标签：css3 效果 100px 奇特 height width background box6 border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
.box1,
.box0{
width: 60px;
height: 60px;
background: #fafafa;
margin:200px 0 0 200px;
box-shadow: 0 0 0 10px #E8E2D6, 0 0 0 20px #E1D9C9,
0 0 0 30px #D9CFBB, 0 0 0 40px #D2C6AE,
0 0 0 50px #CABCA0, 0 0 0 60px #C3B393,
0 0 0 70px #BBA985, 0 0 0 80px #B4A078;
}
.box0{
margin:100px 0 0 200px;
border-radius: 50%;
}
.box2{
margin-top:100px;
width: 200px;
height: 120px;
background: #efebe9;
border: 5px solid #B4A078;
outline: #B4A078 solid 3px;
outline-offset: -10px;
margin-bottom: 20px;;
}
.box3{
margin-bottom: 10px;
width: 100px;
height: 50px;
border-radius: 100px 100px 0 0;
background: #000;
}
.box3-1{
width: 100px;
height: 50px;
border-radius: 40px 0 40px 0;
background: #000;
}
.box3-2{
width: 100px;
height: 100px;
border-radius: 100px 0 100px 0;
background: #000;
}
.box4 {
width: 100%;
padding: 80px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.box4 .progress-outer {
width: 60%;
height: 12px;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.box4 .progress-enter {
height: inherit;
background: rgba(180, 160, 120, .2);
}
.box4 .progress-bg {
width: 60%;
height: inherit;
border-radius: 6px;
background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%, #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
background-size: 16px 16px;
animation: panoramic 20s linear infinite;
}
@keyframes panoramic {
to {
background-position: 200% 0;
}
}
.box5 {
width: 289px; height: 289px;
margin: 80px auto;
font-size: 12px;
}
.box5 svg {
overflow: visible;
animation: circular-text-rotate 5s linear paused infinite;
}
.box5 svg:hover {
animation-play-state: running;
}
.box5 path {
fill: none;
}
.box5 text {
fill: #b4a078;
}
@keyframes circular-text-rotate {
to {
transform: rotate(1turn);
}
}
.box6 {
width: 100%; height: 529px;
display: flex;
flex-direction: column;
align-items: center;
}
.box6 .path {
width: 300px; height: 300px;
border-radius: 50%;
margin: 100px auto;
position: relative;
display: flex;
border: 1px solid #b4a078;
}
.box6 .logo {
width: 52px;
height: 52px;
margin: auto;
background: #000;
}
.box6 .avatar {
width: 50px;
position: absolute;
top: 124px; left: 124px;
animation: circular-smooth-spin 7.5s infinite linear;
animation-play-state: running;
}
.box6 .avatar > span {
font-weight: 500;
position: absolute;
white-space: nowrap;
top: -50%; left: 50%;
padding: 3px 12px;
opacity: 0;
transform: scale(0);
transition: opacity, transform .8s;
transform-origin: 0 bottom;
}
.box6 .avatar > div {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
background: #000;
}
.box6 .path:hover .avatar {
animation-play-state: paused;
}
.box6 .path:hover .avatar > span {
opacity: 1;
transform: scale(1);
transition: opacity, transform .8s;
}
.box6 .avatar:nth-of-type(2){
animation-delay: -1.5s;
}
.box6 .avatar:nth-of-type(3){
animation-delay: -3s;
}
.box6 .avatar:nth-of-type(4){
animation-delay: -4.5s;
}
.box6 .avatar:nth-of-type(5){
animation-delay: -6s;
}
@keyframes circular-smooth-spin {
from {
transform: rotate(0turn) translateY(-124px) rotate(1turn)
}
to {
opacity: 1;
transform: rotate(1turn) translateY(-124px) rotate(0turn)
}
}
</style>
</head>
<body>
<div class="box0"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box3-1"></div>
<div class="box3-2"></div>
<div class="box4">
<div class="progress-outer">
<div class="progress-enter">
<div class="progress-bg"></div>
</div>
<!-- <span>60%</span> -->
</div>
</div>
<div class="box5">
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" />
<text>
<textPath xlink:href="#circle">
You-need-to-know-css-tricks-You-need-to-know-css-tricks-You-
</textPath>
</text>
</svg>
</div>
<div class="box6">
<div class="path">
<div class="logo"></div>
<div class="avatar">
<span>Evan You</span>
<div></div>
</div>
<div class="avatar">
<span>Damian Dulisz</span>
<div></div>
</div>
<div class="avatar">
<span>defcc</span>
<div></div>
</div>
<div class="avatar">
<span>Edd Yerburgh</span>
<div></div>
</div>
<div class="avatar">
<span>Sarah Drasner</span>
<div></div>
</div>
</div>
</div>
</body>
</html>
标签：css3,效果,100px,奇特,height,width,background,box6,border 来源： https://www.cnblogs.com/anans/p/15941384.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。