css3实现 两个点之间有一条线，循环运动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="1.css"/>
</head>
<body>
<div class="outer">
<div class="target target1">
<div class="point point-dot"></div>
<div class="point point-10"></div>
<div class="point point-40"></div>
<div class="line"></div>
</div>
<div class="target target2">
<div class="point point-dot"></div>
<div class="point point-10"></div>
<div class="point point-40"></div>
<div class="line"></div>
</div>
<div class="target target3">
<div class="point point-dot"></div>
<div class="point point-10"></div>
<div class="point point-40"></div>
<div class="line"></div>
</div>
<div class="target target4">
<div class="point point-dot"></div>
<div class="point point-10"></div>
<div class="point point-40"></div>
<div class="line"></div>
</div>
<div class="target target5">
<div class="point point-dot"></div>
<div class="point point-10"></div>
<div class="point point-40"></div>
<div class="line"></div>
</div>
</div> <script>
/* function angle(x01,y01,x02,y02){//计算角度
var diff_x = x02 - x01,
diff_y = y02 - y01;
//返回角度,不是弧度
var t=360*Math.atan(diff_y/diff_x)/(2*Math.PI);
console.log(t);
}
function distance(x01,y01,x02,y02) {//计算两点之间直线距离
var x1 = eval(x01);
var y1 = eval(y01);
var x2 = eval(x02);
var y2 = eval(y02);
var xdiff = x2 - x1;
var ydiff = y2 - y1;
var distance = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
console.log(distance);
}
angle(100,300,380,100);
distance(100,300,380,100)*/
function getNum(x01,y01,x02,y02){//计算角度
var x1 = eval(x01),
y1 = eval(y01),
x2 = eval(x02),
y2 = eval(y02),
xdiff = x2 - x1,
ydiff = y2 - y1;
//返回角度,不是弧度
var t=360*Math.atan(ydiff/xdiff)/(2*Math.PI);
console.log(t);
var distance = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
console.log(distance);
}
getNum(100,300,380,100);
getNum(300,680,100,380);
</script>
</body>
</html>
*{
margin:;
padding:;
}
.outer{
position:relative;
width:800px;
height:500px;
margin:0 auto;
}
.target{
position:absolute;
width:60px;
height:60px;
border-radius:50%;
}
.target1{
top:300px;
left:100px;
}
.target2{
top:100px;
left:380px;
}
.target3{
top:300px;
left:680px;
}
.target4{
top:500px;
left:30%;
}
.target5{
top:500px;
right:30%;
}
.target .point {
position: absolute;
top:;
left:;
right:;
bottom:;
width: 10px;
height: 10px;
margin: auto;
-webkit-border-radius: 50%;
-webkit-background-clip: padding-box;
-moz-border-radius: 50%;
-moz-background-clip: padding;
border-radius: 50%;
background-clip: padding-box;
background: transparent;
}
.target .point-dot {
background-color: #6AD7E9;
}
.target1 .point-dot{
background:green;
border: 1px solid green;
}
.target2 .point-dot{
background:#208adb;
border: 1px solid #208adb;
}
.target3 .point-dot{
background:#00ff00;
border: 1px solid #00ff00;
}
.target4 .point-dot{
background:yellowgreen;
border: 1px solid yellowgreen;
}
.target5 .point-dot{
background:#c01110;
border: 1px solid #c01110;
}
.target1 .point-10:after,.target1 .point-40:after,.target1 .point-80:after{
border: 4px solid green;
}
.target2 .point-10:after,.target2 .point-40:after,.target2 .point-80:after{
border: 2px solid #208adb;
}
.target3 .point-10:after,.target3 .point-40:after,.target3 .point-80:after{
border: 2px solid #00ff00;
}
.target4 .point-10:after,.target4 .point-40:after,.target4 .point-80:after{
border: 2px solid yellowgreen;
}
.target5 .point-10:after,.target5 .point-40:after,.target5 .point-80:after{
border: 2px solid #c01110;
}
.target .point-10 {
width: 100%;
height: 100%;
}
.target .point-10:after {
content: '';
display: block;
position: absolute;
top:;
right:;
bottom:;
left:;
border-radius: 50%;
opacity:;
-webkit-animation: ripple 4500ms ease-out 225ms infinite;
-moz-animation: ripple 4500ms ease-out 225ms infinite;
-o-animation: ripple 4500ms ease-out 225ms infinite;
animation: ripple 4500ms ease-out 225ms infinite;
}
.target .point-40 {
width: 100%;
height: 100%;
}
.target .point-40:after {
content: '';
display: block;
position: absolute;
top:;
right:;
bottom:;
left:;
border-radius: 50%;
opacity:;
-webkit-animation: ripple 4500ms ease-out 900ms infinite;
-moz-animation: ripple 4500ms ease-out 900ms infinite;
-o-animation: ripple 4500ms ease-out 900ms infinite;
animation: ripple 4500ms ease-out 900ms infinite;
}
.target .point-80 {
width: 100%;
height: 100%;
}
.target .point-80:after {
content: '';
display: block;
position: absolute;
top:;
right:;
bottom:;
left:;
border-radius: 50%;
opacity:;
-webkit-animation: ripple 4500ms ease-out 1800ms infinite;
-moz-animation: ripple 4500ms ease-out 1800ms infinite;
-o-animation: ripple 4500ms ease-out 1800ms infinite;
animation: ripple 4500ms ease-out 1800ms infinite;
}
@-webkit-keyframes ripple {
0% {
opacity:;
-webkit-transform: scale(0.1, 0.1);
}
5% {
opacity:;
}
100% {
opacity:;
-webkit-transform: scale(1)
}
}
@-moz-keyframes ripple {
0% {
opacity:;
-moz-transform: scale(0.1, 0.1);
}
5% {
opacity:;
}
100% {
opacity:;
-moz-transform: scale(1)
}
}
@-o-keyframes ripple {
0% {
opacity:;
-o-transform: scale(0.1, 0.1);
}
5% {
opacity:;
}
100% {
opacity:;
-o-transform: scale(1)
}
}
@keyframes ripple {
0% {
opacity:;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
}
5% {
opacity:;
}
100% {
opacity:;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.target .line{
position:absolute;
width:60px;
height:;
border-top: 1px solid #fff;
box-shadow: 0 0 5px #000;
top:50%;
margin-top:-0.5px;
left:50%;
opacity:;
filter:alpha(opacity=0);
}
.target1 .line{
left: 50%;
top: 30px;
transform: rotate(0deg);
}
.target2 .line{
left: 10px;
top: 60px;
transform: rotate(74deg);
}
.target3 .line{
left: -30px;
top: 4px;
transform: rotate(45deg);
}
.target4 .line{
left: 10px;
top: 0px;
transform: rotate(110deg);
}
.target5 .line{
left: -27px;
top: 16px;
transform: rotate(28deg);
}
.target1 .line{
animation:f1 1s linear 0s infinite alternate;
}
.target3 .line{
animation:f3 1s linear 0s infinite alternate;
}
@keyframes f1{
0%{
opacity:;
transform: translateX(0px);
}
50%{
transform: translateX(244px);
opacity:;
}
100%{
transform: translateX(498px);
opacity:;
}
}
@keyframes f3{
0%{
opacity:;
filter:alpha(opacity=0);
transform: rotate(32deg) translate(0px);
}
50%{
transform: rotate(32deg) translate(-140px);
opacity:;
filter:alpha(opacity=100);
}
100%{
transform: rotate(32deg) translate(-280px);
opacity:;
filter:alpha(opacity=0);
}
}
1.css
css3实现 两个点之间有一条线，循环运动的更多相关文章
- [css3]CSS3选择器:nth-child和:nth-of-type之间的差异
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...
- CSS3选择器:nth-child和:nth-of-type之间的差异
CSS3选择器:nth-child和:nth-of-type之间的差异 这篇文章发布于 2011年06月21日,星期二,23:04,归类于 css相关. 阅读 57546 次, 今日 143 次 by ...
- CSS3选择器:nth-child和:nth-of-type之间的差异——张鑫旭
一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使 ...
- DOM的小练习，两个表格之间数据的移动
本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head> <meta http-equiv="Content-Type" ...
- Java 获取两个日期之间的日期
1.前期需求,两个日期,我们叫他startDate和endDate,然后获取到两个日期之间的日期 /** * 获取两个日期之间的日期 * @param start 开始日期 * @param end ...
- sql返回两个日期之间的日期_函数实现
-- Description:返回两段日期之间的所有日期 <Description,,>-- ============================================ ...
- 两个APP之间怎么调用《IT蓝豹》
两个app之间怎么调用? (1):通过显示Intent 启动 首先:配置好B app 的action,即AndroidManifest.xml中声明 <intent-filter> ...
- Android两个子线程之间通信
Android中,相信主线程和子线程之间的通信大家都不陌生了吧.在一次面试经历中被问到了两个子线程之间是如何进行通信的.哎呦!这可蒙住我了.后来回家研究了下,分享给大家. 其实android中线程通信 ...
- Oracle 两个表之间更新的实现
Oracle 两个表之间更新的实现 来源:互联网 作者:佚名 时间:2014-04-23 21:39 Oracle中,如果跨两个表进行更新,Sql语句写成这样,Oracle 不会通过.查了资料,S ...
随机推荐
- bzoj 3064: Tyvj 1518 CPU监控
Description 1.区间加 \(z\) 2.区间覆盖为 \(z\) 3.查询区间最大值 4.查询区间历史最大值 Solution 线段树维护历史最值,思想大致是维护标记出现过的最大值 考虑这种 ...
- 深入理解JavaScript系列（46）：代码复用模式（推荐篇）
介绍 本文介绍的四种代码复用模式都是最佳实践,推荐大家在编程的过程中使用. 模式1:原型继承 原型继承是让父对象作为子对象的原型,从而达到继承的目的: function object(o) { fun ...
- Js的小技巧
感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...
- web.xml配置文件中async-supported报错解决
项目中配置spring时async-supported报错: 是因为<async-supported>true</async-supported>是web.xml 3.0的新特 ...
- 13. Roman to Integer 罗马数字转化为阿拉伯数字（indexOf ()和 toCharArray()）easy
Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 ...
- 4、springboot之全局异常捕获
1.新建一个springboot项目 添加一个全局异常的类 import org.springframework.web.bind.annotation.ControllerAdvice; impor ...
- python2文件转换为exe可执行文件
windows下py文件的运行需要安装python,如果是exe文件就可以直接运行 1. 直接在命令行用pip安装 pyinstaller pip install pyinstaller 2 在命令行 ...
- csharp: QR Code Barcode
/// <summary> /// /// </summary> /// <param name="sender"></param> ...
- Java jdbc入门
1 jdbc入门 1.1 之前操作数据 1)通过mysql的客户端工具,登录数据库服务器 (mysql -u root -p 密码) 2)编写sql语句 3)发送sql语句到数据库服务器执行 1.2 ...
- 在URL里传入数组到HTML 里。
需求 静态页面根据URL输入,动态显示图表满足如下两个条件. 1. 隐藏指定的行 2. 设定初始显示的Check box 需要的部分被打勾 实现 1. 创建一个静态的页面, <table id= ...