我正在像这样使用 html CSS 和 jquery 创建推荐 slider
我尝试使用 html css 波纹管是代码和屏幕截图
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%;
}
使用 HTML 的屏幕截图:-
现在如何将圆放在外圆线上并使它们具有动画效果？ 任何建议或代码都会对我有很大帮助
最佳答案
您可以使用 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);
}
}
关于javascript - 如何在外圆边框上用小圆圈围绕圆形图像绘制圆圈？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43757723/