css 添加动画

编程知识更新时间:2023-04-06 07:10:16

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 1.6s infinite;
	-webkit-animation:mymove 1.6s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	from{transform:translate(0,0)}
    to{transform:translate(0,15px)}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	from {top:0px;}
	to {top:200px;}
}



添加动画
.div{
transition:margin-top 1s;
    -moz-transition:margin-top 1s; /* Firefox 4 */
    -webkit-transition:margin-top 1s; /* Safari and Chrome */
    -o-transition:margin-top 1s; /* Opera */

    &:hover{
        margin-top: 30px;
        // transition: all .2s ease-in-out; //这是滑入划出的动画 top: -100%;
    }
}
</style>
</head>
<body>

<p><strong>注意:</strong>  @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

更多推荐

css 添加动画

本文发布于:2023-04-06 07:10:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/df5f724fa9e5efdf45e4f0465b978d10.html