day0526CSS3 简介及文本与多列

最新推荐文章于 2024-10-31 15:47:09 发布

简至大道

最新推荐文章于 2024-10-31 15:47:09 发布

阅读量98

点赞数 2

分类专栏：前端文章标签： css3 css

又见面了，惊不惊喜，意不意外

本文链接：https://blog.csdn.net/zxyhj/article/details/119754127

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

day0526CSS3的背景、2d-3d转换及过渡动画

1.CSS3背景

2.2D变换

3.3D变换

4.过渡动画

一.css3的背景

1.线性背景（线性渐变颜色）

linear-gradient(方向,颜色1,颜色2…)

<div class="linear">
	线性渐变背景
</div>
<style type="text/css">
	.linear{
		width: 300px;
		height: 80px;
		line-height: 80px;
		border: 1px solid green;
		text-align: center;
		/* 线性渐变色参数:方向to left,to right,to right bottom,to right top...*/
		/* 方向指明最后颜色所在的位置 */
		background: linear-gradient(to right top,green,red,blue);
		color: black;
	}
</style>

2.径向背景(径向渐变颜色)

raduis-gradient(圆心位置，类型，颜色1,颜色2…)

径向渐变背景

三.过渡动画 1.元素样式渐变格式：transition:时长属性快慢过渡动画

第一个动画

实战练习

提示：课程源码在"作业"文件夹中

1.参考课程源码，完善轮播图效果

要求：添加四个指示器，切换到某个图片时是亮的其它为灰色，手动与自动均切换，效果如下

2.分别创建三个div元素练习线性渐变,径向渐变与背景图片操作

3.设计4个div,宽度和高度都为100px,颜色自定义

第1个div向右移动50px,向下移动30px