返回顶部
首页 > 资讯 > 精选 >如何使用css实现自适应标题浮动效果
  • 716
分享到

如何使用css实现自适应标题浮动效果

2023-06-14 13:06:54 716人浏览 八月长安
摘要

这篇文章主要介绍了如何使用CSS实现自适应标题浮动效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。本篇文章通过代码实例给大家介绍一下css实现自适应标题浮动效果的方法。有一

这篇文章主要介绍了如何使用CSS实现自适应标题浮动效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

本篇文章通过代码实例给大家介绍一下css实现自适应标题浮动效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

效果展示:

如何使用css实现自适应标题浮动效果

源码展示:

<!doctype html><html><head><meta charset="utf-8"><title>纯css实现自适应标题浮动效果</title>     <style>        body {            background-color:#FAFAFA;        }         input[type="text"] {    -WEBkit-box-sizing:border-box;    -moz-box-sizing:border-box;    box-sizing:border-box;    width:100%;    height:-webkit-calc(3em + 2px);    height:calc(3em + 2px);    margin:0 0 1em;    padding:1em;    border:1px solid #cccccc;    border-radius:1.5em;    background:#fff;    resize:none;    outline:none;}input[type="text"][required]:focus {    border-color:#00bafa;}input[type="text"][required]:focus + label[placeholder]:before {    color:#00bafa;}input[type="text"][required]:focus + label[placeholder]:before,input[type="text"][required]:valid + label[placeholder]:before {    -webkit-transition-duration:.2s;    transition-duration:.2s;    -webkit-transfORM:translate(0,-1.5em) scale(0.9,0.9);    -ms-transform:translate(0,-1.5em) scale(0.9,0.9);    transform:translate(0,-1.5em) scale(0.9,0.9);}input[type="text"][required]:invalid + label[placeholder][alt]:before {    content:attr(alt);}input[type="text"][required] + label[placeholder] {    display:block;    pointer-events:none;    line-height:2.3em;    margin-top:-webkit-calc(-3em - 2px);    margin-top:calc(-3em - 2px);    margin-bottom:-webkit-calc((3em - 1em) + 2px);    margin-bottom:calc((3em - 1em) + 2px);}input[type="text"][required] + label[placeholder]:before {    content:attr(placeholder);    display:inline-block;    margin:0 -webkit-calc(1em + 2px);    margin:0 calc(1em + 2px);    padding:0 2px;    color:#898989;    white-space:nowrap;    -webkit-transition:0.3s ease-in-out;    transition:0.3s ease-in-out;    background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ffffff));    background-image:-webkit-linear-gradient(top,#ffffff,#ffffff);    background-image:linear-gradient(to bottom,#ffffff,#ffffff);    -webkit-background-size:100% 5px;    background-size:100% 5px;    background-repeat:no-repeat;    background-position:center;}</style></head><body><div style="width:400px;height:100px;margin:50px auto"><form><input required="" type="text"><label alt="请输入用户名" placeholder="名称"></label></form></div></body></html>

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用css实现自适应标题浮动效果”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网精选频道,更多相关知识等着你来学习!

--结束END--

本文标题: 如何使用css实现自适应标题浮动效果

本文链接: https://www.lsjlt.com/news/271056.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何使用css实现自适应标题浮动效果
    这篇文章主要介绍了如何使用css实现自适应标题浮动效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。本篇文章通过代码实例给大家介绍一下css实现自适应标题浮动效果的方法。有一...
    99+
    2023-06-14
  • Android自定义ViewGroup实现标签浮动效果
    前面在学习鸿洋大神的一些自定义的View文章,看到了自定义ViewGroup实现浮动标签,初步看了下他的思路以及结合自己的思路完成了自己的浮动标签的自定义ViewGroup。目...
    99+
    2022-06-06
    动效 标签 Android
  • css3如何实现鼠标悬浮停止动画效果
    小编给大家分享一下css3如何实现鼠标悬浮停止动画效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 在css中,可以利用“:hover”选择器和“animat...
    99+
    2024-04-02
  • 如何使用CSS实现自适应分隔线
    小编给大家分享一下如何使用CSS实现自适应分隔线,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! CSS实现自适应分隔线的N种方...
    99+
    2024-04-02
  • CSS怎么实现自动转化为大写的自适应菜单效果
    本篇内容主要讲解“CSS怎么实现自动转化为大写的自适应菜单效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS怎么实现自动转化为大写的自适应菜单效果”吧!这...
    99+
    2024-04-02
  • vue如何实现鼠标悬浮框效果
    这篇文章将为大家详细讲解有关vue如何实现鼠标悬浮框效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下效果:html:<div  @mouseenter="...
    99+
    2023-06-29
  • js如何实现鼠标悬浮框效果
    这篇文章主要介绍了js如何实现鼠标悬浮框效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下<!DOCTYPE html><html&n...
    99+
    2023-06-29
  • 如何在Android应用中使用ScrollView实现悬浮效果
    如何在Android应用中使用ScrollView实现悬浮效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。新建一个Android项目,<&#63;xml v...
    99+
    2023-05-31
    android scrollview roi
  • 如何使用css实现清除浮动
    这篇文章主要介绍如何使用css实现清除浮动,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!清除浮动的方法:1、父级div定义height,语法“height:高度”;2、结尾处加空div并设置“clear:both”样...
    99+
    2023-06-14
  • 如何使用css实现浮动布局
    这篇文章主要为大家展示了“如何使用css实现浮动布局”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用css实现浮动布局”这篇文章吧。浮动布局<!DOCTYPE html&g...
    99+
    2023-06-06
  • threeJs如何实现波纹扩散及光标浮动效果
    这篇“threeJs如何实现波纹扩散及光标浮动效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“threeJs如何实现波纹扩...
    99+
    2023-07-05
  • 如何使用CSS实现三栏自适应布局
    这篇文章将为大家详细讲解有关如何使用CSS实现三栏自适应布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 基于传统的position和margin等属性进行布局这里也分为三种方法,分别为绝对定位法,...
    99+
    2023-06-08
  • 如何使用CSS3按钮鼠标悬浮实现光圈效果
    小编给大家分享一下如何使用CSS3按钮鼠标悬浮实现光圈效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1 、HTML相关知识点...
    99+
    2024-04-02
  • 如何使用纯CSS实现类似悬浮窗口的效果
    悬浮窗口是在网页设计中经常使用的一种效果,它可以提供快速访问功能或者展示重要的信息。本文将介绍如何使用纯CSS来实现类似悬浮窗口的效果,包括具体的代码示例。首先,我们需要在HTML中创建一个容器元素,用于承载悬浮窗口的内容。可以是一个div...
    99+
    2023-10-21
    实现 纯CSS 悬浮窗口
  • CSS怎么让iframe实现自适应高度的效果
    小编给大家分享一下CSS怎么让iframe实现自适应高度的效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!   iframe自适应高度   出于演示目的,本文将使用视频嵌入我们的if...
    99+
    2024-04-02
  • css如何实现滚动效果
    本篇内容主要讲解“css如何实现滚动效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css如何实现滚动效果”吧!css通过overflow属性设置滚动条示例:<html><h...
    99+
    2023-07-04
  • 如何使用CSS实现自适应宽度的菜单
    本文将为大家详细介绍“如何使用CSS实现自适应宽度的菜单”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“如何使用CSS实现自适应宽度的菜单”能够给你意想不到的收获,请大家跟着小...
    99+
    2024-04-02
  • 如何使用CSS实现自适应的多列布局
    随着移动设备的普及,越来越多的网站需要适应不同屏幕尺寸。使用CSS实现自适应的多列布局是一个重要的技巧,可以让你的网站在各种设备上都能够展现良好的效果。本文将介绍如何使用CSS实现自适应的多列布局,并给出具体的代码示例。一、使用Flexbo...
    99+
    2023-10-21
    自适应布局 CSS布局 多列布局
  • 如何在CSS中使用placeholder-shown伪类实现输入框浮动文字效果
    如何在CSS中使用placeholder-shown伪类实现输入框浮动文字效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。浮动的文字标签当我们处理输入框时,会想方设法提供...
    99+
    2023-06-08
  • 如何使用CSS变量实现炫酷惊人的悬浮效果
    小编给大家分享一下如何使用CSS变量实现炫酷惊人的悬浮效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!最近,我从 Grover网站上发现以一个好玩儿的悬停动画,也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作