标签 [ css3 ] 下的文章

css3实现一个div设置多张背景图片及background-image属性

CSS3/CSS1 background-image 属性
语法:

background-image:<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默认值:none

取值:

none:无背景图。

< url >:使用绝对或相对地址指定背景图像。

< linear-gradient>:使用线性渐变创建背景图像。(CSS3)

< radial-gradient>:使用径向(放射性)渐变创建背景图像。(CSS3)

< repeating-linear-gradient>:使用重复的线性渐变创建背景图像。(CSS3)

< repeating-radial-gradient>:使用重复的径向(放射性)渐变创建背景图像。(CSS3)


More »

极简js和css3往上滚动智能隐藏和显示的顶部导航菜单

演示请看本站导航,不支持IE678。
HTML(header-navigation是用来指定导航样式的,id=header是用来驱动js的,这里id要和下面js里的document.getElementById相同)

header class="header-navigation" id="header"
 这是导航
/header

CSS

.header-navigation {
      position: fixed;
      top: 0;
      width: 100%;
      height: 60px;
      line-height: 60px;
      background-color: #333;
      text-align: center;
      box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
      z-index: 9999;
    }

/ Slide transitions /
    .slideUp {
     /* -webkit-transform: translateY(-100px);
      transform: translateY(-100px);*/
      -webkit-transform: translateY(-100px);
      -ms-transform: translateY(-100px);
      -o-transform: translateY(-100px);
      transform: translateY(-100px);
      /transition: transform .5s ease-out;/
      -webkit-transition: transform .5s ease-out;
      -o-transition: transform .5s ease-out;
      transition: transform .5s ease-out;
    }

    .slideDown {
      /*-webkit-transform: translateY(0);
      transform: translateY(0);*/
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      /transition: transform .5s ease-out;/
      -webkit-transition: transform .5s ease-out;
      -o-transition: transform .5s ease-out;
      transition: transform .5s ease-out;
    }


More »

CSS3图标原位置旋转360度代码

#x_contant a img{
	display:block;
	-webkit-transition: -webkit-transform 0.4s ease-out;
	-moz-transition: -moz-transform 0.4s ease-out;
	transition: transform 0.4s ease-out;
	width:125px;
	height:125px;}
#x_contant a:hover img{
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	transform: rotate(360deg);}


最新文章

最近回复

链接