CSS learnning._html/css_WEB-ITnose
程序员文章站
2022-04-13 08:18:22
...
"Whenever this property changes, apply that change slowly."
The property transition: width 2s says “when the width changes, animate it over the course of 2 seconds.”
transition: all 0.5s says “when anything changes, spend 0.5s doing it.”
So if you want to round the corners of a button when it’s hovered?
/* Initial state: border-radius is 0. * When border-radius changes, it'll take 0.3s * instead of happening immediately */button { border-radius: 0; transition: border-radius 0.3s; /* any other styles you need ... */}button:hover { border-radius: 20px;}
Here’s the button:
1 .demo-button { transition: border-radius 0.3s; 2 border: 1px solid dodgerblue; background-color: #fff; 3 border-radius: 0; padding: 1em; color: dodgerblue; } 4 .demo-button:hover { border-radius: 20px; }
上一篇: window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法_javascript技巧
下一篇: CSS四中方法实现垂直居中
推荐阅读
-
如何组织css,写出高质量的css代码_html/css_WEB-ITnose
-
每个Web开发者都需要具备的9个软技能_html/css_WEB-ITnose
-
CSS ul li a 背景图片与文字对齐_html/css_WEB-ITnose
-
HTML5拖拽功能drag_html/css_WEB-ITnose
-
CSS的link和@import的区别_html/css_WEB-ITnose
-
css知识_html/css_WEB-ITnose
-
Css样式兼容IE6,IE7,FIREFOX的写法_html/css_WEB-ITnose
-
CSS3 -webkit-transition_html/css_WEB-ITnose
-
CSS3阴影 box-shadow的使用和技巧总结_html/css_WEB-ITnose
-
是怎么用的?_html/css_WEB-ITnose