CSS3

过渡-盒子切换之鼠标经过背景高亮

源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.fixedtool {width: 100px;height: 300px;margin: 100px auto;}dl {width: 100px;height: 100px;margin-bottom: -1px;background-color: #fff;border: 1px solid #e1251b;cursor: pointer;transition: background-color .6s linear;}dl:hover {background-color: #e1251b;}dl:hover dd:last-child {display: block;color: #fff;}dl dd {color: #e1251b;text-align: center;line-height: 100px;}dl:hover dd:first-child,dl dd:last-child {display: none;}</style>
</head><body><div class="fixedtool"><dl><dd>你好</dd><dd>世界</dd></dl><dl><dd>你好</dd><dd>世界</dd></dl><dl><dd>你好</dd><dd>世界</dd></dl></div><span>123</span>
</body></html>

运行结果：

参考资料：
[1] CSS3 过渡 | 菜鸟教程

CSS3 过渡-盒子切换之鼠标经过背景高亮相关推荐

html 鼠标经过展开,CSS3效果：鼠标悬停背景展开效果
看腻导航栏背景变色的hover效果,我们看一下比较特殊的hover效果. 分析我们观察到,当鼠标悬停在导航栏的项目中,出现从中间向左右展开的背景效果:移开时,又从左右向中间收缩.可以做出如下分析: ...
CSS3过渡延迟总结
CSS3过渡延迟总结 1. 元素状态 2. 过渡实现 2.1 设置哪些属性应用过渡效果 2.2 js过渡完成事件监听API 2.3 设置过渡时间 2.4 控制过渡效果的速度 2.4.1 平滑过渡 2. ...
css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...
target 模拟后台服务器框架集 frameset和body不合,所以如果用frameset就不能有body标签利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显示不 ...
css过渡取消过渡_CSS基础知识：CSS3过渡
css过渡取消过渡随着CSS3在网络上的推广,它带来了一些有趣的新演示技术. 今天,我们将回顾使用CSS3过渡和动画的基础知识,以增加额外的修饰. 本教程包括Tuts + Premium成员可用的 ...
CSS3 弹性盒子和常用标签
CSS3弹性盒子学习目标掌握CSS3弹性盒子的使用方法掌握CSS3弹性盒子的水平分布方法重点掌握CSS3弹性盒子的垂直分布的方法重点掌握CSS3弹性盒子排序的用法 CSS3 弹性盒子属性 ...
html过渡的触发机制是什么,CSS3过渡 transition
之前我们整理了CSS3中的动画属性 Transform 转换,今天我们接着一起来看看CSS3中的另一个动画属性 Transition 过渡. W3C标准中对css3的transition这是样描述的: ...
html简单盒子代码,CSS3 3D盒子超简单制作
这是我第一次在这里写文章,如果写得不好的话,请大家多多包涵一下. 在XX网学完CSS3之后,然后我懂了一个道理,XX网评论区域存在一个小明梗,这个梗是这样的:1+1=2, 2+2=4,问小明今年多少岁 ...
Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果
css3过渡属性: 属性描述 transition-property 检索或设置对象中的参与过渡的属性 transition-duration 检索或设置对象过渡的持续时间 transition-d ...
CSS3过渡小案例：折扇
CSS3过渡小案例:折扇简单应用:利用鼠标经过后盒子阴影和上边距属性的改变,制作一个简单的页面效果小案例:折扇案例 CSS3的过渡效果: 通过 CSS3的过渡效果,我们可以在不使用 Flash ...

CSS3 过渡-盒子切换之鼠标经过背景高亮

CSS3

过渡-盒子切换之鼠标经过背景高亮

CSS3 过渡-盒子切换之鼠标经过背景高亮相关推荐

最新文章

热门文章