Material Design for Bootstrap_html/css_WEB-ITnose
程序员文章站
2022-05-15 16:18:02
...
简单几行代码,就可以给bs框架添加Material Design风格
效果图:
这是常见的btn加了Material Design效果这里采用的是bootstrap4
引入:bs.css
你可能看到上面多了一个materialDesign属性,对,等下我们就通过这个属性来实现material Design效果
css:
[materialDesign] { display: inline-block; letter-spacing: .8px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; overflow: hidden; z-index: 1;}.animate-hand{ height: 134px; width: 134px; display: block; position: absolute; background: currentColor; opacity: 0.6; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); z-index: 0;}.animate-hand.animate { -webkit-animation: ripple .5s linear; animation: ripple .5s linear;}@-webkit-keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(4.5); transform: scale(4.5); }}@keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(4.5); transform: scale(4.5); }}
js:
(function() { for (var i = 0, btn; btn = document.querySelectorAll('[materialDesign]')[i++];) { btn.addEventListener('click', function(e) { var tag = this; if (this.getAttribute('materialDesign') === undefined) { tag = this.parentNode; } var div = tag.querySelector(".animate-hand"); if (!div) { div = document.createElement("div"); tag.appendChild(div); } div.className = 'animate-hand'; var x = e.pageX; var y = e.pageY; var left = tag.offsetLeft; var top = tag.offsetTop; var height = div.offsetHeight; var width = div.offsetWidth; div.className = ""; div.style.left = x - left - width / 2 + "px"; div.style.top = y - top - height / 2 + "px"; div.className = "animate-hand animate"; }); }})();
搞定,只要在任意一个标签上添加materialDesign属性,即可实现该效果
更多特效后续上传。
推荐阅读
-
使用CSS3 制作一个material-design 风格登录界面实例
-
C# WPF之Material Design自定义颜色
-
C# WPF过渡效果实现(C# WPF Material Design UI: Transitions)
-
安卓开发笔记(三十四):Material Design框架实现优美的左侧侧滑栏
-
C# WPF抽屉效果实现(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)
-
Android Material Design控件使用(一)——ConstraintLayout 约束布局
-
Material Design使用知识点(AppTheme、ToolBar、Menu、设置点击事件)
-
《Android进阶之光》--Material Design
-
学习使用Material Design控件(二)使用DrawerLayout实现侧滑菜单栏效果
-
学习使用Material Design控件(三)使用CardView实现卡片效果