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

设页面中有<div class="circle "></div>,定义.circle的样式规则绘制一个半径为75px,边框厚度为4px的圆,再定义关键帧,使得圆从不可见到可见,再到放大后又不可见. 编写的HTML文件如下. <!DOCTYPE html> <html> <head> <title>圆的放大</title> <style> .container { margin: 0 auto…

上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果代码:最外层div包含2个小的div : a和b. a有左右边框(高度变化), b有上下边框(宽度变化), 默认不显示,鼠标移上去时,a的高度和b的宽度发生变化,交叉效果 <style> *{margin:0;padding:0;} .main{ width: 300px; height: 300px; background: #333; position: rel…

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

适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使用方法. box-shadow属性的基本格式为: box-shadow: h-shadow v-shadow blur spread color inset; 其中,属性值h-shadow为必需,表示水平阴影的位置,它允许负值:v-shadow也为必需,表示垂直阴影的位置,也允许负值:blur可选,…

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

利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1．旋转的太极图设页面中有<div class="shape"></div>,若为. shape设置样式规则如下: .shape { width: 192px; height: 96px; background: #fff; border-color: #000; border-style: solid;…

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

3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改变.或者平移.或者旋转. (1)小圆大小或透明度进行变化. 例如,在container层中定义两个名为shape的子层,通过对.shape的样式定义使得两个子层均显示一个实心圆,定义关键帧控制两个圆的大小进行交替缩放,形成两个圆的切换效果.编写HTML文件如下. <!DOCTYPE h…

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

CSS背景属性用于定义HTML元素的背景,在CSS提供的背景属性中, background-image:指定要使用的一个或多个背景图像: background-color:指定要使用的背景颜色: background-position:指定背景图像的位置: background-size:指定背景图片的大小: background-repeat:指定如何重复背景图像: background-origin 指定背景图像的定位区域: background-clip 指定背景图像的绘画区域:…

每天一点点之css - 动画-一个圆绕着另一个圆动(绕着轨迹运动)

最近要开发一个类似星河的效果,需要小圆绕着一定的轨迹运动,这个时候我首先想到的是使用canvas来实现,在实现过程中发现这个实现起来不是很灵活,然后想到css3有动画也可以实现,下面是效果注:图2是多个的效果,没有代码 html <div class="s"> <div class="m"> <div class="small small1"> <div class="small-p smal…

CSS动画实例：旋转的圆角正方形

在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container"> <div class="shape"><div class="shape"><div class="shape"><div class="shape"> <di…

CSS动画实例：一颗躁动的心

在页面中放置一个类名为container的层作为盛放心心的容器,在该层中再定义一个名为heart的子层,HTML代码描述如下: <div class="container"> <div class="heart"></div> </div> 分别为container和heart定义CSS样式规则如下: .container { margin: 0 auto; width: 300px; height:300px; po…

CSS动画实例：跳跃的字符

1．翻转的字符在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: <div class="container"> <span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>O</span> </div> 为contai…

【CSS动画实例：圆的涟漪扩散】的更多相关文章