如何用hover写出顺畅的动态效果

最近在做项目的时候遇到了一个问题，就是在用hover的时候当鼠标移出之后就没有了过渡效果。

动态效果看起来很生硬，不顺畅。

如何解决呢？直接上代码：

html:

css:

.cardin{ height:100px;width:50px; background:#161A1D; opacity:.7; -webkit-transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); }

.cardin:hover{height:10px; background:#eee; opacity:.2;transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);}

只要在hover作用的对象上加上-webkit-transition就 ok了，是不是很简单！

转载于:https://juejin.im/post/5b597cdee51d4519873f675a

如何用hover写出顺畅的动态效果相关推荐

r语言 python 股票_python r语言股票!如何用python写出爬虫？
python计时器问题? import time print('按下回车开始,按下 Ctrl C 暂停/停止计时.') while True: input("") starttim ...
弹出框口登录php代码,如何用JQuery写出登录弹出框
类似百度的登录弹出框,可用jquery的fadeIn(),hide(),show(),slideDown()等动画函数实现,一下为html5 代码: $(document).ready(functio ...
[翻译]如何用YII写出安全的WEB应用
前言虽然本文是基于YII1.1,但其中提到的安全措施适用于多数web项目安全场景,所以翻译此文,跟大家交流.原文地址. 目录安全基本措施... 2 验证与过滤用户的输入信息... 2 原理... ...
如何用java写出一个可更换皮肤的五子棋?
文章目录画棋盘画棋子判输赢悔棋的功能再来一局更换皮肤画棋盘要下棋首先要有一个方格棋盘,一个普通的棋盘是由横线和竖线组成的,我们控制好间距就行,这里有很多常量,我们可以定义它,后期想修改 ...
如何用单片机写出类似printf的函数
实现功能:stm32用类似printf的函数,通过串口发送数据. 首先,让我们在qt中用C语言模拟串口输出(用printf("%c",ch)代替void USART_SendDat ...
怎么用HTML5制作万花筒,如何用html5写出万花筒效果？
效果图: 代码如下: http://www.baiduyo.com canvas{ background:#ccc; } window.οnlοad=function () { var canvas= ...
如何用html写出微信红包界面,问题详情
1.为什么其他人可以领WiFi红包,而我没法领取?本次活动仅支持腾讯手机管家安卓版5.4版本以上,请您升级至最新版本再参与活动.(进入管家=>右上角个人中心=>关于=>检查更新) 2 ...
泰森多边形 java_如何用Java写出泰森多边形算法代码？？？我找了好多资源表示无解呀？...
展开全部 package com.wangyin.seapay.loginkgo; import java.util.HashMap; import java.util.Map; import jav ...
【我的前端】CSS启示录：CSS写出超级美观的阴影效果
CSS使用技巧:CSS写出超级美丽的阴影效果文章目录 CSS使用技巧:CSS写出超级美丽的阴影效果如何用CSS写出超级美丽的阴影效果为什么要使用阴影技巧链接到此标题压条滤镜:阴影 html ...

如何用hover写出顺畅的动态效果

如何用hover写出顺畅的动态效果相关推荐

最新文章

热门文章