css3效果大杂烩

  1. >  
  2. <html>      
  3. <head>  
  4. <meta charset="utf-8">   
  5. <title>菜鸟教程(runoob.com)title>   
  6. <style>   
  7. div  
  8. {  
  9.       
  10.     /*颜色渐变的相关知识*/  
  11.     background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */  
  12.     background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */  
  13.     background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */  
  14.     background: linear-gradient(green, #f32394); /*颜色的渐变 标准的语法(必须放在最后) */  
  15.     background: linear-gradient(to bottom right, red , blue); /*颜色对角的渐变 标准的语法 */  
  16.     background: linear-gradient(90deg, red, blue); /* 以某些角度来渐变标准的语法 */  
  17.     background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*颜色渐变有透明度:标准的语法 */  
  18.       
  19.     /* 径向的颜色渐变*/  
  20.     background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */  
  21.     background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */  
  22.     background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */  
  23.     background: radial-gradient(yellow, green, blue); /* 标准的语法(必须放在最后) */  
  24.       
  25.     background: repeating-radial-gradient(red, yellow 10%, green 15%);/*重复的径向渐变*/  
  26.       
  27.       
  28.     width:400px;  
  29.       
  30.     height:75px;  
  31.     background-color:red;  
  32.     border:1px solid black;  
  33. }  
  34. div#div2  
  35. {   
  36.     /*背景图片的相关属性:图片所在位置、是否平铺等等*/  
  37.     background-image: url(img_flwr.gif), url(paper.gif);  
  38.     background-size:80px 60px;/*设置图片大小:也可以是百分比:50% 50% */  
  39.     background-position: right bottom, left top;  
  40.     background-repeat: no-repeat, repeat;  
  41.     background-origin:content-box;/*图片的以哪个元素进行定位*/  
  42.      background-clip: content-box; /*图片的以哪个元素进行裁剪,有边界*/  
  43.       
  44.     /*边框的属性:角度、背景、圆角、阴影效果*/  
  45.     border:2px solid #a1a1a1;/*边界宽度/颜色*/  
  46.     border-radius:25px;/*边界的角度*/  
  47.     background-color:yellow;/*背景颜色*/  
  48.     box-shadow: 10px 10px 5px #888888;/*阴影效果*/  
  49.     transform:rotate(10deg);/* 旋转60度*/  
  50.     -ms-transform:rotate(10deg); /* IE 9 */  
  51.     -webkit-transform:rotate(10deg); /* Safari and Chrome   
  52.       
  53.     -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */  
  54.     -o-border-image:url(border.png) 30 30 round; /* Opera */  
  55.     border-image:url(border.png) 30 30 round;/*边界图片修饰*/  
  56.       
  57.     width:200px;  
  58.       
  59.       
  60.       
  61. }  
  62.   
  63. span#div3  
  64. {  
  65.     /*文字效果设置*/  
  66.     text-shadow: 5px 5px 5px #FF0000;/*文字阴影效果*/  
  67.     word-wrap:break-word;/*换行*/  
  68.     word-break:break-all;  
  69.       
  70.     -webkit-transition:width 2s; /* Safari */  
  71.       
  72.     width:500px;  
  73.     margin:300px;  
  74.       
  75.       
  76. }  
  77.   
  78. /*鼠标放在上面会有宽度变化的过度效果*/  
  79. div  
  80. {  
  81.     width:100px;  
  82.     height:100px;  
  83.   
  84.     /*鼠标悬浮,有颜色变化的动画效果*/  
  85.     background:red;  
  86.     animation:myfirst 5s;  
  87.     -webkit-animation:myfirst 5s; /* Safari and Chrome */  
  88.       
  89.     background:red;  
  90.     transition:width 2s;/*宽度的变化*/  
  91.     -webkit-transition:width 2s; /* Safari */  
  92.       
  93.      transition: width 2s, height 2s, transform 2s;/*多个效果的组合*/  
  94.     -webkit-transition: width 2s, height 2s, -webkit-transform 2s;  
  95. }  
  96.   
  97. div:hover  
  98. {  
  99.     width:300px;  
  100.     height: 200px;  
  101.     transform: rotate(180deg);  
  102. }  
  103.       
  104. /*鼠标悬浮,有颜色变化的动画效果*/   
  105. @keyframes myfirst  
  106. {  
  107.     from {background:red;}  
  108.     to {background:yellow;}  
  109. }  
  110. /*鼠标悬浮,有颜色变化的动画效果*/  
  111. @-webkit-keyframes myfirst /* Safari and Chrome */  
  112. {  
  113.     from {background:red;}  
  114.     to {background:yellow;}  
  115. }  
  116.       
  117. style>  
  118. head>  
  119. <body>  
  120.   
  121. <div>css3的所有效果总结div>  
  122.   
  123. <div id="div2">你好。这是一个 DIV 元素。div>  
  124.       
  125. <span id="div3">文字相关的效果,是否支持换行的呢,我来测测看,看看是否会换行the word will turn aroundspan>  
  126.       
  127. <p>鼠标移动到 div 元素上,查看过渡效果。p>  
  128.   
  129. body>  
  130. html>  

你可能感兴趣的:(css)