CSS3之边框样式(动画过渡)

简介:

简述

CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡。

transition

定义和用法

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

语法

transition: property duration timing-function delay;

描述
transition-property 规定设置过渡效果的 CSS 属性的名称
transition-duration 规定完成过渡效果需要多少秒或毫秒
transition-timing-function 规定速度效果的速度曲线
transition-delay 定义过渡效果何时开始

实现

效果

这里写图片描述

源码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type='text/css'>

/* 动画过渡 */
#main_menu a, #main_menu li {
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  -o-transition: all 0.4s ease-in-out 0s;
  -ms-transition: all 0.4s ease-in-out 0s;
  /* 动画效果 
      all:所有属性都将获得过渡效果 
      0.4s:完成过渡效果需要花费的时间
      ease-in-out:规定以慢速开始和结束的过渡效果
      0s:规定过渡效果何时开始
  */
  transition: all 0.4s ease-in-out 0s;
}

/* 划过样式 */
#main_menu li:hover {
  background: #EEE;
  border-style: outset;
  border-color: rgb(34, 177, 76);
}

/* 正常样式 */
#main_menu li {
  list-style: none;
  border: 3px outset #AAA;
  margin: 10px;
  background: #AAA;
}
</style>
</head>
<body>
  <ul id="main_menu">
    <li><a href="http://www.googto.com/">Googto</a></li>
    <li><a href="https://www.hao123.com/">hao123</a></li>
    <li><a href="http://blog.csdn.net/liang19890820">一去丶二三里</a> </li>
  </ul>
</body>
</html>
AI 代码解读
目录
打赏
0
0
0
0
57
分享
相关文章
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
119 73
给 CSS 盒子模型添加边框时,需要注意什么?
在给CSS盒子模型添加边框时,需要注意边框的宽度、样式和颜色,以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度,可能需要调整其他属性以保持布局的完整性。
|
1月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
65 34
|
1月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
52 22
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
157 63
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
150 58
|
3月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
74 31
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
66 6
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
98 7

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等