CSS常用效果有哪些,实现代码是什么
Admin 2022-07-14 群英技术资讯 544 次浏览
最近翻阅网上资料,查到了一些自己从未用过的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创建高宽比固定的元素
在前端开发中,尤其是在写响应式布局网页的时候,我们总想要里面的元素保持同样的高宽比,这样可以避免元素变形,而要达到这种目的,我们可以通过给父级元素底部的内边距和子元素绝对定位来实现。
大家可以去试试,找出更多的CSS效果。
CSS3滤镜让图标变灰
首先上html代码:
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; //溢出隐藏
}
需要注意的是,这三句代码缺一不可,不然达不到想要的效果。注意:使用这个属性的元素要给固定宽度,不然怎么会溢出呢。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
在css中,点击隐藏的代码为“元素:active{opacity:0;}”;“:active”选择器用于选择元素被点击时的状态并设置样式,opacity属性用于设置元素的不透明级别,也就是当点击元素时,元素隐藏不显示。
在实际的项目中,有时候我们可能会遇到实现css高度随宽度变化的需求,那么这个效果怎么样做呢?这篇文章就给大家分享几个方法,下文有方法的实现原理及示例,需要的朋友可以参考。
这篇文章主要介绍了CSS 阴影动画优化技巧,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
淘宝网页中使用的是import,而很多网站都是使用link,当然还有一些页面比较简单,流量很大的网站,是直接将CSS写在html代码中的?他们有什么区别?css用import还是link好?从经典论坛和另外一个网站大概了解了一下:1、淘宝网页中大部分是这样写的:2、而很多网站使用的都是link:3、而像google百度163等网站他们都是直接写在 ...
html5 output标签是什么意思?html5 output标签的使用方法都在这里,本篇文章介绍了html5 output标签的定义,还有关于html5 output标签的使用方法(附代码实例)
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008