学习
实践
活动
工具
TVP
写文章

css效果

/*图片变灰色*/ img { filter: grayscale(100%); } /*去除边距*/ display: inline-block; /*图片触摸放大效果*/ img { -webkit-transition

17110

css背景阴影部分效果【样式效果

持续更新 文字效果阴影 ? text-shadow: 5px 5px 5px #0000CC;/*右偏移 下偏移 阴影背景模糊*/ 块阴影 ?

88020
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS毛玻璃效果

    V站笔记 其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。 : 从这个失败的例子我们得到两个结论: 对元素直接使用模糊会将其内容全部模糊掉,为了保证文字不会模糊掉需要多一个层单独应用模糊效果效果: 接下来给content::after设置相同的背景图。 ,美中不足的是在元素的边缘模糊的效果减弱了。 为了解决这个问题,我们将伪元素的范围扩大一些,同时为了效果不超出content的范围,给其设置overflow:hidden属性。

    95720

    css抖动效果

    HTML: 1 <button class="shake">按钮</button> CSS: 1 .shake{ 2 width: 120px; 3 height: 33px

    1.4K10

    图片选中效果 css

    一、图片选中效果图: image.png 二、CSS <style> .pic_box{ width:900px;} .pic_box li{ width:204px; height:154px <script> $(".show_pic").click(function(){ if($(this).parent().find(".dele_pic").css ("display") == "none"){ $(this).parent().css("border-color","#33FF00").find(".dele_pic ").show(); }else{ $(this).parent().css("border-color","#fff").find(".dele_pic

    1.3K31

    CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; background-color

    13330

    CSS实现图形效果

    CSS实现图形效果 CSS实现正方形、长方形、圆形、半圆、椭圆、三角形、平行四边形、菱形、梯形、六角星、五角星、心形、消息框。 正方形

    <style type="text/<em>css</em>"> #square{ width : #4C98F7; } </style> 长方形
    <style type="text/<em>css</em> DOCTYPE html> <html> <head> <title><em>CSS</em>实现图形<em>效果</em></title> <style type="text/css"> section{ /the-shapes-of-css/ https://www.w3cplus.com/css/create-shapes-with-css

    25460

    css实现动态效果

    css实现动态效果 个人头像悬停特效 效果图: ? 代码示例: <! CSS3渐变背景 <! </title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/<em>css</em>/ionicons.min.<em>css</em> 0%~2% 停留<em>效果</em> 2%~20% 淡出<em>效果</em> 20%~22% 淡入时的层级要高于淡出时的层级 ? 淡入<em>效果</em> 0%~2% 2. 停留<em>效果</em> 2%~20% 3.

    1K31

    CSS实现吸附效果

    前言 「吸附效果」就是网页滚到到某个位置,元素固定在该位置,后续不随网页滚动而滚动。吸附效果很常见,譬如吸顶效果和吸底效果,经常用在跟随导航、移动广告和悬浮提示等场景中。 原理 在jQuery时代就有很多吸附效果插件了,现在常用的三大前端框架也有自身第三方的吸附效果组件。 JS实现吸附效果的代码在网上一搜一大堆,更何况笔者喜欢耍CSS,在此就不贴相关的JS代码了。本文为各位同学推荐一个很少见很少用的CSS属性:position:sticky。 简单的「两行CSS核心代码」就能完成「十多行JS核心代码」的功能,何乐而不为呢。 实现 简单回顾position常用的值,怎样用就不说了,各位同学应该都熟透了。 两行CSS核心代码分别是position:sticky和top/bottom:npx。

    1.3K20

    CSS实现简易翻书效果

    38820

    CSS + HTML导航栏效果

    今天写了一个导航栏,需要的效果如下: 实现的代码思路如下: <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <style type="text/<em>css</em> new.png" alt="new"> 企业VI 案例展示 联系我们

    </body> </html> 实现的效果如下

    18020

    CSS 实现波浪效果

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 ? 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法。 ? 当然,借助其他力量(SVG、CANVAS),是可以很轻松的完成所谓的波浪效果的,先看看,非 CSS 方式实现的波浪效果。 使用 SVG 实现波浪效果 借助 SVG ,是很容易画出三次贝塞尔曲线的。 纯 CSS 实现波浪效果 好,接下来才是本文的重点!使用纯 CSS 的方式,实现波浪的效果。 你 TM 在逗我?刚刚不是还说使用 CSS 无能为力吗? ? 因为 中间高,两边低的效果不符合物理学原理,看上去十分别扭; 可以点进去看看下面这个例子: CodePen Demo -- pure css wave 使用纯 CSS 实现波浪进度图 好,既然掌握了这种方法 CodePen Demo -- Pure Css Wave Loading 虽然效果差了一点点,但是相较于要使用学习成本更高的 SVG 或者 CANVAS,这种纯 CSS 方法无疑可使用的场景更多,学习成本更低

    1.4K40

    CSS】骨架屏 Skeleton 效果

    现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方式预告将会有内容载入,从而提升用户体验: 这个效果中文叫作骨架屏,英文叫 Skeleton,今期会跟大家分享在 CSS 上实现这个效果的方法 CSS 的部分 去到 CSS 的部份,先处理好这张卡的样式。 这样就可以通过 background-position 控制背景的位移,从而达到扫光的效果。 可以看到扫光效果已出现了,我想它扫入的时候快一点,间隔时间稍多一点,可以直接将原来的 background-position-x 更改为更大的值,例如 180%,这样背景就因为需要移动更长的距离,从而达到效果 我们来看看这个案例的完成效果 这里介绍了用 CSS 编写骨架屏效果的方法,大家在实际应用中,只需要在数据载入的时候,为容器加上 loading 这个 class;而在数据载入完成后,将数据显示到指定位置

    44340

    CSS实现渐隐渐现效果

    CSS实现渐隐渐现效果 实现渐隐渐现效果是比较常见的一种交互方式,通常的做法是控制display属性值在none和其它值之间切换,虽说功能可以实现,但是效果略显生硬,所以会有这样的需求——希望元素消失时具有平滑的效果 ,使用transitionend事件监听过渡完成之后隐藏元素,此外对于opacity属性,可以利用其透明的视觉效果制作点击劫持攻击。 DOCTYPE html> <html> <head> <title>opacity</title> <style type="text/<em>css</em>"> .page{ 3s,然后再瞬间隐藏,从显示到最终消失视线中的时间确实3s,只不过并不是逐渐过渡出现的,所以通常为了实现过渡效果,我们与opacity一起使用来完成过渡效果。 DOCTYPE html> <html> <head> <title>opacity</title> <style type="text/<em>css</em>"> .page{

    1.7K20

    css中的动画效果

    在前端中,随着语言的发展,css变得越来越强大,可以实现许多动态动画效果! 下面是动画效果的基本格式 <style> @keyframes move { 0% { transform: translate(0, 0); 动画属性非常多,是好事,说明它的功能很大,对于我们写网站方便实现更多的效果。 ?

    26230

    CSS 毛玻璃效果 💎

    如果你希望在一个复杂的背景上添加文字,文字能清晰展示,并尽可能的保留原背景的话,使用毛玻璃的效果去处理是非常合适的。 本文主要讲解背景毛玻璃效果,也会讲讲文字如何做出模糊效果。 如果你懒得写代码,也可以使用 《这18个网站能让你的页面背景炫酷起来》 里面提到的 Glass Morphism 网站直接生成毛玻璃效果。 在 CSS 中,想要实现模糊效果,可以使用 滤镜 。背景通常设置成黑色、灰色或者白色,然后再设置一下背景的不透明度就能实现一个简单的毛玻璃效果。 有了它就实现了毛玻璃的基本效果。 最后加上 box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3); 让毛玻璃与背景之间产生一点阴影,看起来会更自然。 文字毛玻璃 文字版的毛玻璃效果其实也是一个模糊效果。 这个案例是鼠标移入文字时,文字变清晰;鼠标移出后变模糊。也是 纯CSS 可以做出来的。

    43430

    CSS实现居中效果

    width: 200px; background: black; padding: 20px; color: white; } 无论父级容器和块级元素的宽度如何变化,都不会影响块级元素的居中效果 如果你在使用过程中发现这种方法没见效,那么你可以通过 CSS 为文本设置一个类似 table-cell 的父级容器,然后使用 vertical-align 属性实现垂直居中:

    <tr

    CSS实现小箭头效果

    项目中要使用小箭头时我们一般引入字体图标,但其实css3也可以画出一个小箭头主要利用了tranform的rotate 我们的小箭头的原型是一个正方形,我们只保留正方形底部和右边区域在使其旋转45度即可 </style> </head> <body>

    </body> </html> 效果如下

    14510

    CSS之创意hover效果

    一.发送效果 HTML

    CSS #send-btn } 50% { transform: translateX(300%); } 100% { transform: translateX(0); } } 二.霓虹效果 <button class="btn two">Hover me</button> <button class="btn three">Hover me</button>
    CSS HTML
    <button>Hover me</button>
    CSS #draw-border { display: flex; HTML
    <button>Hover me</button>
    CSS #border-btn { display: flex;

    29220

    扫码关注腾讯云开发者

    领取腾讯云代金券