aTeacher - 博客园

CSS动画实例：圆的涟漪扩散

摘要：设页面中有<div class="circle "></div>，定义.circle的样式规则绘制一个半径为75px，边框厚度为4px的圆，再定义关键帧，使得圆从不可见到可见，再到放大后又不可见。编写的HTML文件如下。 <!DOCTYPE html> <html> <head> <title>圆阅读全文

posted @ 2020-08-24 05:16 aTeacher 阅读(3883) 评论(0) 推荐(0) 编辑

CSS动画实例：行星和卫星

摘要：设页面中有<div class=" planet "></div>，用来绘制一个行星和卫星图形。这个图形包括三部分：行星、卫星和卫星旋转的轨道。定义. planet的样式规则如下： .planet { position:absolute; top:80px; left:80px; height:10 阅读全文

posted @ 2020-08-23 11:46 aTeacher 阅读(747) 评论(0) 推荐(0) 编辑

CSS动画实例：小圆球的海洋

摘要： CSS背景属性用于定义HTML元素的背景，在CSS提供的背景属性中， background-image：指定要使用的一个或多个背景图像； background-color：指定要使用的背景颜色； background-position：指定背景图像的位置； background-size：指定背景图阅读全文

posted @ 2020-08-23 05:21 aTeacher 阅读(614) 评论(0) 推荐(0) 编辑

CSS图形基础：纯CSS绘制图形

摘要：为了在页面中利用CSS3绘制图形，在页面中定义 <div class="container"> <div class="shape"></div> </div> 其中，container作为显示图形的画布（容器），shape描述所绘制的图形。定义.container的样式规则如下： .contai 阅读全文

posted @ 2020-08-22 05:33 aTeacher 阅读(2281) 评论(0) 推荐(0) 编辑

CSS动画实例：移动的眼珠子

摘要：适当地利用CSS的box-shadow可以构造图形，然后可以对构造的图形添加动画效果。下面我们通过移动的眼珠子、圆珠一二三、一分为四、四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使用方法。 box-shadow属性的基本格式为： box-shadow: h-shadow v-sh 阅读全文

posted @ 2020-08-21 06:07 aTeacher 阅读(684) 评论(0) 推荐(0) 编辑

CSS动画实例：太极图在旋转

摘要：利用CSS可以构造出图形，然后可以对构造的图形添加动画效果。下面我们通过旋转的太极图、放大的五角星、跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法。 1．旋转的太极图设页面中有<div class="shape"></div>，若为. shape设置样式规则如下： .shape { widt 阅读全文

posted @ 2020-08-20 05:57 aTeacher 阅读(1602) 评论(0) 推荐(2) 编辑

CSS动画实例：升空的气球

摘要： 1．制作一个气球设页面中有<div class="balloon"></div>，为. balloon设置样式规则如下： .balloon { height: 96px; width: 80px; background: hsla(0, 100%, 50%, 0.8); border-radius 阅读全文

posted @ 2020-08-18 06:21 aTeacher 阅读(1042) 评论(0) 推荐(0) 编辑

CSS动画实例：Loading加载动画效果（三）

摘要： 3．小圆型Loading 这类Loading动画的基本思想是：在呈现容器中定义1个或多个子层，再对每个子层进行样式定义，使得其均显示为一个实心圆形，最后编写关键帧动画控制，使得各个实心圆或者大小发生改变、或者平移、或者旋转。（1）小圆大小或透明度进行变化。例如，在container层中定义两个名阅读全文

posted @ 2020-08-17 06:18 aTeacher 阅读(1350) 评论(0) 推荐(0) 编辑

CSS动画实例：Loading加载动画效果（二）

摘要： 2．条状型Loading 这类Loading动画的基本思想是：在呈现容器中定义一个或多个子层，再对每个子层进行样式定义，使得其显示为一个条形或方形，最后编写关键帧动画控制，使得各个条形（或方形）的大小、位置、填充色等发生变化或者进行旋转。（1）多个竖条进行变化的加载效果。例如，编写如下的HTML 阅读全文

posted @ 2020-08-16 10:04 aTeacher 阅读(635) 评论(0) 推荐(0) 编辑

CSS动画实例：Loading加载动画效果（一）

摘要：一些网站或者APP在加载新东西的时候，往往会给出一个好看有趣的Loading图，大部分的Loading样式都可以使用CSS3制作出来，它不仅比直接使用gif图简单方便，还能节省加载时间和空间。下面介绍常见的一些Loading动画效果图的制作方法。 1．圆环型Loading 这类Loading动画的基阅读全文

posted @ 2020-08-16 06:10 aTeacher 阅读(2129) 评论(0) 推荐(0) 编辑

I am a teacher!

导航

公告