css小特效

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:4509

css3特效
{}
<!DOCTYPE html PUBLIC \-//W3C//DTD XHTML 1.0 Transitional//EN\ \http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\><html xmlns=\http://www.w3.org/1999/xhtml\>\r\n<head> <me...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片提示</title> <!-- 引入jQuery --> <script src="demo/static/js/jquery.min.js" type="text/javascript"></script> <style type="text/css"> body { margin: 0; padding: 40px; background: #fff; font: 80% Arial, Helvetica, sans-serif; color: #555; line-height: 180%; }

img { border: none; }

ul, li { margin: 0; padding: 0; }

li { list-style: none; float: left; display: inline; margin-right: 10px; border: 1px solid #AAAAAA; } /* tooltip */

#tooltip { position: absolute; border: 1px solid #ccc; background: #333; padding: 2px; display: none; color: #fff; } </style> <style type="text/css" media="screen"> .overimg{ position: relative; display: block; /* overflow: hidden; */ box-shadow: 0 0 10px #FFF; } .light{ cursor:pointer; position: absolute; left: -180px; top: 0; width: 180px; height: 90px; background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); transform: skewx(-25deg); -o-transform: skewx(-25deg); -moz-transform: skewx(-25deg); -webkit-transform: skewx(-25deg);

} .overimg:hover .light{ left:180px; -moz-transition:2s; -o-transition:2s; -webkit-transition:2s; transition:2s; }

</style> <script type="text/javascript"> //<![CDATA[ $(function() { var x = 10; var y = 20; $("a.tooltip").mouseover(function(e) { this.myTitle = this.title; this.title = ""; var imgTitle = this.myTitle ? "<br/>" + this.myTitle : ""; var tooltip = "<div id='tooltip'> <img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "<\/div>"; //创建 div 元素 $("body").append(tooltip); //把它追加到文档中 $("#tooltip") .css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); //设置x坐标和y坐标，并且显示 }).mouseout(function() { this.title = this.myTitle; $("#tooltip").remove(); //移除 }).mousemove(function(e) { $("#tooltip") .css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); }); }) //]]> </script>

</head>

<body>

有效果：

<a href="img/1.jpg" class="tooltip" title="苹果 iPod"> 苹果 iPod</a>

<a href="img/2.jpg" class="tooltip" title="苹果 iPod nano"> 苹果 iPod nano</a>

<a href="img/3.jpg" class="tooltip" title="苹果 iPhone"> 苹果 iPhone</a>

<a> </a>

<i class="light"></i>

</body>

</html>

以后装13用，呵呵

转载于:https://www.cnblogs.com/wysdddh/p/6638836.html

原文地址：https://blog.csdn.net/weixin_34326179/article/details/93335341?ops_request_misc=&request_id=6c19665b5171484fa1ff5cf64d700d68&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-10-93335341-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/ffbcfec1d2a44b0bb5bc7ab55a0ce348

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复