• 技术文章 >web前端 >html教程

    css滑动门技术_html/css_WEB-ITnose

    2016-06-24 11:46:27原创726
    双重滑动门效果还是比较常用的,其实很好理解:


    两个门就好比两个块级的元素重合所形成的效果,看一段代码如下:


    #Mydoor ul li a:hover{	color:#fff; //设置背景 黑色 	background: url(hover.gif); //设置背景 图片,图片周边应为透明,这样才能把背景衬托出来 } 
    可以看到左侧变化如下



    /**将连接a下的内容变为块级;给右边一个宽度*/#Mydoor ul li a b{ 	display:block; //设置为块元素 	padding:0 14px 0 0; //设置右边距为14像素 }  /**经过后右上定位*/ #Mydoor ul li a:hover b{ 	color:#fff; //设置背景 黑色 	background: url(hover.gif) no-repeat right top; //设置背景图片,右对齐 }

    编辑完后的效果


    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css滑动门技术
    上一篇:通用的flash代码_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• ExtJs教程8• 浏览器得到地址栏的相关信息_html/css_WEB-ITnose• html+css知识整理_html/css_WEB-ITnose• clear:both 后按钮错位了_html/css_WEB-ITnose• jquery的样式操作
    1/1

    PHP中文网