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 ...
随机推荐
- a[i]==i[a]==*(i+a)==*(a+i)
在C语言中,如果我们要访问一个数组的某个下标对应的元素,通常的写法是a[i].但从汇编的角度看,写成i[a]一点问题都没有. 下面通过代码给出证明. o foo1.c int main(int arg ...
- GIT 恢复单个文件到历史版本
首先查看该文件的历史版本信息:git log <file> 恢复该文件到某个历史版本:git reset 版本号 <file> 检出改文件到工作区:git checkout - ...
- Codeforces 156B Suspects——————【逻辑判断】
Suspects Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submit St ...
- 如何使用 MySQL EntityFramework 组件处理 MYSQL PaaS DB
MySQL Database on Azure 是 Azure 平台上推出的 MySQL 云数据库服务,通过全面兼容 MySQL 协议,为用户提供了一个全托管的性能稳定.可快速部署.高可用.高安全性的 ...
- JavaScript事件流--事件冒泡、目标与事件捕获
1.事件冒泡 微软提出了名为事件冒泡的事件流.事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面.也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象. 因 ...
- ECMAScript5提供了9个新数组方法：遍历、映射、过滤、检测、简化、和搜索数组
大多数方法的第一个参数接收一个函数,并且对数组的每个元素调用一次该函数.如果是稀疏数组,对不存在的元素不调用传递的函数.在大多数情况下,调用提供的函数使用三个参数:数组元素,元素的索引,数组本身,通常 ...
- js权威指南学习笔记（二）表达式与运算符
1.数组初始化表达式 数组直接量中的列表逗号之间的元素可以省略,这时省略的空位会填充undefined.如: 2 2 1 var arr = [1,,,,,6]; 2 ...
- 如何解决织梦DedeCMS后台模块管理列表不显示
在使用织梦Dedecms的过程中,我们会遇到模块管理列表无法显示的问题,造成织梦模块管理列表无法显示的原因,可能有很多种,现小编总结了遇到过的一种方法仅供参考. 方法步骤一: 由于/data/modu ...
- Office - InfoPath
1. 移除隐藏空间后剩余的空白: http://social.technet.microsoft.com/Forums/sharepoint/zh-TW/3dea3014-f808-428b-b283 ...
- 面试准备之一Python
基本数据类型 函数 模块与包 面向对象 网络编程 垃圾回收机制 G 并发编程