CSS动画实例：双螺旋旋转
摘要：设页面中有<div class=' ele '></div>，定义. ele的样式规则如下： .ele { position: relative; width: 1px; height: 100px; margin: 10px 10px; border-left: 1px #B0B0B0 dashe
阅读全文
posted @ 2020-09-23 11:10
随笔分类 - CSS3图形与动画设计
CSS动画实例：正方形动画特效
摘要：设页面中有<div class="square"></div>，若定义. square的样式规则如下： .square { margin: 20px auto; position: relative; width: 260px; height: 260px; border:5px solid #f0
阅读全文
posted @ 2020-09-22 06:35
CSS动画实例：涡旋
摘要：设页面中有<div class=" vortex "></div>，若定义. vortex的样式规则和关键帧如下： .vortex { position: relative; margin: 100px auto; border-radius: 50%; width:200px; height:20
阅读全文
posted @ 2020-09-03 09:15
CSS动画实例：食豆人
摘要：设页面中有<div class="pacman"></div>，若定义. pacman的样式规则为： .pacman { position: absolute; width:0px; height:0px; top:100px; left:30px; border-right:50px solid
阅读全文
posted @ 2020-09-01 12:06
CSS动画实例：圆与圆的碰撞
摘要：在页面中放置9个<div class=” circle”></div>，定义每个.circle的样式规则，使得9个圆在页面中显示为半径依次相差20px的同心圆。定义关键帧anim，使得9个圆各自按给定的延迟沿左下角到右上角的直线移动，形成圆与圆碰撞的效果，碰撞后改变移动方向，从而保证里面的小圆一定在
阅读全文
posted @ 2020-08-31 06:05
CSS动画基础：常用动画效果的设置
摘要：设页面中有<div class=”shape”></div>，若定义.shape的样式规则为： .shape { position: absolute; left:125px; top:75px; width: 150px; height: 150px; border-radius:10% 50%
阅读全文
posted @ 2020-08-30 18:36
CSS动画实例：旋转的同心圆
摘要：设页面中有<div class=” wrap”></div>，若定义.wrap的样式规则为： .wrap { width: 200px; height: 100px; top:100px; left:100px; position: absolute; background-color:#ff0;
阅读全文
posted @ 2020-08-30 05:14
CSS动画实例：花瓣发光旋转
摘要：1．旋转的花瓣 设页面中有<div class=” petal”></div>，若定义.shape的样式规则为： .petal { width:100px; height:100px; background-color:#f00; border-radius:0 100% 0 100%; } 可在页
阅读全文
posted @ 2020-08-29 17:40
CSS图形基础：利用圆锥渐变绘制图形
摘要：1．圆锥渐变 在CSS中，除了线性渐变（linear-gradient）和径向渐变（radial-gradient）外，还有一种渐变叫“圆锥渐变”。它是围绕中心点按照扇形方向进行旋转的渐变，而不是像径向渐变那样从中心点沿圆环向外慢慢辐射。 圆锥渐变的调用格式为： background-image:
阅读全文
posted @ 2020-08-29 05:49
CSS图形基础：利用径向渐变绘制图形
摘要：1．径向渐变 radial-gradient() 函数用于创建一个径向渐变的“图像”，其一般调用格式为： background-image: radial-gradient(shape size at position, start-color, ..., last-color); 其中，参数sha
阅读全文
posted @ 2020-08-28 05:23
CSS图形基础：利用线性渐变绘制图形
摘要：1．线性渐变 linear-gradient() 函数用于创建一个线性渐变的“图像”。其一般调用格式为： background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 其中，参数direction可选，用来指
阅读全文
posted @ 2020-08-27 05:10
CSS动画实例：SierPinski地毯
摘要：设页面中有<div class=”shape”></div>，若定义.shape的样式规则为： .shape { width: 100px; height: 100px; background: conic-gradient(from 270deg at calc(100% / 3) calc(10
阅读全文
posted @ 2020-08-26 05:56
CSS动画实例：3D立方体
摘要：CSS3支持3D转换，与3D转换有关的属性有： transform：向元素应用 2D或3D 转换。 transform-origin：改变被转换元素的位置。 transform-style：规定被嵌套元素如何在3D空间中显示。 perspective：规定 3D 元素的透视效果。 perspecti
阅读全文
posted @ 2020-08-25 05:29
CSS动画实例：圆的涟漪扩散
摘要：设页面中有<div class="circle "></div>，定义.circle的样式规则绘制一个半径为75px，边框厚度为4px的圆，再定义关键帧，使得圆从不可见到可见，再到放大后又不可见。 编写的HTML文件如下。 <!DOCTYPE html> <html> <head> <title>圆
阅读全文
posted @ 2020-08-24 05:16
CSS动画实例：行星和卫星
摘要：设页面中有<div class=" planet "></div>，用来绘制一个行星和卫星图形。这个图形包括三部分：行星、卫星和卫星旋转的轨道。定义. planet的样式规则如下： .planet { position:absolute; top:80px; left:80px; height:10
阅读全文
posted @ 2020-08-23 11:46
CSS动画实例：小圆球的海洋
摘要：CSS背景属性用于定义HTML元素的背景，在CSS提供的背景属性中， background-image：指定要使用的一个或多个背景图像； background-color：指定要使用的背景颜色； background-position：指定背景图像的位置； background-size：指定背景图
阅读全文
posted @ 2020-08-23 05:21
CSS图形基础：纯CSS绘制图形
摘要：为了在页面中利用CSS3绘制图形，在页面中定义 <div class="container"> <div class="shape"></div> </div> 其中，container作为显示图形的画布（容器），shape描述所绘制的图形。 定义.container的样式规则如下： .contai
阅读全文
posted @ 2020-08-22 05:33
CSS动画实例：移动的眼珠子
摘要：适当地利用CSS的box-shadow可以构造图形，然后可以对构造的图形添加动画效果。下面我们通过移动的眼珠子、圆珠一二三、一分为四、四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使用方法。 box-shadow属性的基本格式为： box-shadow: h-shadow v-sh
阅读全文
posted @ 2020-08-21 06:07
CSS动画实例：太极图在旋转
摘要：利用CSS可以构造出图形，然后可以对构造的图形添加动画效果。下面我们通过旋转的太极图、放大的五角星、跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法。 1．旋转的太极图 设页面中有<div class="shape"></div>，若为. shape设置样式规则如下： .shape { widt
阅读全文
posted @ 2020-08-20 05:57
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
