CSS动画实例：Loading加载动画效果（三）
摘要：3．小圆型Loading 这类Loading动画的基本思想是：在呈现容器中定义1个或多个子层，再对每个子层进行样式定义，使得其均显示为一个实心圆形，最后编写关键帧动画控制，使得各个实心圆或者大小发生改变、或者平移、或者旋转。 （1）小圆大小或透明度进行变化。 例如，在container层中定义两个名
阅读全文
posted @ 2020-08-17 06:18
随笔分类 - CSS3图形与动画设计
CSS动画实例：Loading加载动画效果（二）
摘要：2．条状型Loading 这类Loading动画的基本思想是：在呈现容器中定义一个或多个子层，再对每个子层进行样式定义，使得其显示为一个条形或方形，最后编写关键帧动画控制，使得各个条形（或方形）的大小、位置、填充色等发生变化或者进行旋转。 （1）多个竖条进行变化的加载效果。 例如，编写如下的HTML
阅读全文
posted @ 2020-08-16 10:04
CSS动画实例：Loading加载动画效果（一）
摘要：一些网站或者APP在加载新东西的时候，往往会给出一个好看有趣的Loading图，大部分的Loading样式都可以使用CSS3制作出来，它不仅比直接使用gif图简单方便，还能节省加载时间和空间。下面介绍常见的一些Loading动画效果图的制作方法。 1．圆环型Loading 这类Loading动画的基
阅读全文
posted @ 2020-08-16 06:10
CSS动画实例：跳跃的字符
摘要：1．翻转的字符 在页面中放置一个类名为container的层作为容器，在该层中放置5个字符区域，HTML代码描述如下： <div class="container"> <span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>
阅读全文
posted @ 2020-08-15 06:17
CSS动画实例：一颗躁动的心
摘要：在页面中放置一个类名为container的层作为盛放心心的容器，在该层中再定义一个名为heart的子层，HTML代码描述如下： <div class="container"> <div class="heart"></div> </div> 分别为container和heart定义CSS样式规则如下
阅读全文
posted @ 2020-08-14 05:51
CSS动画实例：旋转的叶片
摘要：在页面中放置一个类名为container的层作为容器，在该层中再定义一个名为shape的子层，HTML代码描述如下： <div class="container"> <div class="shape"></div> </div> 分别为container和shape定义CSS样式规则如下： .co
阅读全文
posted @ 2020-08-13 06:44
CSS动画实例：旋转的圆角正方形
摘要：在页面中放置一个类名为container的层作为效果呈现容器，在该层中再定义十个名为shape的层层嵌套的子层，HTML代码描述如下： <div class="container"> <div class="shape"><div class="shape"><div class="shape"><
阅读全文
posted @ 2020-08-13 04:30
CSS动画基础知识
摘要：CSS动画就是通过CSS （Cascading Style Sheet，层叠样式表）代码搭建的网页动画。它允许设计师和开发人员通过编辑网站的CSS代码来添加页面动画，从而轻松取代传统动画图片或flash动画的设计方式。 transition（过渡）和animation（动画）是CSS3中的两种动画属
阅读全文
posted @ 2020-08-12 06:18
CSS动画实例：图文切换
摘要：先准备好一张图片，在页面中放置一个类名为container的层作为图文容器，在该层中再定义两个层：一个类名为image-box的层放置图片，一个类名为text-desc的层放置文本描述，HTML代码描述如下： <div class="container"> <div class="image-box
阅读全文
posted @ 2020-08-09 18:56
