一条线从无到有(css):鼠标滑过的时候一根线从无到有?

最新推荐文章于 2021-11-21 14:39:54 发布
最新推荐文章于 2021-11-21 14:39:54 发布
阅读量487 收藏
点赞数
原文链接：https://juejin.im/post/5c272e626fb9a049e12a4a21
版权

第一种方法:

  • 刚开始width:0
  • 然后鼠标滑过的时候让宽度为100%
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.变线的长短</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bg{
            width: 200px;
            height: 200px;
            line-height: 200px;
            background: yellow;
            margin: 30px auto;
            text-align: center;
        }
        .bg{

        }
        .bg .line{
            width: 0;
            height: 1px;
            background: #000;
            margin: -60px auto 0;
            transition: all .5s linear;
        }
        .bg:hover .line,.bg:hover p{
            color: red;
            font-weight: 700;
        }
        .bg:hover .line{
            width: 100%;
            background: red;
        }
    </style>
</head>
<body>
<div class="bg">
    <p>梦幻西游</p>
    <div class="line"></div>
</div>
</body>
</html>
复制代码

第二种方法:

  • 开始的时候transform:scale(0)
  • 鼠标滑过的时候transform:scale(1)
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>1.变线的长短</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       .bg{
           width: 200px;
           height: 200px;
           line-height: 200px;
           background: yellow;
           margin: 30px auto;
           text-align: center;
       }
       .bg{

       }
       .bg .line{
           height: 1px;
           background: #000;
           margin: -60px auto 0;
           transform: scale(0);
           transition: all .5s linear;
       }
       .bg:hover .line,.bg:hover p{
           color: red;
           font-weight: 700;
       }
       .bg:hover .line{
           background: red;
           transform: scale(1);
       }
   </style>
</head>
<body>
<div class="bg">
   <p>梦幻西游</p>
   <div class="line"></div>
