分类 CSS 的文章 累计 16 条

dhso dhso 统计中 2018-06-15 14:05

CSS实现按钮点击水波纹效果

html

<button class="btn btn-default btn-lg ripple">Button Ripple</button>

<button class="btn btn-default btn-lg boom">Button Boom</button>

css

.ripple {
    position: relative;
    //隐藏溢出的径向渐变背景
    overflow: hidden;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    //设置径向渐变
    background-image: radial-gradient(circle, #666 10%, tran
[ 阅读更多 ]
dhso dhso 统计中 2018-05-27 15:24

flex流式布局

每行的项目数固定,会自动分行。

.cards {
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
        .card {
            flex: 0 0 330px;
            box-sizing: border-box;
            height: 300px;
            margin: 10px;
        }
}
[ 阅读更多 ]
dhso dhso 统计中 2017-10-26 17:32

CSS文字霓虹灯效果

效果

html代码

<svg viewBox="0 0 600 300">
    <!-- Symbol -->
    <symbol id="s-text">
    <text text-anchor="middle" x="50%" y="50%" dy=".35em"> 文字 </text>
    </symbol>

    <!-- Duplicate symbols -->
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" cla
[ 阅读更多 ]
dhso dhso 统计中 2017-09-26 10:21

CSS之Filters滤镜

css提供了很多种的滤镜:

* drop-shadow
* sepia
* blur
* hue-rotate
* invert
* brightness
* contrast
* opacity
* grayscale
* saturate

drop-shadow 下落式阴影

添加阴影效果可不只有text-shadow和box-shadow哦,text-shadow是为文字添加阴影,box-shadow给一个元素添加阴影,drop-shadow在图片是非png情况下和box-shadow有些相似,然而png图片才是她大放异彩的地方

拿一张jpg图片来举个栗子看下drop-shadow 和 box-shadow的区别:

//从左往右依次是原图,添加drop-shadow-jpg,添加box-shadow
.drop-shadow-jpg{
    -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));
}
.box-shadow{
    box-shadow: 10px 10px 10px rgba(255,235,59,0.
[ 阅读更多 ]
王佶 王佶 统计中 2017-07-11 11:34

让整个网站变成灰色的做法

方法一,

html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} <!--    可以是整个网站变成灰色的     -->

方法二,

html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); }
  使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。
  如果网站没有使用CSS,可以在网页/模板的HTML代码和 之间插入:

<style>
html{filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style> 

有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
[ 阅读更多 ]
博客介绍
写好程序在于点滴积累,多做笔记!
热评文章
最新评论