css3效果大杂烩

最新推荐文章于 2024-11-11 21:29:21 发布

原创最新推荐文章于 2024-11-11 21:29:21 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

8 篇文章

订阅专栏

本文通过实例演示了 CSS3 的各项功能，包括颜色渐变、背景图片设置、边框样式、文字效果及过渡动画等。展示了如何使用不同浏览器前缀实现兼容性，并介绍了一些实用的 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>