aTeacher - 博客园

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 aTeacher 阅读(687) 评论(0) 推荐(0) 编辑

CSS动画实例：圆与圆的碰撞

摘要：在页面中放置9个<div class=” circle”></div>，定义每个.circle的样式规则，使得9个圆在页面中显示为半径依次相差20px的同心圆。定义关键帧anim，使得9个圆各自按给定的延迟沿左下角到右上角的直线移动，形成圆与圆碰撞的效果，碰撞后改变移动方向，从而保证里面的小圆一定在阅读全文

posted @ 2020-08-31 06:05 aTeacher 阅读(671) 评论(0) 推荐(0) 编辑

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 aTeacher 阅读(2743) 评论(0) 推荐(1) 编辑

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 aTeacher 阅读(1096) 评论(0) 推荐(0) 编辑

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 aTeacher 阅读(1151) 评论(0) 推荐(1) 编辑

CSS图形基础：利用圆锥渐变绘制图形

摘要： 1．圆锥渐变在CSS中，除了线性渐变（linear-gradient）和径向渐变（radial-gradient）外，还有一种渐变叫“圆锥渐变”。它是围绕中心点按照扇形方向进行旋转的渐变，而不是像径向渐变那样从中心点沿圆环向外慢慢辐射。圆锥渐变的调用格式为： background-image: 阅读全文

posted @ 2020-08-29 05:49 aTeacher 阅读(1020) 评论(0) 推荐(0) 编辑

CSS图形基础：利用径向渐变绘制图形

摘要： 1．径向渐变 radial-gradient() 函数用于创建一个径向渐变的“图像”，其一般调用格式为： background-image: radial-gradient(shape size at position, start-color, ..., last-color); 其中，参数sha 阅读全文

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

CSS图形基础：利用线性渐变绘制图形

摘要： 1．线性渐变 linear-gradient() 函数用于创建一个线性渐变的“图像”。其一般调用格式为： background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 其中，参数direction可选，用来指阅读全文

posted @ 2020-08-27 05:10 aTeacher 阅读(1092) 评论(0) 推荐(0) 编辑

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 aTeacher 阅读(446) 评论(0) 推荐(0) 编辑

CSS动画实例：3D立方体

摘要： CSS3支持3D转换，与3D转换有关的属性有： transform：向元素应用 2D或3D 转换。 transform-origin：改变被转换元素的位置。 transform-style：规定被嵌套元素如何在3D空间中显示。 perspective：规定 3D 元素的透视效果。 perspecti 阅读全文

posted @ 2020-08-25 05:29 aTeacher 阅读(1176) 评论(1) 推荐(3) 编辑

I am a teacher!

导航

公告