首页 > 其他分享 >css渐变动画

css渐变动画

时间:2023-02-02 08:55:28浏览次数:46  
标签:动画 2s 渐变 transition width div css

鼠标放上去渐变

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

使div居中:

要设置div的宽度
再使用margin 0 auto设置

今日诗词

标签:动画,2s,渐变,transition,width,div,css
From: https://www.cnblogs.com/tuzichun/p/17079077.html

相关文章

  • 11、 CSS权威指南--第 7 章 (p262)视觉格式化基础
    7.1 元素框基础不管什么元素,CSS都假定每个元素都生成一个或多个矩形,我们称之为元素框(elementbox)。各元素框的中心是内容区域,四周有可选的内边距、边框、轮廓和外边距......
  • css input框输入错误抖动效果
    1、:valid用于匹配输入值为合法的元素2、:invalid用于匹配输入值为非法的元素3、required属性规定必需在提交之前填写输入字段4、pattern属性规定用于验证输入字段的正......
  • css层叠性和继承性
    ......
  • 前端CSS网页布局新技术(双屏和折叠屏手机)解决方案
    三星GalaxyFold和SurfaceDuo以及华为mateX等系列折叠屏手机问世至今已有三年多的时间。此后,三星GalaxyZFold3和GalaxyZFlip3、华为mateX2S、荣耀magicV......
  • 零基础学前端之CSS列表
    这篇我们学习CSS列表。对于列表,大家并不陌生。比如下面的无序列表和有序列表。在HTML中,最常用的两种列表的类型就是无序列表和有序列表,使用ol和ul元素实现。列表项通......
  • 零基础学前端之CSS边框
    我们学习如何应用CSS给元素添加边框。CSS边框属性,允许我们指定一个元素边框的样式、宽度和颜色。我们先来学习元素边框的样式。border-style属性指定了要显示什么样的边框......
  • vue 中 css 的全局污染问题
    问题场景:通过一个入口文件index.js,export几个自定义的vue组件,如果其中一个组件中有全局的样式,那么 import其中任一个vue组件之后,全局的样式就会被引入,间接的造成......
  • 关于CSS、SCSS、SASS、HTML单页面引入SCSS
    1.CSS、SCSS、SASSCSS是开发人员熟知的一种用于页面样式开发的语言,可以通过内容的分离控制减少代码的重复性,降低代码的复杂程度。SASS与SCSS都是CSS预处理......
  • css行内元素的line-height属性导致的高度溢出问题。
    <divstyle="line-height:1.12;"><spanstyle="display:inline-block;">此处的文字高度要大于所属的span元素的高度。<span></span></span><div>这里......
  • JQuery动画
    动画1.三种方式显示和隐藏元素1.默认显示和隐藏方式1.show([speed],[easing],[fn]]):显示1.参数:1.speed:动画的速度。三个......