CSS3动态效果收集

最新推荐文章于 2024-04-12 05:27:32 发布

众乐-Ryan

最新推荐文章于 2024-04-12 05:27:32 发布

阅读量942

点赞数

分类专栏： web前端 css 文章标签： css3

本文链接：https://blog.csdn.net/fendouzhe123/article/details/42191241

版权

web前端同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

CSS3能够给页面上的元素提供很多炫酷且有趣的效果。本篇博客就是记录各种CSS3动态效果的实现，以备需要时查询。当然，animate.css已经收集了足够多的动画效果，我们也可以积累属于自己的其中没有的一些动态效果，来增添网站的趣味性。

1、:hover背景色更改，文字小的动画改变

代码如下：

<a data-id="5" href="">HTML/CSS</a>

css代码如下：

a{
	display: block;
	width: 100px;
	height: 30px;
	text-align: center;
	transition: background 0.6s;
	-moz-transition: background 0.6s;
	-webkit-transition: background 0.6s;
	-o-transition: background 0.6s;
	transition: color 0.3s;
	-moz-transition: color 0.3s;
	-webkit-transition: color 0.3s;
	text-decoration: none;
	line-height: 30px;
	text-align: center;
	font-size: 12px;
}
a:hover {
	background: #cc0000;
	color: #fff;
}

2、左右摇摆效果(鼠标hover上去的时候摇晃效果消失)：

div.shakeEl {
    animation: icon-jump 0.3s infinite;
    -o-animation: icon-jump 0.3s infinite;
    -moz-animation: icon-jump 0.3s infinite;
    -webkit-animation: icon-jump 0.3s infinite;
}

div.<span style="font-family: Arial, Helvetica, sans-serif;">shakeEl </span><span style="font-family: Arial, Helvetica, sans-serif;">{</span>
    animation: none;
    -o-animation: none;
    -moz-animation: none;
    -webkit-animation: none;
}

@keyframes icon-jump {
    50% {
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

@-moz-keyframes icon-jump /* Firefox */
{
    50% {
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

@-webkit-keyframes icon-jump /* Safari 和 Chrome */
{
    50% {
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

@-o-keyframes icon-jump /* Opera */
{
    50% {
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

3.元素由小变大渐变效果：

HTML代码：

<div class="test"></div>

CSS代码：

.test{
	width:500px;
	background:red;
	height: 343px;
	-webkit-transition: all 1s ease .2s;
	-moz-transition: all 1s ease .2s;
	-o-transition: all 1s ease .2s;
	transition: all 1s ease .2s;
	
	-webkit-transform: scale(0.2,0.2) translate(0,0);
	-moz-transform: scale(0.2,0.2) translate(0,0);
	-o-transform: scale(0.2,0.2) translate(0,0);
	transform: scale(0.2,0.2) translate(0,0);
	opacity: 0;
	z-index: 3;
}

JS代码：

setTimeout(function(){
		document.querySelector('.test').style.transform = 'scale(1,1) translate(0px,0px)';
		document.querySelector('.test').style.opacity = '1';
	},1000);