前端 css3的小例子（自用）

最新推荐文章于 2024-05-13 11:11:24 发布

清澈@Cherry

最新推荐文章于 2024-05-13 11:11:24 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/nihaoqiulinhe/article/details/54020251

版权

JavaWeb 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

学习了一下css3，如下代码：

<!DOCTYPE html>
<html>	
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	
	/*颜色渐变的相关知识*/
	background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(green, #f32394); /*颜色的渐变 标准的语法（必须放在最后） */
	background: linear-gradient(to bottom right, red , blue); /*颜色对角的渐变 标准的语法 */
	background: linear-gradient(90deg, red, blue); /* 以某些角度来渐变标准的语法 */
	background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*颜色渐变有透明度：标准的语法 */
	
	/* 径向的颜色渐变*/
	background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
    background: radial-gradient(yellow, green, blue); /* 标准的语法（必须放在最后） */
	
	background: repeating-radial-gradient(red, yellow 10%, green 15%);/*重复的径向渐变*/
	
	
	width:400px;
	
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{ 
	/*背景图片的相关属性:图片所在位置、是否平铺等等*/
	background-image: url(img_flwr.gif), url(paper.gif);
	background-size:80px 60px;/*设置图片大小：也可以是百分比：50% 50% */
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
	background-origin:content-box;/*图片的以哪个元素进行定位*/
	 background-clip: content-box; /*图片的以哪个元素进行裁剪，有边界*/
	
	/*边框的属性：角度、背景、圆角、阴影效果*/
	border:2px solid #a1a1a1;/*边界宽度/颜色*/
	border-radius:25px;/*边界的角度*/
	background-color:yellow;/*背景颜色*/
	box-shadow: 10px 10px 5px #888888;/*阴影效果*/
	transform:rotate(10deg);/* 旋转60度*/
	-ms-transform:rotate(10deg); /* IE 9 */
	-webkit-transform:rotate(10deg); /* Safari and Chrome 
	
	-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
	-o-border-image:url(border.png) 30 30 round; /* Opera */
	border-image:url(border.png) 30 30 round;/*边界图片修饰*/
	
	width:200px;
	
	
	
}

span#div3
{
	/*文字效果设置*/
	text-shadow: 5px 5px 5px #FF0000;/*文字阴影效果*/
	word-wrap:break-word;/*换行*/
	word-break:break-all;
	
	-webkit-transition:width 2s; /* Safari */
	
	width:500px;
	margin:300px;
	
	
}

/*鼠标放在上面会有宽度变化的过度效果*/
div
{
	width:100px;
	height:100px;

	/*鼠标悬浮，有颜色变化的动画效果*/
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	
	background:red;
	transition:width 2s;/*宽度的变化*/
	-webkit-transition:width 2s; /* Safari */
	
	 transition: width 2s, height 2s, transform 2s;/*多个效果的组合*/
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

div:hover
{
	width:300px;
	height: 200px;
	transform: rotate(180deg);
}
	
/*鼠标悬浮，有颜色变化的动画效果*/	
@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}
/*鼠标悬浮，有颜色变化的动画效果*/
@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;}
	to {background:yellow;}
}
	
</style>
</head>
<body>

<div>css3的所有效果总结</div>

<div id="div2">你好。这是一个 DIV 元素。</div>
	
<span id="div3">文字相关的效果，是否支持换行的呢，我来测测看，看看是否会换行the word will turn around</span>
	
<p>鼠标移动到 div 元素上，查看过渡效果。</p>

</body>
</html>

运行结果为：

清澈@Cherry

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端 css3的小例子（自用）

学习了一下css3，如下代码：菜鸟教程(runoob.com) div{ /*颜色渐变的相关知识*/ background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 1
复制链接

扫一扫

专栏目录