- 综合排序
- 最热优先
- 最新优先
- 来自专栏itclanCoder
纯CSS3实现2个的鼠标悬停文本下划线动画效果
relative; text-decoration: none; display: inline-block; color: black; padding: 0 1px; -webkit-transition 1; width: 100%; height: 5%; left: 0; bottom: 0; background-color: #00B388; -webkit-transition z-index: -1; height: 5%; } .link-2::before { width: 0%; left: 0; bottom: 0; -webkit-transition transition: width ease 0.4s; } .link-2::after { width: 100%; left: 0; bottom: 0; -webkit-transition link-2:hover::before { width: 100%; } .link-2:hover::after { left: 100%; width: 0%; -webkit-transition
72630编辑于 2023-09-14 - 来自专栏全栈程序员必看
css transition ease,css3 transition属性「建议收藏」
/ -o-: /*opera*/ 如下，举个例子，代码示例： 个人网站首页 .block{ width:400px; height:400px; background-color:blue; -webkit-transition width: 40px; height: 40px; background-color: blue; } .progress-bar:hover{ width: 960px; } #bar1{ -webkit-transition : width 3s ease; } #bar2{ -webkit-transition: width 3s linear; } #bar3{ -webkit-transition: width 3s ease-in; } #bar4{ -webkit-transition: width 3s ease-out; } #bar5{ -webkit-transition: width 3s background-color: blue; margin: 0 auto; -webkit-transform:rotateX(45deg); } .hw-cbg.on p{ padding:0px 0 0 30px; -webkit-transition
97520编辑于 2022-09-15 - 来自专栏小狼的世界
CSS3 Transition介绍
width:80%; padding:15px; font-size:14px; color:#fff; background-color:#ED8029; border-radius:5px; -webkit-transition 50px; border-radius:5px; background-color:#08c; left:0px; top:0px; position:absolute; margin:15px; -webkit-transition text-align: right; border-radius: 5px; } #ExampleB:hover div { width: 500px; } #ExampleB div.ease { -webkit-transition ease; -o-transition: 3s ease; -ms-transition: 3s ease; transition: 3s ease; } #ExampleB div.linear { -webkit-transition o-transition: 3s linear; -ms-transition: 3s linear; transition: 3s linear; } #ExampleB div.easein { -webkit-transition
67720发布于 2018-07-25 - 来自专栏蚂蚁开源社区
3种CSS3移动手机隐藏菜单UI界面代码解析/附源码下载
div.menu { height: 568px; width: 320px; margin-left:-190px; opacity:0; position:relative; -webkit-transition #menu-bg{ position: absolute; left: -10px; top: -120px; opacity: 0.3; -webkit-transition: all 500ms cubic-bezier color:#fff; text-decoration:none; letter-spacing:1px; } div.menu.animate ul li { margin-left:80px; -webkit-transition width:320px; height:560px; overflow:hidden; position:absolute; top:0px; left:0px; background:#31558a; -webkit-transition transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } div.screen.animate{ left:254px; -webkit-transition
1.1K20发布于 2019-08-12 - 来自专栏前端说吧
一个有趣的鼠标移上去的动画-整理
: none; 9 display: block; 10 padding: 10px 20px; 11 border: 1px solid #dedede; 12 -webkit-transition 28 width: 0; 29 height: 0; 30 } 31 .animate li a:before { 32 bottom: 0; 33 right: 0; 34 -webkit-transition 0.2s ease-in 0.2s,height 0.2s ease-in; 36 } 37 .animate li a:after{ 38 top: 0; 39 left: 0; 40 -webkit-transition animate li a:hover:before { 48 border-bottom-color: #367dff; 49 border-left-color: #367dff; 50 -webkit-transition .animate li a:hover:after { 54 border-top-color: #367dff; 55 border-right-color: #367dff; 56 -webkit-transition
1K60发布于 2018-05-17 - 来自专栏CSDN专栏
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
300px; margin: 100px auto; background-color: #900; /*transition:background-color 1s ease .2s; -webkit-transition : width 5s linear; } #bar2{ -webkit-transition: width 5s ease; } #bar3{ -webkit-transition: width 5s ease-in; } #bar4{ -webkit-transition: width 5s ease-out; } #bar5{ -webkit-transition: width linear; transition-delay:1s;*/ transition:all 3s ease-in; /*transition:all 1s ease-in .1s;*/ /* -webkit-transition
23610编辑于 2025-10-13 CSS 鼠标悬停图片，显示隐藏文本
filter: Alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; padding: 20px; -webkit-transition color: #fff; font-size:18px; text-align: center; position: relative; left: -500px; -webkit-transition line-height: 25px; font-size:14px; color: #fff; position: relative; left: -500px; -webkit-transition
9.8K40编辑于 2024-03-16- 来自专栏前端说吧
CSS3-实现单选框radio的小动画
transform: scale(0); -moz-transition: transform .5s ease-out; -webkit-transition transform: scale(1); -moz-transition: transform .5s ease-out; -webkit-transition -o-transform-origin: -10px 50%; transform-origin: -3px 50%; -webkit-transition radio2 input[type="radio"]:checked + label{ background-color: #4169E1; -webkit-transition -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition
1.1K30发布于 2018-05-17 - 来自专栏又见苍岚
Fluid -33- 添加书信人偶动画效果
text-shadow:0 1px 0 #ede8d9; } #form_wrap { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition #9d9d9d, inset 0px 0px 14px #fff; -webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff; -webkit-transition cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition : opacity .6s ease-in-out 0s; } #form_wrap:hover input[type=submit] {z-index:1;opacity:1; -webkit-transition
45620编辑于 2023-02-21 - 来自专栏小轻论坛
光标有反转效果的侧边导航（附源代码）
background-position: center; background-repeat: repeat; background-size: 4%; overflow-x: hidden; -webkit-transition ) translateY(-50%); pointer-events: none; left: -100px; top: 50%; mix-blend-mode: difference; -webkit-transition 0; width: 0; z-index: 99999; } .cursor2,.cursor3{ height: 36px; width: 36px; z-index:99998; -webkit-transition background-color .5s ease, -webkit-transform .2s ease; } .menu-icon__line-left { width: 16.5px; -webkit-transition linear; transition: all 200ms linear; } .menu-icon__line-right { width: 16.5px; float: right; -webkit-transition
53810编辑于 2024-10-10 - 来自专栏大前端（横向跨端 & 纵向全栈）
Vue组件设计-文字悬停特效
> .link-obj { font-weight: 800; color: #4dd9d5; font-family: "Dosis", sans-serif; -webkit-transition inline-block; line-height: 1; outline: none; text-decoration: none; } .link-obj:hover { -webkit-transition 50%; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition data-letters); color: red; position: absolute; left: 0; width: 100%; color: #3888fa; -webkit-transition
1.6K10编辑于 2023-05-07 - 来自专栏蚂蚁开源社区
CSS3导航菜单背景模糊特效代码解析/源码下载
transparent; display: block; text-transform: uppercase; text-shadow: 0px 0px 5px #fff; letter-spacing: 1px; -webkit-transition ms-transform: scale(0.5); -o-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transition color: #eeb213; padding: 5px 20px; margin: 2px; background: rgba(0,0,0,0.7); letter-spacing: 1px; -webkit-transition color: #fff; padding: 5px 20px; margin: 2px; background: rgba(255,255,255,0.2); letter-spacing: 1px; -webkit-transition 500px; height: 400px; -webkit-border-radius: 250px; -moz-border-radius: 250px; border-radius: 250px; -webkit-transition
2.1K10发布于 2019-08-12 - 来自专栏前端Q
5个很常用的CSS3网页小实例
color:#fff; font-size:24px; text-align:center; line-height:40px; cursor:pointer; -webkit-transition 200px; outline:none; text-indent:12px; color:#666; font-size:16px; padding:0; -webkit-transition ; color:#fff; text-indent:25px; opacity:0; -webkit-transform-origin:8% center; -webkit-transition 30px; text-align: center; color:#fff; position:absolute; top:2px; opacity:0; -webkit-transition solid lightgreen; border-radius:50%; position: absolute; top:-70px; left:-70px; -webkit-transition
62610发布于 2020-09-22 - 来自专栏thinkphp+vue
家园通用网站背景特效代码
<style> body{ background-color: #00c1ff; -webkit-transition: background-color 400ms ease-in-out min-width: 1024px; min-height: 100%; } #output { opacity: 0.3; width: 100%; height: 100%; -webkit-transition position: fixed; top: 10px; left: 50%; margin-left: -70px; border: solid 0px #BBBBBB; -webkit-transition
2.4K20发布于 2021-05-07 - 来自专栏技术社区
CSS3 动画，鼠标移上去，div 旋转、放大、缩小、移动
修改rotate(旋转度数)*/ .img1 { transition: All 0.4s ease-in-out; -webkit-transition scale(放大缩小的值)*/ .img2 { transition: All 0.4s ease-in-out; -webkit-transition 旋转度数) scale(放大值)*/ .img3 { transition: All 0.4s ease-in-out; -webkit-transition translate(x轴,y轴)*/ .img4 { transition: All 0.4s ease-in-out; -webkit-transition justify-content: space-around; align-items: center; transition: All 0.4s ease-in-out; -webkit-transition
4.7K20编辑于 2022-06-17 - 来自专栏业余草
HTML5环形音乐播放器
147deg); filter: blur(1px); -webkit-filter: blur(1px); transition: all .5s ease-in-out; -webkit-transition 100%; height: 100%; background: #fff; opacity: .75; transition: .3s all ease-in-out; -webkit-transition .cover, .to-lyrics-label, .to-back-label { opacity: .3; transition: all .3s ease-in-out; -webkit-transition #26C5CB; } #play-pause { width: 46px; height: 46px; transition: all .5s ease-in-out; -webkit-transition : scroll; box-shadow: inset 0 -3px 5px 0 rgba(0,0,0,.5); transition: all .5s ease-in-out; -webkit-transition
5.5K30发布于 2019-01-21 - 来自专栏棒棒小飞人
HTML5环形音乐播放器
); -webkit-filter: blur(1px); transition: all .5s ease-in-out; -webkit-transition .to-back-label { opacity: .3; transition: all .3s ease-in-out; -webkit-transition text-shadow: 1px 1px 3px #000; transition: all .3s ease-in-out; -webkit-transition webkit-backface-visibility: hidden; transition: transform .5s ease-in-out; -webkit-transition webkit-transform: translateY(300px); transition: transform .5s ease-in-out .3s; -webkit-transition
2.8K40发布于 2021-09-27 - 来自专栏站长的编程笔记
【说站】css渐进增强和优雅降级的区别
实例 .transition { /*渐进增强写法*/ -webkit-transition: all .5s; -moz-transition: all .5s; 优雅降级写法*/ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition
50510编辑于 2022-11-23 - 来自专栏葡萄城控件技术团队
Web页面中5种超酷的Hover效果
CSS代码： .ex1 img{ border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition 300px; margin: 0 auto; } #ex2 img{ height: 100px; width: 300px; margin: 15px 0; -webkit-transition "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; -webkit-transition 0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition : 300px; } #ex5 img { margin: 25px; opacity: 0.8; border: 10px solid #eee; /*Transition*/ -webkit-transition
2.3K100发布于 2018-01-10 - 来自专栏appuploader使用操作流程
开心档之CSS3 过渡入门篇
实例应用于宽度属性的过渡效果，时长为 2 秒：div{ transition: width 2s; -webkit-transition: width 2s; /* Safari */}注意 多项改变要添加多个样式的变换效果，添加的属性由逗号分隔：实例添加了宽度，高度和转换效果：div{ transition: width 2s, height 2s, transform 2s; -webkit-transition }实例与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：div{ transition: width 1s linear 2s; /* Safari */ -webkit-transition
68710编辑于 2023-02-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号