Css样式动画
来源:互联网 发布:中信网络 财新网 编辑:程序博客网 时间:2024/05/22 06:43
//大海案例
<html>
<head>
<meta charset="utf-8" />
<title>大波浪</title>
<style>
body{
height: 100%;
background:#0EA9B1;
}
.sun{
width: 100px;
height: 100px;
background: #fff;
border-radius: 50px;
position: absolute;
left: 200px;
top: 200px;
}
.sun::before,.sun::after{
content: '';
display: block;
width:100px;
height: 100px;
background: #FFF;
border-radius: 50px;
position: absolute;
}
.sun::before {
animation: ss 1s infinite linear;
}
.sun::after{
animation: ss 1s infinite linear ;
}
@keyframes ss{
0%{
}
100%{
transform: scale(2);
opacity: 0;
}
}
.d1{
position: absolute;
left: 0;
width: 100%;
bottom: 20px;
height: 220px;
background-image: url(img/1.png);
animation: aa 1s linear infinite;
}
.d2{
position: absolute;
left: 0;
width: 100%;
bottom: 0px;
height: 250px;
background-image: url(img/2.png);
animation: aa 1s infinite linear;
}
@keyframes aa{
50%{bottom: -20px;}
}
</style>
</head>
<body>
<section>
<div class="sun"></div>
<div class="d1">
</div>
<div class="d2">
</div>
</section>
</body>
</html>
//银河系案例
<html>
<head>
<meta charset="UTF-8">
<title>银河系</title>
<style type="text/css">
body{
background: #000;
}
.sun{
width: 100px;
height: 100px;
background: orange;
border-radius: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
box-shadow: 0 0 30px 2px yellow;
}
.earch{
width: 300px;
height: 300px;
border-radius: 50%;
border: 1px solid white;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
.earch::after{
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
left: 0%;
top: 50%;
margin-left: -15px;
margin-top: -15px;
background: blue;
content: '';
}
.moon{
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
position: absolute;
left: -25px;
top: 50%;
margin-left: -5px;
margin-top: -5px;
animation: zhuan 5s infinite linear;
transform-origin: 30px 5px;
}
.mars{
width: 400px;
height: 400px;
border-radius: 50%;
border: 1px solid white;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
animation: zhuan 10s infinite linear;
}
.mars::after{
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
left: 30%;
top: 8%;
margin-left: -25px;
margin-top: -25px;
background: red;
content: '';
}
.venus{
width: 500px;
height: 500px;
border-radius: 50%;
border: 1px solid white;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
animation: zhuan 8s infinite linear;
}
.venus::after{
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 101%;
margin-left: -25px;
margin-top: -25px;
background: olive;
content: '';
}
@keyframes zhuan{
0%{}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="sun"></div>
<div class="earch">
<div class="moon"></div>
</div>
<div class="mars"></div>
<div class="venus"></div>
</body>
</html>
- css样式-动画效果
- CSS基础动画样式
- CSS样式,布局,动画
- Css样式动画
- animate.css动画样式详解
- 使用css动画样式库
- css动画跳到锚点js代码、小手样式
- CSS---10个样式各异的CSS3 Loading加载动画
- CSS样式
- CSS样式
- css样式
- CSS样式
- CSS样式
- Css样式
- CSS样式
- CSS 样式
- css样式
- CSS样式
- opencv morphologyEX 图像数学形态学
- 正则表达式-基础
- 进程和线程的区别和联系
- C语言:文件操作之单词统计
- 3.3(4)
- Css样式动画
- JavaScript cookie操作实现点赞功能
- C语言:点餐系统
- qt4笔记
- 【云星数据---Apache Flink实战系列(精品版)】:Apache Flink实战基础003--flink特性:流处理,批处理珠联璧合
- C语言:成绩最高学号
- 撩汉就撩程序员
- VS中可执行文件不能单独运行
- java基础-BigInteger的使用