CSS3——CSS3动画(animation)及应用

流楚丶格念 2021-07-20 03:58:59
html css CSS3


 

 

动画(CSS3) animation

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

语法格式:

animation:动画名称 花费时间 运动曲线 何时开始
播放次数 是否反方向;

关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意r

@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count:infinite; 无限循环播放 默认是1次
animation-direction: alternate 动画应该轮流反向播放 默认是 normal
animation-play-state:paused; 暂停动画"
案例1:太阳系的运作

在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>宇宙动画</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
/*margin: 50px;*/
width: 100%;
height: 100%;
background: url(img/bg.jpg) no-repeat;
background-size: cover;
position: relative;
}
.box {
width: 600px;
height: 600px;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -300px;
top: 50%;
margin-top: -300px;
}
.sun {
position: absolute;
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
margin-left: -25px;
left: 50%;
margin-top: -25px;
top: 50%;
box-shadow: 0px 0px 100px orange; /*周围日光的效果*/
}
.lin1 {
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -50px;
margin-top: -50px;
animation: rotate 10s linear infinite;
}
.lin1:after {
content: "";
width: 20px;
height: 20px;
display: block;
border-radius: 50%;
background-color: orange;
position: absolute;
left: -2px;
top: 10px;
}
.public {
position: absolute;
left: 50%;
top: 50%;
}
@keyframes rotate {
from {
transform: rotateZ(0deg);
/*transform: rotateX(0deg);*/
}
to {
transform: rotateZ(360deg);
/*transform: rotateX(360deg);*/
}
}
.lin2 {
width: 150px;
height: 150px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -75px;
margin-top: -75px;
animation: rotate /*rotateX*/ 5s linear infinite;
}
.lin2:after {
content: "";
width: 10px;
height: 10px;
background-color: blue;
display: block;
border-radius: 50%;
position: absolute;
left: 25px;
top: 10px;
}
.lin3 {
width: 230px;
height: 230px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -115px;
margin-top: -115px;
animation: rotate 10s linear infinite;
}
.lin3 span {
width: 20px;
height: 20px;
display: block;
background-color: green;
border-radius: 50%;
position: absolute;
left: 50px;
animation: rotate 5s linear infinite;
}
.lin3 span b {
width: 10px;
height: 10px;
background-color: pink;
display: block;
border-radius: 50%;
position: absolute;
left: 25px;
}
.lin4 {
width: 332px;
height: 332px;
border: 1px solid #ccc;
background: url(img/asteroids_meteorids.png) no-repeat;
border-radius: 50%;
margin-left: -161px;
margin-top: -161px;
animation: rotate 15s linear infinite;
}
.lin4:after {
content: "";
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 120px;
}
.line5 {
width: 450px;
height: 450px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -220px;
margin-top: -220px;
animation: rotate 10s linear infinite;
}
.line5 span {
width: 30px;
height: 30px;
background-color: blue;
border-radius: 50%;
display: block;
position: absolute;
left: 120px;
}
.line5 span b {
display: block;
width: 40px;
height: 40px;
border: 5px solid #ccc;
border-radius: 50%;
transform: skew(45deg);
position: absolute;
left: -6px;
top: -10px;
}
</style>
</head>
<body>
<div class="box">
<div class="sun"></div>
<div class="lin1 public"></div>
<div class="lin2 public"></div>
<div class="lin3 public">
<span>
<b></b>
</span>
</div>
<div class="lin4 public"></div>
<div class="line5 public">
<span>
<b></b>
</span>
</div>
</div>
</body>
</html>
案例2:图片播放

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 100%;
position: relative;
/*overflow: hidden;*/
}
.box>div{
width: 100%;
height: 100%;
position: absolute;
background-size: cover;
}
.two {
display: block;
height: 100%;
background: url(img/4.jpg) no-repeat bottom;
}
.three {
display: block;
height:100%;
background: url(img/1.jpg) no-repeat top;
}
.one {
display: block;
height: 100%;
background: url(img/3.jpg) no-repeat top;
}
.box .numbers {
width: 300px;
height: 100px;
left: 50%;
margin-left: -150px;
bottom: 20px;
z-index: 4;
}
.box .numbers a {
width: 90px;
height: 90px;
display: block;
line-height: 90px;
text-align: center;
text-decoration: none;
color: #000;
background-color: white;
border-radius: 50%;
float: left;
margin: 0 5px;
}
.one:target {
animation: rotate 1s linear;
z-index: 1;
}
.two:target {
animation: rotate 1s linear;
z-index: 1;
}
.three:target {
animation: scale 1s linear;
z-index: 1;
}
@keyframes rotate {
from {
transform: scale(0) rotateZ(0deg);
}
to {
transform: scale(1) rotateZ(360deg);
}
}
@keyframes scale {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="box">
<div class="two" id="two"></div>
<div class="three" id="three"></div>
<div class="one" id="one"></div>
<div class="numbers">
<a href="#two">1</a>
<a href="#three">2</a>
<a href="#one">3</a>
</div>
</div>
</body>
</html>
案例3:钟表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.colock {
width: 400px;
height: 400px;
border: 1px solid #000;
border-radius: 50%;
margin: 50px auto;
position: relative;
}
.colock>div {
position: absolute;
}
.line {
width: 2px;
height: 100%;
background-color: #ccc;
margin-left: -1px;
left: 50%;
}
.line:first-child{
}
.line:nth-child(2){
transform: rotateZ(30deg);
}
.line:nth-child(3){
transform: rotateZ(60deg);
}
.line:nth-child(4){
transform: rotateZ(90deg);
}
.line:nth-child(5){
transform: rotateZ(120deg);
}
.line:nth-child(6){
transform: rotateZ(150deg);
}
.cover {
width: 380px;
height: 380px;
background-color: #fff;
border-radius: 50%;
left: 50%;
top: 50%;
margin-top: -190px;
margin-left: -190px;
}
.h {
width: 6px;
height: 130px;
background-color: #000;
margin-left: -3px;
left: 50%;
top: 60px;
transform-origin:bottom;
animation: rotate 43200s steps(60) infinite;
}
.m {
width: 4px;
height: 150px;
background-color: green;
margin-left: -2px;
left: 50%;
top: 40px;
transform-origin:bottom;
animation: rotate 3600s steps(60) infinite;
}
.s {
width: 2px;
height: 160px;
background-color: pink;
margin-left: -1px;
left: 50%;
top: 30px;
transform-origin:bottom;
animation: rotate 60s steps(60) infinite;
}
.dotted {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000;
left: 50%;
top: 50%;
margin-left: -10px;
margin-top: -10px;
}
@keyframes rotate {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="colock">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="cover"></div>
<div class="h"></div>
<div class="m"></div>
<div class="s"></div>
<div class="dotted"></div>
</div>
</body>
</html>

 

版权声明
本文为[流楚丶格念]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_15265965/2892248

  1. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:disabled | :enabled 伪类
  2. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类
  3. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-of-type 伪类
  4. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
  5. 微信小程序界面设计小程序中的WXSS(css)选择器课程-派生选择器
  6. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
  7. 微信小程序界面设计小程序中的WXSS(css)选择器课程-选择器的分组
  8. HTML基础-简介
  9. ASP实战之HTML入门-黄菊华-专题视频课程
  10. 微信小程序WxParse解析富文本(html)代码在线视频教程
  11. HTML语言基础.上
  12. HTML语言基础.下
  13. HTML!
  14. 【网页前端设计Front end】HTML语言基础.上(看不懂你来打我)
  15. 【网页前端设计Front end】HTML语言基础.下(看不懂你来打我)
  16. 【django轻量级框架】HTML上传文件拦截到本地
  17. HTML5基础知识实战演练教程-黄菊华-专题视频课程
  18. 基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(1)商城首页
  19. 基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(2)商城分类
  20. 微信小程序框架weui的基础使用
  21. 一文入魂!彻底巩固你的Nginx知识体系!
  22. Nginx是什么?有哪些核心技术?
  23. Nginx配置如何一键生成
  24. 就这一次把网路的几种IO模型以及Nginx基本原理彻底搞清楚
  25. 优质高效,阿里性能怪兽宝典(Redis+Nginx)限时开源,手慢无!
  26. Nginx的配置文件nginx.conf配置解释
  27. 安装的nginx 地址重写
  28. nginx防盗链
  29. nginx动静分离
  30. nginx优化
  31. Nginx虚拟主机
  32. Nginx 反向代理
  33. IDEA实现热部署前端界面(Tomcat、IDEA)
  34. JavaScript中call与apply的区别
  35. JavaScript代码无分号问题
  36. 在Chrome浏览器中禁用JavaScript
  37. JavaScript为内置对象添加原型方法
  38. JavaScript原型数据共享与方法共享探究
  39. JavaScript把局部变量变成全局变量
  40. JavaScript函数自调用
  41. JavaScript继承的几种方法
  42. 逆向递归看JavaScript原型
  43. JavaScript函数进阶
  44. JavaScript中的call、apply、bind
  45. JavaScript高阶函数——函数当参数、返回值、其他成员
  46. JavaScript沙箱模式
  47. JavaScript闭包——点赞小案例
  48. JavaScript函数闭包
  49. JavaScript正则验证密码强弱度
  50. JavaScript表单信息验证案例——使用正则
  51. JavaScript伪数组和数组
  52. CSS代码书写规范
  53. jQuery——jQuery基本概念
  54. jQuery——jQuery选择器 ※
  55. jQuery——jQuery的CSS,class,属性操作及案例应用
  56. jQuery动画代码详解
  57. jQuery节点操作、弹幕案例
  58. jQuery事件机制
  59. jQuery链式编程,each方法,多库共存
  60. New open source project in July: can you keep up with the speed of building wheels at the front end?