Fade out transition effect using CSS3

简介: Fade out transition effect using CSS3

摘要:


 

css3已经被应用到很多网站了,对于创建动态交互的网站是非常有益的。今天就分享一个使用transition实现的鼠标悬停淡阴淡出的效果。


代码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div.demo {
          float: left;
          border:1px solid #ccc;
        }
        div.demo i {
          cursor: pointer;
          height: 50px;
          transition: opacity 2s;
          width: 50px;
          background: #000;
          float: left;
          margin: 5px;
          opacity: 0;
        }
        div.demo i:hover {
          opacity: 1;
          transition-duration: 0s;
        }
    </style>
</head>
<body>
    <div class="demo">
        <div>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</body>
</html>



相关文章
|
7月前
|
前端开发 JavaScript UED
过渡效果的艺术:CSS transition 让网页交互更平滑(上)
过渡效果的艺术:CSS transition 让网页交互更平滑(上)
|
28天前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
42 1
|
7月前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
96 2
|
7月前
|
前端开发 JavaScript UED
CSS Transition(过渡效果)详解
CSS Transition(过渡效果)详解
474 1
|
7月前
|
前端开发 UED
深入理解CSS过渡效果(Transition):提升网页动画体验
深入理解CSS过渡效果(Transition):提升网页动画体验
350 1
|
机器学习/深度学习 前端开发
HTML&CSS Day08 CSS transition过渡
HTML&CSS Day08 CSS transition过渡
69 0
|
7月前
|
Web App开发 前端开发 JavaScript
过渡效果的艺术:CSS transition 让网页交互更平滑(下)
过渡效果的艺术:CSS transition 让网页交互更平滑(下)
|
前端开发
CSS 中过渡动画(transition)的使用
CSS 中过渡动画(transition)的使用
80 0
|
JavaScript
CSS3 transition - 通知消息轮播条
CSS3 transition - 通知消息轮播条
113 0
|
机器学习/深度学习 自然语言处理 前端开发
CSS3动画属性之Transition
CSS3动画属性之Transition
119 0