集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都前端培训课程-CSS动画实例:旋转的叶片

发布者: 成都达内     浏览次数:     发布时间:2020-08-13 11:22:15

成都前端培训课程-CSS动画实例:旋转的叶片,在页面中放置一个类名为container的层作为容器,在该层中再定义一个名为shape的子层...

  在页面中放置一个类名为container的层作为容器,在该层中再定义一个名为shape的子层,HTML代码描述如下:

  div class="container">

  div class="shape">/div>

  /div>

  分别为container和shape定义CSS样式规则如下:

  .container

  {

  margin: 0 auto;

  width: 500px;

  height: 500px;

  position: relative;

  overflow: hidden;

  display: block;

  border: 4px solid rgba(255, 0, 0, 0.9);

  background:#d8d8d8;

  border-radius: 10%;

  }

  .shape

  {

  position: absolute;

  width: 80%;

  height: 45%;

  left: 10%;

  bottom:30%;

  border-radius: 100% 4px;

  opacity: 0.6;

  background: #fffe33;

  }

  在CSS样式的作用下,这2个层在浏览器中显示如图1所示,其中子层显示为1个淡黄色的叶片。

  成都前端培训课程-CSS动画实例:旋转的叶片

  图1 叶片

  若将图1所示的叶片每隔10°复制一次,复制17次后,18个叶片将围成一个圆周。为了得到这个圆周图案,在container层中定义18个名为shape的子层,并且为每个子层设置两个变量:表示该子层旋转角度的变量—rotation和表示该子层背景色的变量—color。

  编写的HTML文件内容如下。

  成都前端培训课程-CSS动画实例:旋转的叶片

  View Code

  在浏览器中打开包含这段HTML代码的html文件,可以看到如图2所示的图案。

  成都前端培训课程-CSS动画实例:旋转的叶片

  图2 18个叶片组成的图案

  现在让这18个叶片旋转起来,编写关键帧定义为:

  @keyframes rotate

  {

  from { transform: rotate(var(--rotation)); }

  to { transform: rotate(360deg); }

  }

  然后在.shape样式定义中加上一句“animation: rotate 3s alternate infinite ease-in-out;”,此时,18个叶片会旋转起来,收拢为1个叶片,之后又旋转展开为18个叶片,如图3所示。

  成都前端培训课程-CSS动画实例:旋转的叶片

  图3 旋转后收拢并展开的叶片

  由于定义关键帧@keyframes rotate中结束帧状态均是旋转360deg,因此18个叶片会收拢成1个叶片。若想让18个叶片各自旋转360°不收拢起来,可修改关键帧定义如下:

  @keyframes rotate

  {

  from { transform: rotate(var(--rotation)); }

  to { transform: rotate(calc(360deg + var(--rotation))); }

  }

  此时,在浏览器中呈现出如图4所示的效果。

  成都前端培训课程-CSS动画实例:旋转的叶片

  图4 旋转的叶片

  图4中叶片较密,且不是绕一个方向匀速旋转。为此,去掉9个偶数项子层(即旋转角度为-10deg、-30deg、…、-170deg的子层),且修改动画属性定义语句为:

  animation: rotate 3s linear infinite;

  则呈现出如图5所示的动画效果。

  成都前端培训课程-CSS动画实例:旋转的叶片

  图5 绕一个方向匀速旋转的叶片

  完整的HTML文件内容如下。

  成都前端培训课程-CSS动画实例:旋转的叶片

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56