CSS+◆符号实现的tip中小三角效果

最新推荐文章于 2021-06-04 22:03:07 发布
最新推荐文章于 2021-06-04 22:03:07 发布
阅读量195 收藏
点赞数
原文链接：http://www.cnblogs.com/csr04/archive/2012/08/23/2652825.html
版权
<!DOCTYPE HTML>
<html lang= " en-US ">
<head>
<meta charset= " UTF-8 ">
<title>CSS+◆符号实现的tip中小三角效果丨芯晴网页特效丨CsrCode.Cn</title>
<style type= " text/css ">
@charset  " utf-8 ";
/*  CSS Document  */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; }
table { border-collapse:collapse; border-spacing: 0 }
fieldset, img { border: 0 }
address, caption, cite, code, dfn, em, th,  var { font-weight:normal; font-style:normal }
strong, b { font-weight: bold; }
.SD-tipbox { background-color: #FFFFE9; border: 1px solid #FFDE8E; padding: 5px 25px 5px 10px; margin:10px; position: absolute; z-index:  100; font-size:12px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:1px 1px 2px rgba( 0,  0,  0, . 2); -webkit-box-shadow:1px 1px 2px rgba( 0,  0,  0, . 2); box-shadow:1px 1px 2px rgba( 0,  0,  0, . 2);   margin-top:20px;}
.SD-tipbox .close-ico, .SD-notice-tip .close-ico { position:absolute; top:5px; right:5px; display:block; width:16px; height:16px; background-image:url(http: // css.sodao.com/home/img/close-ico.png); text-indent:-900px; overflow:hidden; }
.SD-tipbox .close-ico:hover, .SD-notice-tip .close-ico:hover { background-position: 0 -16px; }
.SD-tipbox p { line-height: 1.5 }
.SD-tipbox .SD-tipbox-direction { position: absolute; }
.SD-tipbox .SD-tipbox-direction em, .SD-tipbox .SD-tipbox-direction span { height: 19px; width: 17px; font-family: Simsun; font-size: 16px; line-height: 21px; overflow: hidden; position: absolute; }
.SD-tipbox .SD-tipbox-direction em { color: #FFDE8E; }
.SD-tipbox .SD-tipbox-direction span { color: #FFFFE9; }
.SD-tipbox .SD-tipbox-up { left:  50%; margin-left:-8px; top:-10px; *top:-11px;
_top:-10px; }
.SD-tipbox .SD-tipbox-up span { top:1px }
.SD-tipbox .SD-tipbox-down { left:  50%; margin-left:-8px; bottom:9px; }
.SD-tipbox .SD-tipbox-down span { top:-1px }
.SD-tipbox .SD-tipbox-right { top:  50%; margin-top:-8px; right:7px; }
.SD-tipbox .SD-tipbox-right span { left:-1px }
.SD-tipbox .SD-tipbox-left { top:  50%; margin-top:-8px; left:-8px; }
.SD-tipbox .SD-tipbox-left span { left:1px }
</style>
</head>
<body>
<div  id= " warp "></div>
<div style= " position:relative; height:100px; ">
  <div  class= " SD-tipbox ">
    <div  class= " cntBox ">
      <p>Tip中小三角的实现!</a>
    </div>
    <div  class= " SD-tipbox-direction SD-tipbox-up "><em>&# 9670;</em><span>&# 9670;</span></div>
    <div  class= " SD-tipbox-direction SD-tipbox-down "><em>&# 9670;</em><span>&# 9670;</span></div>
    <div  class= " SD-tipbox-direction SD-tipbox-left "><em>&# 9670;</em><span>&# 9670;</span></div>
    <div  class= " SD-tipbox-direction SD-tipbox-right "><em>&# 9670;</em><span>&# 9670;</span></div>
</div>
</div>
<Br />
<div style= " position:relative; height:100px ">
  <div  class= " SD-tipbox ">
    <div  class= " cntBox ">
      <p>可以同步设置展示<br />
        我的空间内容了~</p>
    </div>
    <div  class= " SD-tipbox-direction SD-tipbox-up " style= " left:20px "><em>◆</em><span>◆</span></div>
    <div  class= " SD-tipbox-direction SD-tipbox-down "><em>◆</em><span>◆</span></div>
    <div  class= " SD-tipbox-direction SD-tipbox-left "><em>◆</em><span>◆</span></div>
    <div  class= " SD-tipbox-direction SD-tipbox-right "><em>◆</em><span>◆</span></div>
</div>
</div>
</body>
</html>

<br><br><hr><p align= " center "><font color=black>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>

转载于:https://www.cnblogs.com/csr04/archive/2012/08/23/2652825.html

dfsfdsds5241
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div+css实现的小三角tip小提示(原理及代码)
12-12
复制代码代码如下: <!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>css+div 小三角tip小提示</title> <style> .w{ wi
CSS实现tip框三角形
99的博客
07-10 2079
CSS实现tip框 方法一：利用盒模型border 利用长宽设为0，border设为一定宽度，上下左右一边设为三角形颜色，另外的transparent .parent1{ width: 0; height: 0; border-width: 30px; border-style: so
怎么用纯CSS制作带小三角的tooltip提示框
09-25
有很多新手朋友不知道如何使用css制作带小三角的tooltip提示框，本人研究整理了一下，晒出来和大家分享，希望可以帮助你们
Tip中小三角的实现
weixin_30588907的博客
08-28 107
前段时间专门研究了一下腾讯微博的Tip，很有意思！tip中的小箭头是用“◆”（encode为：◆）字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是：比如tip有border时，也可以用两个绝对定位的“◆”字符模拟。 ...
css设置小图标
William.Yao的博客
11-08 9816
通常我们在布局的时候都会遇到各种各样的小图标，类似于这样或者是这样 那么该如何放置这些小ico呢？有两种方法。第一种，创建一个小容器给小容器设置宽、高巴拉巴拉巴拉~然后将图片插进去或者设置成背景即可<i class="icon">要插入的图片</i><style> .icon{ width:10px; height:10px; font-st
JS+CSS实现带小三角指引的滑动门效果
10-23
主要介绍了JS+CSS实现带小三角指引的滑动门效果,可实现带有箭头提示效果的滑动门功能,涉及JavaScript动态操作页面元素样式的相关技巧,需要的朋友可以参考下
使用css实现三角符号效果
12-11
那么如何使用css的该属性来实现三角符号的效果呢，代码如下： html代码 <body> <div></div> </body> css代码 div:after{ position: absolute; width: 0px; height: 0px; content: " "; borde
HTML+CSS+JS 实现跨年祝福效果
12-16
纯HTML+CSS+JS 实现跨年祝福效果，跨年倒计时10秒钟，背景音乐里的声音也是倒数10秒钟，完美切合，鼠标点击产生烟花效果，并且烟花可以改成任意文字。年份根据系统时间自动生成。可自定义后面的happy new year 2022 ...
[转]Tip中小三角的实现
weixin_30877227的博客
07-29 81
前段时间专门研究了一下腾讯微博的Tip，很有意思！tip中的小箭头是用“◆”（encode为：&#9670;）字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是：比如tip有border时，也可以用两个绝对定位的“◆”字符模拟。如图： 注意：最好根据您的实际情况设置“◆”的字体，我这里用了宋体，有棱有角真好！ demo页...
快捷符号输入小tip(option,alt键的妙用)
思念殇千寻的博客
11-01 343
　　我们知道特殊符号的输入可以通过上档键(shift)加数字来完成。如!@#$%... -> (shift + 1 2 3 4 5...) 　　但是少有人知道windows中的alt键，或是macos中的option键也能进行特殊符号的输入。特别的，一部分特殊符号恰好是原特殊符号的逆，下面进行总结。 　　比较常用的有 option + / = ÷ option + ...
html5页面中鼠标悬停效果,CSS实例：非常不错的鼠标悬停TIP效果！_div+css布局教程...
weixin_39618169的博客
06-04 1007
在实际开发中，我们会给图片加上alt、给链接加上title，为了出故障预备，也可以提醒用户的内容是什么，或仅仅是tip提示。今天我们介绍一款不错的鼠标悬停TIP效果，图片如下：这样的效果在实际开发中是非常有用的。我们可以为我们的链接加上这样的效果，以更加体现网页的亲和力与易用性。我们也可以在提供下载的链接下提供这样的tip提示。我们看这样的鼠标悬停TIP效果是如何实现的。看下面的XHTML代码： ...
CSS学习之纯CSS打造TIP提示效果，代替传统TITLE提示
何东狮吼
07-20 2015
测试css tip a.tooltip{ position:relative; line-height:18px; } a.tooltip span{ display:none; } a.tooltip:hover span{ position:ab
css 实现 title的效果，并且自己写修改类似title样式
twinkle的博客
06-18 6385
效果如下： 代码如下： /** 使用data-tip来实现title的效果 */ // 通过属性选择器获取到标签，加上相对定位 [data-tip] { position: relative; display: inline-block; } // 统一设置伪类的样式 [data-tip]::before, [data-tip]::after { position: absolute; visibility: visible; opacity: 0; z-index: 2020
css基础篇 05 css属性书写顺序 温习
qilie_32的博客
01-21 155
css属性书写顺序以及学成在线案例的实战
css+div 小三角tip小提示
_Nutra
11-11 2510
css+div 小三角tip小提示 .w{ width:200px; position:absolute; background:#999; left:400px; top:200px; font-size:12px; text-align:left} .x{ width:180px; position:relative; background:#ff9; border:1px sol
纯CSS3进行hover时显示带箭头的tips提示动画效果
遗忘
01-08 6711
很久没有在csdn写博客了,今日心血来潮的来继续杂记. 效果图:当鼠标放在ps,ai上显示对应的内容. 流程分析:鼠标移动显示提示,鼠标在父层(内有显示和隐藏层)时,隐藏层进行动画显示.区别于日常的hover,我们用尽量少的html和css代码达到理想的状态. 这里边有个很容易被带到沟里的一个小地方,经常有人问怎么做出三角形?其实那不过是个旋转了45°的正方形.html:<div clas
纯CSS实现tooltip，css更改html标签的title样式
热门推荐
吴小迪的博客
02-27 1万+
html代码： 以下代码直接可用，tootip的样式可以自己调试。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ ma...
纯css提示小窗口
duxianwei520的专栏
05-06 488
一个纯css的提示小窗口
使用js+css+html实现，按键移动div 效果
最新发布
06-08
好的，以下是使用 JavaScript、CSS 和 HTML 实现按键移动 div 的代码示例： HTML 代码： ```html <div id="myDiv">移动我</div> ``` CSS 代码： ```css #myDiv { width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0; } ``` JavaScript 代码： ```javascript var myDiv = document.getElementById("myDiv"); document.addEventListener("keydown", function(event) { var top = parseInt(myDiv.style.top); var left = parseInt(myDiv.style.left); switch (event.keyCode) { case 37: // left arrow key myDiv.style.left = (left - 10) + "px"; break; case 38: // up arrow key myDiv.style.top = (top - 10) + "px"; break; case 39: // right arrow key myDiv.style.left = (left + 10) + "px"; break; case 40: // down arrow key myDiv.style.top = (top + 10) + "px"; break; } }); ``` 这段代码使用了 JavaScript 的事件监听器来捕捉键盘按键事件。在按下箭头键时，根据按下的键码来移动 div 元素的位置，从而实现按键移动 div 的效果。 注意：这段代码假设 div 元素的初始位置为左上角，如果您的 div 元素初始位置不同，请在 CSS 中适当调整 top 和 left 属性的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值