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 ...
随机推荐
- vi 中插入当前时间
声明 笔者最近意外的发现 笔者的个人网站http://tiankonguse.com/ 的很多文章被其它网站转载,但是转载时未声明文章来源或参考自 http://tiankonguse.com/ 网站 ...
- spring 配置文件被加载两次
如下web.xml示例: 1.用spring的配置加载contextConfigLocation 2.配置spring-mvc的contextConfigLocation <servlet> ...
- grep常用命令总结与基础正则
grep 'str'用来选取含有str的行 参数: -v 反向选取 -n 显示行号 -c 计算查找到字符串的次数 -i 选取时不区分大小写 基础正则表达式符: [list] 从字符集合里选出任意一个字 ...
- Nuxt.js学习心得
一.官网 Nuxt.js - Universal Vue.js Applications https://nuxtjs.org/ 二.中文官网 Nuxt.js - Vue.js 通用应用框架 http ...
- MySql 双实例安装
1.官网下载压缩包 https://dev.mysql.com/downloads/mysql/ 2.解压到D盘 3.修改my.ini 文件 [mysql] # 设置mysql客户端默认字符集 def ...
- iOS之nib、xib及storyboard的区别及storyboard的加载过程
先讲述下nib, nib是3.0版本以前的产物,在终端下我们可以看到,NIB其实是一个文件夹,里面有可执行的二进制文件: 区分xib和storyboard的区别? 不同点: 1> 无论nib也好 ...
- Rabbit简单队列模式
1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/ ...
- javaEE Design Patter(1)初步了解23种常用设计模式
设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模式.享元模式. ...
- 6、springboot之根目录设置
访问的时候用
- FFmpeg的tutorial 学习
一.前言: 这是一个学习 FFmpeg 的 tutorial 系列. 这个是一个对初学者比较友好的FFmpeg学习教程,作者一步步引导我们实现了一个音视频同步的播放器. 参考链接: 原文地址: htt ...