CSS实现脉冲和阴影详细代码介绍 _前端开发

本文概述脉冲：用于引起注意具有这种微妙但引人入胜的效果的按钮。只需向按钮添加脉冲类。
注意：这仅用于浮动按钮, 因为它不适用于其他组件。

< aclass="btn浮动脉冲"> < i class ="材料图标"> 电池警报< / i> < /a> < aclass="btn浮动btn大脉冲"> < i class ="材料-icons"> arrow_downward < / i> < /a> < a class="btn-floating btn-large cyan pulse"> < i class =" material-icons"> 编辑< / i> < /a>

例子：
的HTML

< !DOCTYPE html> < html > < head > < !--Import Google Icon Font--> < link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" > < !-- Compiled and minified CSS --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" > < style > .margin { margin: 30px 0px; } < / style > < !--Let browser know website is optimized for mobile--> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < / head > < body class = "container" > < div class = "row center-align" > < h2 > Pulse< / h2 > < div class = "col s6 margin " > < a class="btn btn-floating btn-large pulse"> < i class = "material-icons" > menu < / i > < / a > < / div > < div class = "col s6 margin" > < a class="btn btn-floating btn-large light-green pulse"> < i class = "material-icons" > account_circle < / i > < / a > < / div > < div class = "col s6 margin" > < a class="btn btn-floating btn-large green pulse"> < i class = "material-icons" > edit < / i > < / a > < / div > < div class = "col s6 margin" > < a class="btn btn-floating btn-large green pulse"> < i class = "material-icons" > notifications < / i > < / a > < / div > < / div > < !-- Compiled and minified JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" > < / script > < / body > < / html >

【CSS实现脉冲和阴影详细代码介绍】输出如下：

文章图片
阴影：为了确定元素离页面的高度或距离, Materialize使用阴影效果。为了这class =" z-depth-1"用来。根据阴影效果, 有五个类别, 从class =" z-depth-1"toclass =" z-depth-5"。

< div class="col s12 m2"> < p class="z-depth-1"> For z-depth-1< /p> < /div> < div class="col s12 m2"> < p class="z-depth-2"> For z-depth-2< /p> < /div> < div class="col s12 m2"> < p class="z-depth-3"> For z-depth-3< /p> < /div> < div class="col s12 m2"> < p class="z-depth-4"> For z-depth-4< /p> < /div> < div class="col s12 m2"> < p class="z-depth-5"> For z-depth-5< /p> < /div>

例子：
的HTML

< !DOCTYPE html> < html > < head > < !--Import Google Icon Font--> < link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" > < !-- Compiled and minified CSS --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" > < !--Let browser know website is optimized for mobile--> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < / head > < body class = "container" > < div class = "row center-align" > < h2 > Shadow< / h2 > < div class = " col s3 m2 " > < h4 class = "z-depth-1 green" > Geeks for Geeks < / h4 > < / div > < div class = " col s3 m2" > < h4 class = "z-depth-2 green" > Geeks for Geeks < / h4 > < / div > < div class = " col s3 m2" > < h4 class = "z-depth-3 green" > Geeks for Geeks < / h4 > < / div > < div class = " col s3 m2" > < h4 class = "z-depth-4 green" > Geeks for Geeks < / h4 > < / div > < div class = " col s3 m2" > < h4 class = "z-depth-5 green" > Geeks for Geeks < / h4 > < / div > < !-- Compiled and minified JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" > < / script > < / div > < / body > < / html >

输出如下：