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 ...
随机推荐
- Tomcat与Nginx的整合
Tomcat与Nginx的整合 环境 操作系统:ubuntu 14.04.4 LTS 安装Nginx 有两种方式,一种是使用apt-get命令来安装二进制版本,另外一种是下载源码后自己编译. 二进制安 ...
- JVM的内存分配和回收策略
对象的Class加载 虚拟机遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初始化过.如果没有,那必须先执行相应 ...
- Android Studio修改程序包名
我也是在网上看到的,并且这个方法只能这么修改:cn.example.xxx修改为cn.example.yyy ,修改到根目录下... refactor---rename修改 然后clean,buil ...
- Sed - An Introduction and Tutorial by Bruce Barnett
http://www.grymoire.com/unix/sed.html Quick Links - NEW Sed Commands : label # comment {....} Block ...
- python-爬虫之requests模块介绍（登陆github）
介绍 使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模块的api更加便捷(本质就是封装了urllib3) 注意 requests库发送请求将网页内容下载下来以后 ...
- Codeforces 949E Binary Cards
Description 给出一个长度为 \(n\) 的数组,求使得用最少数量的 \(2^k\) 或 \(-2^k\) 的数,使得数组中的每一个元素都可以被你选出的 \(2\) 的次幂表示 题面 Sol ...
- Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border
上一篇,介绍了Canvas布局控件在Blend中的使用.本篇继续介绍布局控件StackPanel,ScrollViewer和Border. 相对于Grid和Canvas来说,StackPanel,Sc ...
- Spring mvc 中 DispatcherServlet 的学习和理解
上图表示当客户请求来到时,spring架构作出响应的流程,可以从图中看到看到请求分发的中心就是 DispatcherServlet 类,DispatcherServlet的任务是将请求发送给Sprin ...
- [android] 天气app布局练习（四）
主要练习一下获取网络数据和解析xml MainActivity.java package com.example.weatherreport; import java.io.UnsupportedEn ...
- MongoDB 学习（三）MongoDB 和 Spring 整合（Maven）
一.MongoDB 和 Spring 整合(Maven) 1.相关 jar 包准备 2.用 Maven 创建项目,pom.xml 文件 <project xmlns="http://m ...