今天学习css一些动画效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>银河系</title>
<link rel="stylesheet" type="text/css" href="css/xuanzhuan.css">
</head>
<body>
<div id="p">
<div id="o">
<div id="i">
<div id="sun">太阳
<div id="earth">地球
</div>
</div>
</div>
</div>
</div>
</body>
</html>
*{
margin:0px;
padding:0px;
}
body{
color:#ccc;
background:#71BADD;
}
#p{
margin:100px auto;
width:500px;
height:500px;
border:2px dashed red;
border-radius:250px;
display:flex;
justify-content:center;
align-items:center;
}
/*
#i{
margin:50px auto;
width:300px;
height:300px;
border:2px dashed #FF34B3;
border-radius:150px;
}
150px 250px 150px
#o{
margin:100px auto;
width:300px;
height:300px;
border:2px dashed blue;
border-radius:150px;
}
*/
#sun{
line-height:100px;
text-align:center;
margin:230px auto;
width:100px;
height:100px;
border:2px solid #F6CC35;
border-radius:50px;
background-color:red;
animation: sunRotate 2s infinite;
}
@keyframes sunRotate{
0%{
transform:rotate(1turn);
}
}
#earth{
color:blue;
line-height:50px;
text-align:center;
width:50px;
height:50px;
border:2px solid #FF34B3;
border-radius:25px;
position:absolute;
top:280px;
left:calc(50% - 40px);
animation: earthRotate 2s infinite;
transform-origin:25px 25px;
}
/*
@keyframes earthRotate{
0%{
transform:rotate(1turn);
}
}
position:absolute;
*position:relative;
display:flex;
justify-content:center;
align-items:center;
*/
今天学习css一些动画效果的更多相关文章
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- CSS--使用Animate.css制作动画效果
一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
- 是谁,在敲打我窗-CSS雨滴动画效果
1.扯闲篇 是谁在敲打我窗 是谁在撩动琴弦 那一段被遗忘的时光 渐渐地回升出我心坎 是谁在敲打我窗 是谁在撩动琴弦 记忆中那欢乐的情景 慢慢地浮现在我的脑海 那缓缓飘落的小雨 不停地打在我 ...
- [CSS] Transitions动画效果(1)
Transitions动画效果(1) 源码 https://github.com/YouXianMing/CSS-Animations/tree/master/Transitions 效果 细节
- CSS基础学习-15.CSS3 动画效果
- ANDROID_MARS学习笔记_S02_010_Animation_动画效果
一.流程 1.把要实现动画的一系列图片复制到res/drawable文件夹 2.在此文件新建一个xml文件用来组织图片 3.在mainactivity中用imageView.setBackground ...
- css水波动画效果
代码来源:http://www.jq22.com/code1526 HTML: <div class="waves"></div> css: html, b ...
- CSS 循环动画效果。
@-moz-keyframes revolving{ 0{ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 25%{ ...
- 一个CSS+jQuery的放大缩小动画效果
日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...
随机推荐
- jquery easyui中的dialog拖动超出浏览器问题解决办法
juqery easyui当鼠标点着拖动超出浏览器后,就回不来了,拉不下的问题: //控制dialog超出浏览器回到原来的地方 var default_left; var default_top;// ...
- [iOS基础控件 - 6.10.2] PickerView 自定义row内容 国家选择Demo
A.需求 1.自定义一个UIView和xib,包含国家名和国旗显示 2.学习row的重用 B.实现步骤 1.准备plist文件和国旗图片 2.创建模型 // // Flag.h // Co ...
- UVaLive 7372 Excellence (水题,贪心)
题意:给定 n 个数,要求把其中两个分成一组,然后加和,问所有的都分好,最小数是几. 析:贪心策略,最大和是小的相加,就是最优的. 代码如下: #pragma comment(linker, &quo ...
- SCOI2016滚粗记
day0 又到了SCOI,照惯例赛前参加省选培训,住酒店但学校食堂很难吃. 省选培训被成七和南山的大爷虐翻,感觉进省队没什么戏,权当玩一玩吧. day1 早上醒的时候感觉脑袋很痛,想睡又睡不着,第二天 ...
- 字串数_hdu_1261(大数极致).java
字串数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...
- ElasticSearch中文分词(IK)
ElasticSearch常用的很受欢迎的是IK,这里稍微介绍下安装过程及测试过程. 1.ElasticSearch官方分词 自带的中文分词器很弱,可以体检下: [zsz@VS-zsz ~]$ c ...
- usr/bin/ld: cannot find 错误解决方法
参考:http://blog.siyebocai.cn/20100324_5p424qs7.html 通常在软件编译时出现的usr/bin/ld: cannot find -lxxx的错误,主要的原因 ...
- cdoj 1256 昊昊爱运动 预处理/前缀和
昊昊爱运动 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1256 Descr ...
- Codeforces Gym 100650D Queens, Knights and Pawns 暴力
Problem D: Queens, Knights and PawnsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu ...
- delphi 添加节点
//在选中的节点中上添加1个节点 procedure TForm1.Button1Click(Sender: TObject); begin with TreeView1 do b ...