比较好用的6个前端HTML+CSS特效
这篇文章将为大家详细讲解有关比较好用的6个前端HTML+CSS特效,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
网站建设哪家好,找成都创新互联!专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了江源免费建站欢迎大家使用!
css的基本语法是什么
css的基本语法是:1、css规则由选择器和一条或多条声明两个部分构成;2、选择器通常是需要改变样式的HTML元素;3、每条声明由一个属性和一个值组成;4、属性和属性值被冒号分隔开。
1.图片慢慢靠近
当我们在看图片时,可能觉得图片有点小,那我们就给用户一种体验,当用户把鼠标移入时,图片慢慢变大。
知识点:
CSS3之“过渡”:transition()----定义如何放大图片和放大过程的时间
CSS3之“2D转换”:transform:scale()----放大图片
CSS3之“溢出”:overflow:hidden----当图片放大时,溢出要隐藏
代码:
2.给放大的图片加特效
知识点:
1. CSS之“filter”。
2. CSS灰色滤镜:grayscale()
3. CSS深褐色滤镜:sepia()
代码:
.imgDiv{ width:300px; overflow: hidden; border:5px solid rgba(0,0,0,0.6); box-sizing: border-box; display: flex; flex:auto; margin-top:100px; margin-left:100px; } .imgDiv img{ width:300px; filter:grayscale(100%);<-新增-> } .imgDiv img:hover{ transform:scale(1.1) ; transition: 0.5s linear; filter:grayscale(0);<-新增-> }
效果图:
3.软件的白天与黑夜模式
知识点:
1、CSS之滤镜:invert()—将图片颜色反转,当图片颜色为白色时,invert(0)为白;invert(1)为黑;反之。
白天模式