Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 CSS常用的几个简单效果

CSS常用的几个简单效果

发布时间:2020-05-08   编辑:www.jquerycn.cn
jquery中文网为您提供CSS常用的几个简单效果等资源,欢迎您收藏本站,我们将为您提供最新的CSS常用的几个简单效果资源
下面整理了3个CSS常用效果,其中就有CSS中简单的运算 文字模糊 创建高宽比固定的元素三种例子,有兴趣的可进入参考。

最近翻阅网上资料,查到了一些自己从未用过的CSS,于是记录下来,在有些时候兴许能用得上。

1、CSS中简单的运算

我们通常用css指定的是静态的结果,而动态结果,如高度,位置等等则需要js来动态进行计算赋值,而其实css自己也能够进行简单的运算,主要是用到了calc这个函数。

.div{ width: calc(100% - 50px); }

2、使用CSS实现文字模糊效果

在PS中我们可以使用滤镜让面前的文字看起来很模糊,这和透明度还不一样,在css中我们也可以实现。

p{ color: transparent; text-shadow: #111 0 0 5px; }

3、使用CSS创建高宽比固定的元素

在前端开发中,尤其是在写响应式布局网页的时候,我们总想要里面的元素保持同样的高宽比,这样可以避免元素变形,而要达到这种目的,我们可以通过给父级元素底部的内边距和子元素绝对定位来实现。

<div style="width: 100%; position: relative; padding-bottom: 20%;">
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:#ccc;">
        这里面的文字会随着这个div的变化而折行
    </div>
</div>

大家可以去试试,找出更多的CSS效果。

CSS3滤镜让图标变灰

首先上html代码:

<a href='' class='icon'><img src='01.jpg' /></a>
css代码:

.icon{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);   
filter: grayscale(100%);
filter: gray;
}
.icon:hover{
filter: none;
-webkit-filter: grayscale(0%);
}

这样我们就只需要上传一张彩色的图片就能实现鼠标移入变彩色,移出变灰的效果。

text-overflow:ellipsis实现省略号效果

使用这个css样式很简单,只需要三句代码,举例,我们给我们的h3标签添加这个属性:

h3{text-overflow:ellipsis; //省略号形式
    white-space:nowrap;   //所有字符一行显示
    overflow:hidden;      //溢出隐藏
}
需要注意的是,这三句代码缺一不可,不然达不到想要的效果。注意:使用这个属性的元素要给固定宽度,不然怎么会溢出呢。

您可能感兴趣的文章:
jQuery表单美化插件 Uniform
分享几个超级震憾的图片特效
使用jquery给input和textarea设定ie中的focus
一些有用的JavaScript和jQuery的片段分享
一次失败的jQuery优化尝试小结
jQuery实现的类flash菜单效果代码
jQuery图像边框插件 Inset Border Effect
初窥JQuery-Jquery简介 入门了解篇
初窥JQuery(一)jquery选择符 必备知识点
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程

[关闭]