html5/css3怎么写以下这种效果,最好有详细代码,给高分!

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5/css3怎么写以下这种效果,最好有详细代码,给高分!相关的知识,希望对你有一定的参考价值。

鼠标滑过图片淡入一个白色外边框加投影.
最重要的是要有淡入效果,不要js效果。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淡入阴影效果</title>
<style type="text/css">
* margin:0px; padding:0;
body color:#666; font:16px/1.5 '微软雅黑',Arial, Helvetica, sans-serif;
img border:0 none;
.ullist float:left; list-style:none; width:100%;
.ullist li background:#eee; float:left; margin:10px; width:228px;
.ullist li a border:10px solid #fff; color:#666; display:inline-block; text-decoration:none;
.ullist li a:hover box-shadow:0 0 10px #666; transition:all 0.40s ease-in-out;
.fcr color:#f00;
</style>
</head>
<body>
<ul class="ullist">
  <li><a href="#"><img src="1.jpg" alt="" />詹二锋-野色风情<br/><span class="fcr">¥40,000</span></a></li>
  <li><a href="#"><img src="1.jpg" alt="" />詹二锋-野色风情<br/><span class="fcr">¥40,000</span></a></li>
</ul>
</body>
</html>

给你写了一个例子,运行一下,就可以了。

追问

这就是我想要的效果, 非常感谢,虽然有点小问题,不过已经调好了;请问css3有没有比较全面的学习网站。

参考技术A

看看吧~希望对你有帮助

只写了谷歌的hank(用谷歌浏览器打开或者360浏览器)

要兼容其他浏览器需要把其他的也加上

你可以把其他的加上

参考技术B .box  width:100px; height:250px; border:solid 1px #ccc; background:#FFF;
.box:hover  box-shadow:0 0 10px #EEE;

<div class="box"></div>

希望能帮助您,谢谢!

追问

请清楚问题!我要的是css3边框投影淡入淡出效果。

追答.box  width:100px; height:250px; border:solid 1px #ccc; background:#FFF; -webit-transition:all .3s linear

参考技术C 用hover行吗?
hover之后加投影,
我也不确定,随便说说

html+css这个列表效果怎样做出来的?

如题

参考技术A

这个可以这么组织结构。不知道你的js或者jq如何。

我先大概写一下

<div class="tree">
<dl>
<dt><a href="javascript:;">A一级第一个</a></dt>
<dd style="display:none;">
<ul>
<li>A二级第一个</li>
<li>A二级第二个</li>
<li>A二级第三个</li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:;">B一级第二个</a></dt>
<dd style="display:none;">
<ul>
<li>B二级第一个</li>
<li>B二级第二个</li>
<li>B二级第三个</li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:;">C一级第三个</a></dt>
<dd style="display:none;">
<ul>
<li>C二级第一个</li>
<li>C二级第二个</li>
<li>C二级第三个</li>
</ul>
</dd>
</dl>
</div>

大概结构可以像这样,当然,样式你要先写好,还可以无限制的扩展,用其他的标签也可以


效果是这样的,开始的时候,每个dl的dt都是可见的,而dd都是不可见的。

当点击了每个dt之后,它对应的dd则变为可见

<script type="text/javascript">
function tree()
var obj = $('.tree');
obj.find('dt').click(function()
$(this).siblings('dd').toggle();
)

$(funciton()
tree();
)
</script>

追问

不太会JS,只会css+div,你这个怎么提示有语法错误呢!!

追答

额。。这个你要先引入一个jquery.js才行。。原生的js我也不会,只会jq的,你可以到网上搜一下jquery,然后下载一个。。。
在页面中引入一下

参考技术B 这是js实现的 不是css 你去网上搜下拉菜单js源码 或者去一些可以下载js源码文件的网站找

应该很容易就找到
参考技术C 可以看看这个效果,http://bbs.miaov.com/forum.php?mod=viewthread&tid=228&highlight=%E8%8F%9C%E5%8D%95追问

这个可以用,谢谢

本回答被提问者采纳
参考技术D 你用js做很容易实现。 第5个回答  2013-08-30 jQuery 或者js 控制下追问

能给点代码么- -

以上是关于html5/css3怎么写以下这种效果,最好有详细代码,给高分!的主要内容,如果未能解决你的问题,请参考以下文章

请问以下CSS3 效果:两边是圆角,中间是一条分界线 这种效果怎么实现

html5 css3下拉 动画css怎么写

CSS3 的按钮怎么快速实现样式

怎么用html5+css3 实现图片轮播

什么是HTML5和CSS3

css3圆环旋转效果动画怎么做