</div>
</body>
</html>
复制代码
weixin_34220963
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css属性值的计算过程--实现css属性从无到有的过程
Yannnnnm的博客
07-04 447
目录整个网页渲染的流程一级目录二级目录三级目录 前提条件：一个元素在渲染过程中，该元素中的每一个css元素都必须有值。 整个网页渲染的流程 渲染的顺序是按树形目录的结构来依次渲染，并不是同级从左到右渲染，再去下一层。 下图用DOM树演示的一个简单的渲染的过程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl
css过度效果 从无到有,求教，对于CSS3 transition和transform实现的一个特效原理不是太明白？...
weixin_42305264的博客
08-04 505
已解决并实现我这把这个效果的模版套了下来，如有需要可以私聊我，我发给你看，样式都写在html中的，主要的核心在于以下的CSS样式，这些样式你可能在用调试工具的时候没有发现(伪类)。.cell .buttons-wrapper .button span {display: block;position: absolute;left: 50%;top: 50%;-webkit-transition: ...
js多物体运动--鼠标移入改变宽度
cinqing
08-24 655
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多物体运动</title> <style> ul,li{ list-style: none; } ul li{ width:200px;
css背景色动画从无到有,css3背景颜色渐变动画
weixin_42516007的博客
08-04 1148
通过背景定位来实现 background-position* {margin: 0;padding: 0;}body {margin: 0;width: 100%;height: 100vh;background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: 400% 400%;anima...
JS - 鼠标经过边框旋转
weixin_30289831的博客
08-08 142
*右侧为鼠标经过时效果。 下载地址：http://www.lanrentuku.com/js/tupian-1200.html 转载于:https://www.cnblogs.com/KTblog/p/4713660.html
css3立体按钮鼠标滑过带线条按钮动画特效.zip
07-11
实现效果： ... css3立体按钮鼠标滑过带线条按钮动画特效，当鼠标放在按钮上时，边框的的线条消失，有一种立体的效果，无论我们开发企业网站还是商城网站，用户注册或者登陆的按钮我们就可以使用这样的效果！
CSS实现鼠标滑过文字弹出一段说明文字无JS代码
09-25
标题中的“CSS实现鼠标滑过文字弹出一段说明文字无JS代码”指的是使用纯CSS来设计一个交互功能，当用户将鼠标悬停在特定文字上时，会显示出一段相关的说明文字，而无需JavaScript的辅助。这个功能在网页设计中常见于...
CSS3实现的鼠标滑过边框线条动画特效特效代码
03-20
CSS3实现的鼠标滑过边框线条动画特效源码是一段实现了鼠标经过或悬停一个选项卡上时，该选项卡周围会出现从一点开始到另一点结束的边框线条动画效果，效果流畅弹性十足，非常干净、时尚，本段代码适应于所有网页使用...
CSS3鼠标滑过动画线条边框特效特效代码
03-20
CSS3鼠标滑过动画线条边框特效是一款基于CSS属性animation动画制作，效果流畅弹性十足。
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
10-23
本文主要介绍了使用JavaScript和CSS来实现一个鼠标滑过时动态翻滚的导航条效果。在现代网页设计中，用户交互体验是非常重要的一个部分，而动态效果的实现能够大大增强用户的交互体验，让网页看起来更加生动和吸引人...
CSS3 的边框
Day_day_dream的博客
07-17 108
CSS3 边框 ··~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： DW 撰写时间：2021/7/16 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 CSS3 边框 通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件 CSS3 圆角边框：border-radius 在 CSS2 中添加圆角矩形需要技巧。我们必
CSS—尺寸与边框
有道无术，术尚可求，有术无道，止于术。
01-25 209
一、尺寸属性 作用  改变元素的宽度 和 高度 宽度 width : 宽度 min-width : 最小宽度 max-width : 最大宽度 高度 height : 高度 min-height : 最小高度 max-height : 最大高度 页面中允许设置尺寸的元素 所有的块级元素都允许设置尺寸：div,p,h1,h...
利用css3实现各种动画
ma125120的博客
04-26 1974
利用css3实现各种动画 ======================= Demo: https://ma125120.github.io/ma-animate/test/（因为Demo中的html仅为示范使用，所以使用了不少的es6语法，如果打开后页面一片空白，切换至主流浏览器即可） 在Demo中 分别设置各个动画的启动与停止，或通过层顶层按钮实现所有动画的启动与停止。 通过输入框动...
css 渐变、过渡、动画
paidaboluo的博客
11-21 966
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 两种： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（radial-gradient）- 由它们的中心定义 1、CSS3 线性渐变 为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。 下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色： #grad
CSS实现鼠标经过，文字下方横线划过特效
热门推荐
weixin_39728230的博客
05-27 1万+
昨天在聊天群里看见有人问，鼠标划过，文字下方横线从左向右划过怎么实现？作为初学前端的我页忍不住想要试一试自己能否实现这样的效果，当然用JS实现确实简单，另外自己最近刚巩固了css3的一些新的过渡和动画特性的编程，所以再巩固一下也好，遂决定用CSS3的一些特性来写这个特效。           一开始为了最简单，我直接就是做好一个导航，ul &gt; li  &gt; a。 然后li左浮动布局。如下...
【从无到有】教你使用animation做简单的动画效果
weixin_34234823的博客
03-19 744
今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中，使用animition动画属性，调用声明好的关键帧 首先声明一个动画（关键帧）： @keyframes name{ from{ 　　　　} to{ 　　　　} } @keyframes name{ 0%{ 　　　　} 50%{ 　　　　} 100%{ ...
如何用transition实现鼠标移到一行字从左往右伸出一条线，离开时又缩回原样（分析两种情况）？
森森
07-21 2419
我们先来看下transition的相关知识 定义和用法 transition 属性是一个简写属性，用于设置四个过渡属性，如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开： transition-propertytransition-durationtransition-timing-functiontransition-delay 注释：请始终设置 trans
初识 Vue（22）---（Vue中CSS动画原理）
姜皓的博客
07-31 811
Vue中CSS动画原理 动画流程：(动画从无到有) 1.在动画即将被执行的一瞬间，会往内部的 div 添加 两个 class 名字，分别是 fade-enter 和 fade-enter-active; 2.当动画第一帧执行结束后，transition 标签分析知道这个 div 的动画效果，会在动画第二帧时做两件事：将之前添加的 fade-enter这个 class 标签去掉，再增加 f...
css动画 从无到有的过程
最新发布
05-19
CSS动画从无到有的过程可以概括为以下几步： 1. 定义动画效果：首先需要确定要实现的动画效果，包括动画的起始状态和终止状态，以及动画的持续时间、延迟时间等属性。可以使用CSS关键帧（@keyframes）规则来定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值