保护环境做网站素材,做一个网址需要什么,国内最近重大新闻2024,织梦圈子如何调用网站默认模板上一篇文章用CSS3实现了一个提示工具#xff0c;本文介绍如何利用CSS3实现提示工具以渐入的方式呈现#xff0c;以渐出的方式消失。
CSS3主要可以通过两个样式来实现动画效果#xff1a;animation和transition。
其中#xff0c;animation需要自己定义一组关键帧从而实现…上一篇文章用CSS3实现了一个提示工具本文介绍如何利用CSS3实现提示工具以渐入的方式呈现以渐出的方式消失。
CSS3主要可以通过两个样式来实现动画效果animation和transition。
其中animation需要自己定义一组关键帧从而实现动画例如
keyframes fadein {from { opacity: 0;}to { opacity: 1;visibility: visible;}
}
keyframes fadeout {from { opacity: 1;visibility: visible;}to {opacity: 0;visibility: hidden;}
}
.tooltip .tooltiptext {visibility: hidden;animation:fade 1s infinite;
}
.tooltip:hover .tooltiptext {animation: fadein 2s 1;
}
上面的css中fadein和fadeout定义了两组动画关键帧其中每组关键帧中样式组的名称“from”、“to”其实是可以自己随便写的只要不违反CSS命名规则即可每一组关键帧实际上就是一个动画fadein和fadeout就是动画的名称。完成动画定义后在需要播放动画的元素的CSS中用样式animation即可播放它的参数包括要播放的关键组动画名称、持续时间和重播次数infinite表示无限循环播放。如上面的定义就可以在鼠标进入工具元素区域时让提示文本渐入鼠标移出工具元素区域时让提示文本渐出。还可以通过“,”分隔在animation样式中播放多个动画。
animation动画可以精确控制动画的关键帧但是编写CSS比较复杂。在提示工具这个用例中显然没必要弄得这么复杂因此可以用自动生成关键帧的transition样式来编写。
在上文中的animation动画中我们使用了visibility和opacity两个属性来控制tooltiptext的显示与隐藏。这主要是由于visibility样式在hidden和visible之间没有过渡状态因此无法通过transition产生平滑渐入渐出式动画也无法在关键帧组中自己定义出一个中间状态它只会在到了播放时间时突然出现或者消失而opacity则从0到1之间有无限个可用的连续值作为中间状态。
使用transition样式来实现tooltiptext的渐入渐出可以按如下方式定义
.tooltip .tooltiptext {visibility: hidden;opacity: 0;transition: opacity 2s linear,visibility 2s;
}.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;transition: opacity 2s linear;
}
可以看出来transition比animation的CSS定义要简洁得多但是与animation对tooltiptext的visibility和opacity的初始定义要求并不严格不同的是transition则必须要严格定义好tooltiptext的visibility和opacity的初始值。完整演示页面如下
!DOCTYPE html
html langzhheadmeta charsetUTF-8titletooltip的渐入与渐出/titlestyle.tooltip {position: relative;display: inline-block;background-color: aqua;}.tooltip .tooltiptext {width: 140%;background-color: gray;text-align: left;text-indent: 2em;border-radius: 0.5em;padding: 0.2em 0.1em;color: #ff0;top: 1.5em;left: 1em;/* 定位 */position: absolute;z-index: 1;/*动画效果*/visibility: hidden;transition: opacity 2s linear, visibility 2s;opacity: 0;}.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;transition: opacity 2s linear;}/style
/headbodydiv classtooltip工具元素span classtooltiptext搜索后如有匹配内容高亮请清空搜索框消除高亮以免高亮标记被笔记保存。/spaninput typetext placeholder搜索.../divspan相邻元素/spanbrdiv下方的元素/div/body/html
页面效果如下
