[英]How to draw circle around round image with small circle on outer circle border?
我嘗試使用html css bellow是代碼和截圖
HTML代碼: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/testo.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Quicksand" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body class="testo-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h3>Complex Roy</h3>
<h5>Web Designer</h5>
<h6>Logictrix technologies is a good company. it's give batter products and services.Logictrix technologies is a good comp. it's give batter products and services.Logictrix technologies is a good company. it's give batter products and services. Logictrix technologies is a good company. it's give batter products and services.</h6>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="big-cir">
<center><img class="img-responsive img-circle" id="profile-image" height="250" width="250" src="image/client-1.png"></center>
</div>
</div>
</div>
</div>
</body>
</html>
CSS: -
.testo-body{
background-color:white;
}
.out-cir{
margin-top:-23%;
}
.profile{
margin-top:-20.5%;
margin-left:-31%;
}
.client{
background-color:#161e43;
color:white;
margin-top:20%;
}
.blue1{
}
.big-cir{
background-color:none;
height:300px;
width:300px;
border-radius:50%;
position:relative;
border-color:rgb(167,183,254);
border-style:solid;
border-width:2px;
margin-top:-23%;
}
.img-circle {
border-radius: 50%;
margin-top:7%;
}
現在我如何將圓圈放在外圓線上並使它們具有動畫效果? 任何建議或代碼都會對我有所幫助
您可以使用css中的before
和after
屬性在外部大圓上創建小圓圈。 我試過這個。 我能夠創建兩個圓圈。 希望這能幫助你找到正確的方法...(如果我能夠創建第三個或多個,我會更新)
HTML代碼:
<div class="testo-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h3>Complex Roy</h3>
<h5>Web Designer</h5>
<h6>Logictrix technologies is a good company. it's give batter products and services.Logictrix technologies is a good comp. it's give batter products and services.Logictrix technologies is a good company. it's give batter products and services. Logictrix technologies is a good company. it's give batter products and services.</h6>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client-image">
<center><img class="img-responsive img-circle" id="profile-image" height="250" width="250" src="http://placehold.it/500x500"></center>
<div class="big-cir">
<div class="small-cir"></div>
<div class="small-cir2"></div>
<div class="small-cir3"></div>
</div>
</div>
</div>
</div>
CSS代碼:
.testo-body {
background-color: white;
}
.out-cir {
margin-top: -23%;
}
.profile {
margin-top: -20.5%;
margin-left: -31%;
}
.client {
background-color: #161e43;
color: white;
margin-top: 10%;
}
.blue1 {}
.big-cir {
height: 300px;
width: 300px;
border-radius: 50%;
position: relative;
border-color: rgb(167, 183, 254);
border-style: solid;
border-width: 2px;
animation: dotmove cubic-bezier(1,0,0,1) 2s infinite;
}
.big-cir > .small-cir {
background-color: #000;
border-radius: 50%;
position: absolute;
border-color: rgb(167, 183, 254);
border-style: solid;
border-width: 2px;
padding: 5px;
content: "";
left: 90px; // you may need to change this
}
.big-cir > .small-cir2 {
background-color: #000;
border-radius: 50%;
position: absolute;
border-color: rgb(167, 183, 254);
border-style: solid;
border-width: 2px;
padding: 5px;
content: "";
left: 290px;
top: 130px;
}
.big-cir > .small-cir3 {
background-color: #000;
border-radius: 50%;
position: absolute;
border-color: rgb(167, 183, 254);
border-style: solid;
border-width: 2px;
padding: 5px;
content: "";
left: 150px;
top: 290px;
}
.img-circle {
margin: 25px;
position: absolute;
}
.client-image {
margin-top: -230px;
margin-left: 10px;
}
@keyframes dotmove {
from {
transform: rotate(90deg);
}
to {
transform: rotate(0deg);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.