正文
css层滑入效果图 css如何让div滑入显示
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
CSS实现一个效果，当鼠标移上去时，下方出现一张图
1、首先在netbenas建立一个html文件。
2、引入css文件。
3、html文件增加一个显示图片层。
4、在1.css文件中增加代码。
5、看看浏览器图片层效果。
6、层里面加一个图片。
7、在win10下调用自带的3d画图软件。
8、在win10下画图3d软件新建一个画布,画一个画布是184x149尺寸。
9、win10自带的3d软件画一个矩形。
10、导出png文件格式。
11、在netbeanshtml代码中增加绑带div。
相关问答
Q1: 怎样用CSS使层的四个边角变的圆滑一些
用到了这条代码：border-radius-left,top,bottom,right
例子如下：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
/head
body
div style="border:3px #000 solid;border-top-right-radius:10px; border-top-left-radius:5px; border-bottom-left-radius:6px; border-bottom-right-radius:20px; width:50px; height:50px; background:#f60;"/div
div style="border:3px #000 solid;border-radius:10px; width:50px; height:50px; background:#fff;"/div
/body
/html
Q2: js css 鼠标移入某个区域滑出一个框的效果怎么做？
1、输入代码，其中button是鼠标要滑动的地方，滑过button时，class为content的内容就要显示出来，鼠标滑出去的时候，这块内容就需要重新隐藏起来。
2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。
3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。
4、把onmouseover和onmouseout两个事件作用在button上面，再写overShow()和overHide()两个 函数。可以看到在函数中通过改content的display属性来实现显示隐藏的效果。
5、在浏览器中就可以看到效果了。
Q3: css可以做出鼠标滑过图片突出显示的效果么？在电子杂志上看到过，觉得很好看。可是网页上能实现吗？
这个当然可以实现了，所谓突出显示效果跟滑动门的道理差不多，需要用到的是:hover
********************************************************
定义和用法
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
说明
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来：
********************************************************
我不清楚你说的突出显示的效果，是不是图片变大。
如果是那样的话，可以img class="big"先定义一下，然后之后img.big:hover {width:多少px;height:多少px;}
就是把它置为顶层就可以了。具体的浮动什么的，依情况而定，写CSS熟悉以后很简单。
或者我觉得直接就可以用滑动门的办法，用两张图来替换就行。
div id="header"
ul
lia href="#"Home/a/li
li id="current"a href="#"News/a/li
lia href="#"Products/a/li
lia href="#"About/a/li
lia href="#"Contact/a/li
/ul
/div
#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}
#header a {
display:block;
}
#header li {
float:left;
background:url("norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}
#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;
}
#header #current {
background-image:url("norm_right_on.gif");
}
#header #current a {
background-image:url("norm_left_on.gif");
}
嗯，你现在网上看一下滑动门的文章吧，我说的也不是很清楚，只是提供了一个思路，具体的看几个网页模板的代码相应的部分就可以理解了，嗯希望对你有帮助吧。
Q4: css多边形的层怎么做
css不同的多边形的层写法是不同的。
一、梯形代码：
.triangle {
border-bottom: 100px solid #F36823;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
二、六角星代码：
.triangle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
.triangle:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
3、五角星代码：
.triangle{
margin: 50px 0;
position: relative;
display: block;
color: #F36823;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #F36823;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.triangle:before {
border-bottom: 80px solid #F36823;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.triangle:after {
position: absolute;
display: block;
color: #F36823;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #F36823;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
4、六边形代码：
.triangle{
width: 100px;
height: 55px;
background: #F36823;
position: relative;
}
.triangle:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #F36823;
}
.triangle:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #F36823;
}
关于css层滑入效果图和css如何让div滑入显示的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
