css动画+渐变效果小例子

最新推荐文章于 2024-07-28 18:53:40 发布
最新推荐文章于 2024-07-28 18:53:40 发布
阅读量904 收藏
点赞数
文章标签： css html css动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42275455/article/details/82530648
版权

二级菜单（动画效果1）

<!DOCTYPE html> 
<head>  
<meta charset=utf-8">  
<title>二层导引</title>  
<meta charset="utf-8">
<style>  
*{ margin:0px; padding:0px;}  
#nav{ width:560px; height:30px; margin:0 auto;}  
#nav ul{ list-style:none; } 
#nav ul li{ width: 80px;height: 30px;background-color: #FFD700;
    float:left; line-height:30px; text-align:center;}  
#nav ul li a{ text-decoration:none; color:#000; }  
#nav ul li a:hover{width: 80px;height: 30px;background-color:#DAA520 ;}  
#nav ul li ul{ position:absolute; 
    visibility:hidden;}  
#nav ul li ul li{ float:none; line-height:30px; text-align:left;
    transition-duration: 3s;
/*     以下三值为默认值，稍后会详细介绍 */
    transition-property: all;
    transition-timing-function: ease;
    opacity: 0;
    transform: perspective(220px) rotateY(-90deg) rotateX(-20deg);
}  
#nav ul li ul li a{ }   
#nav ul li:hover ul{ visibility: visible;} 
#nav ul li:hover ul #li1{
    transform: perspective(220px) rotateY(0deg) rotateX(0deg);
    opacity: 1;
    transition-delay: 0s;
} 
#nav ul li:hover ul #li2{
    transform: perspective(220px) rotateY(0deg) rotateX(0deg);
    opacity: 1;
    transition-delay: 0.2s;
} 
#nav ul li:hover ul #li3{
    transform: perspective(220px) rotateY(0deg) rotateX(0deg);
    opacity: 1;
    transition-delay: 0.4s;
} 
#nav ul li:hover ul #li4{
    transform: perspective(220px) rotateY(0deg) rotateX(0deg);
    opacity: 1;
    transition-delay: 0.6s;
} 
#nav ul li:hover ul #li5{
    transform: perspective(220px) rotateY(0deg) rotateX(0deg);
    opacity: 1;
    transition-delay: 0.8s;
} 
</style>  
</head>   
<body>
    <div id="nav">  
    <ul>  
        <li><a href="#">首页导读</a>
        <ul>  
                <li id="li1"><a href="#">生活</a></li>  
                <li id="li2"><a href="#">娱乐</a></li>  
                <li id="li3"><a href="#">娱乐</a></li>  
                <li id="li4"><a href="#">动漫</a></li>  
                <li id="li5"><a href="#">电影</a></li>  
            </ul> </li>  
        <li><a href="#">推荐版面</a>  
            <ul>  
                <li id="li1"><a href="#">生活</a></li>  
                <li id="li2"><a href="#">娱乐</a></li>  
                <li id="li3"><a href="#">娱乐</a></li>  
                <li id="li4"><a href="#">动漫</a></li>  
                <li id="li5"><a href="#">电影</a></li>  
            </ul>          
        </li>  
        <li><a href="#">推荐文章</a>
        <ul>  
                <li id="li1"><a href="#">生活</a></li>  
                <li id="li2"><a href="#">娱乐</a></li>  
                <li id="li3"><a href="#">娱乐</a></li>  
                <li id="li4"><a href="#">动漫</a></li>  
                <li id="li5"><a href="#">电影</a></li>  
            </ul></li>  
        <li><a href="#">人气排名</a>
        <ul>  
                <li id="li1"><a href="#">生活</a></li>  
                <li id="li2"><a href="#">娱乐</a></li>  
                <li id="li3"><a href="#">娱乐</a></li>  
                <li id="li4"><a href="#">动漫</a></li>  
                <li id="li5"><a href="#">电影</a></li> 
            </ul></li>
        <li><a href="#">新开讨论区</a>
        <ul>  
                <li id="li1"><a href="#">生活</a></li>  
                <li id="li2"><a href="#">娱乐</a></li>  
                <li id="li3"><a href="#">娱乐</a></li>  
                <li id="li4"><a href="#">动漫</a></li>  
                <li id="li5"><a href="#">电影</a></li> 
            </ul></li>  
        <li><a href="#">休闲娱乐</a>
        <ul>  
                <li><a href="#">生活</a></li>  
                <li><a href="#">娱乐</a></li>  
                <li><a href="#">动漫</a></li>  
                <li><a href="#">电影</a></li>  
            </ul></li>  
        <li><a href="#">常见问题</a>
        <ul>  
                <li id="li1"><a href="#">生活</a></li>  
                <li id="li2"><a href="#">娱乐</a></li>  
                <li id="li3"><a href="#">娱乐</a></li>  
                <li id="li4"><a href="#">动漫</a></li>  
                <li id="li5"><a href="#">电影</a></li> 
            </ul></li>    
    </ul>  
</div> 
</body>  
</html>

二级菜单（动画效果2）

<!DOCTYPE html> 
<head>  
<meta charset=utf-8">  
<title>二层导引</title>
<meta charset="utf-8">  
<style>  
*{ margin:0px; padding:0px;}  
#nav{ width:560px; height:30px; margin:0 auto;}  
#nav ul{ list-style:none; } 
#nav ul li{ width: 80px;height: 30px;background-color:#DAA520 ;
    float:left; line-height:30px; text-align:center;}  
#nav ul li a{ text-decoration:none; color:#000; display:block;}  
#nav ul li a:hover{width: 80px;height: 30px;background-color:#FFD700;}  
#nav ul li ul{ position:absolute; display:none;}  
#nav ul li ul li{ float:none; line-height:30px; text-align:left;}  
#nav ul li ul li a{ width:80px;}   
#nav ul li:hover ul{ display:block;} 
#nav ul li:hover ul .li1{animation:mymo 1s 0s;animation-iteration-count:1} 
#nav ul li:hover ul .li2{animation:mymo 1.5s 0s;animation-iteration-count:1;} 
#nav ul li:hover ul .li3{animation:mymo 2s 0s;animation-iteration-count:1;} 
#nav ul li:hover ul .li4{animation:mymo 2.5s 0s;animation-iteration-count:1;} 
#nav ul li:hover ul .li5{animation:mymo 3s 0s;animation-iteration-count:1;}
@keyframes mymo{
    /*0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);opacity: 1;}*/
    from{transform:rotateX(90deg) rotateY(90deg) rotateZ(0deg);opacity: 0;}
    to{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);opacity: 1;}
}
/*#nav ul li:hover:after ul{ display:block;} */
/*#nav ul li:hover:after ul .li1{animation:mymom 1s 0s;animation-iteration-count:1} 
#nav ul li:hover:after ul .li2{animation:mymom 1.5s 0s;animation-iteration-count:1;} 
#nav ul li:hover:after ul .li3{animation:mymom 2s 0s;animation-iteration-count:1;} 
#nav ul li:hover:after ul .li4{animation:mymom 2.5s 0s;animation-iteration-count:1;} 
#nav ul li:hover:after ul .li5{animation:mymom 3s 0s;animation-iteration-count:1;}
@keyframes mymom{
    /*0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);opacity: 1;}*/

    from{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);opacity: 1;}
    to{transform:rotateX(90deg) rotateY(90deg) rotateZ(0deg);opacity: 0;}
}*/
</style>  
</head>   
<body>  
    <div id="nav">  
    <ul>  
        <li><a href="#">首页导读</a>
        <ul>  
                <li class="li1"><a href="#">生活</a></li>  
                <li class="li2"><a href="#">娱乐</a></li>  
                <li class="li3"><a href="#">动漫</a></li>  
                <li class="li4"><a href="#">电影</a></li>
                <li class="li5"><a href="#">电视剧</a></li>  
            </ul>  </li>  
        <li><a href="#">推荐版面</a>  
            <ul>  
                <li class="li1"><a href="#">生活</a></li>  
                <li class="li2"><a href="#">娱乐</a></li>  
                <li class="li3"><a href="#">动漫</a></li>  
                <li class="li4"><a href="#">电影</a></li>
                <li class="li5"><a href="#">电视剧</a></li>   
            </ul>          
        </li>  
        <li><a href="#">推荐文章</a>
        <ul>  
                <li class="li1"><a href="#">生活</a></li>  
                <li class="li2"><a href="#">娱乐</a></li>  
                <li class="li3"><a href="#">动漫</a></li>  
                <li class="li4"><a href="#">电影</a></li>
                <li class="li5"><a href="#">电视剧</a></li>   
            </ul></li>  
        <li><a href="#">人气排名</a>
        <ul>  
               <li class="li1"><a href="#">生活</a></li>  
                <li class="li2"><a href="#">娱乐</a></li>  
                <li class="li3"><a href="#">动漫</a></li>  
                <li class="li4"><a href="#">电影</a></li>
                <li class="li5"><a href="#">电视剧</a></li>    
            </ul></li>
        <li><a href="#">新开讨论区</a>
        <ul>  
                <li class="li1"><a href="#">生活</a></li>  
                <li class="li2"><a href="#">娱乐</a></li>  
                <li class="li3"><a href="#">动漫</a></li>  
                <li class="li4"><a href="#">电影</a></li>
                <li class="li5"><a href="#">电视剧</a></li>    
            </ul></li>  
        <li><a href="#">休闲娱乐</a>
        <ul>  
                <li class="li1"><a href="#">生活</a></li>  
                <li class="li2"><a href="#">娱乐</a></li>  
                <li class="li3"><a href="#">动漫</a></li>  
                <li class="li4"><a href="#">电影</a></li>
                <li class="li5"><a href="#">电视剧</a></li>   
            </ul></li>  
        <li><a href="#">常见问题</a>
        <ul>  
                <li class="li1"><a href="#">生活</a></li>  
                <li class="li2"><a href="#">娱乐</a></li>  
                <li class="li3"><a href="#">动漫</a></li>  
                <li class="li4"><a href="#">电影</a></li>
                <li class="li5"><a href="#">电视剧</a></li>  
            </ul></li>    
    </ul>  
</div> 
</body>  
</html>

书签效果（边缘效果）

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin-top: 15px;
margin-left: -90px;
width:100px;
height:50px;
background:yellow;
transition:width 1s, height 1s;
transition-property:all;
transition-timing-function: linear;
text-align: center;
line-height: 50px;
box-shadow: 4px 4px 10px 4px #000000;
}

div:hover
{
width:70px;
height:50px;
padding-left: 100px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div>竖琴</div>
<div>竖琴</div>
<div>竖琴</div>
<div>竖琴</div>
<div>竖琴</div>
<div>竖琴</div>
</body>
</html>

书签效果（自制边缘效果）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style> 
.dd
{
border-radius: 0 15px 15px 0;
margin-left: 100px;
width:170px;
height:40px;
background:yellow;
transition:width 0.3s, height 1s;
transition-property:all;
transition-timing-function: linear;
text-align: center;
line-height: 40px;
box-shadow: 4px 4px 10px 2px #000000;
}

.dd:hover
{
width:190px;
height:40px;
text-align: center;
line-height: 40px;
background-color: #FFD700;
}
p{
    transition:width 0.3s, height 1s;
transition-property:all;
transition-timing-function: linear;
    color: red;
}
.dd:hover p
{
    color: blue;
}
#div1{
    margin-left: 99px;
    margin-top: -100px;
    float: left;
    width:1px;
height:500px;
border-right: 2px solid #000000;
border-radius: 0 5px 5px 0;
box-shadow:4px 4px 10px 2px #000000;
}
#div2{
    /*margin-left: -100px;*/
    margin-top: 200px;
}
</style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2">
        <div class="dd"><p>竖琴</p></div>
<div class="dd"><p>竖琴</p></div>
<div class="dd"><p>竖琴</p></div>
<div class="dd"><p>竖琴</p></div>
<div class="dd"><p>竖琴</p></div>
<div class="dd"><p>竖琴</p></div>
    </div>
</body>
</html>
命名不规范者
关注
CSS 渐变背景动画的实现
军火库
03-15 2970
如果你用过SASS/LESS，你应该写过一些全局的变量。这东西不是新概念，在其他语言中早就有的！而对于CSS来说，自定义变量不亚于一场革命！声明一个自定义属性，属性名需要以（--）开始，属性值则可以是任何有效的 CSS 值。通过var(--*)来使用但是这这种方式也有缺点，就是我们只能定义变量的初始值，没有办法指定变量的类型。于是CSS又增加了@property规则之后，我们还可以像下述代码这样去定义个 CSS 自定义属性,同样通过var()使用syntax：=表示属性的类型。
css动画和渐变
Machoul的博客
06-28 4174
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果,渐变是图片，需要通过来设置:线性渐变，颜色沿着一条直线发生变化 线性渐变的开头，我们可以指定一个渐变的方向 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况 可以平铺的线性渐变 径向渐变(放射性的效果) css动画 过渡 通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果，提升用户的体验:指定要执行过渡的属性 :指定过渡效果的持续时间 :
css实现RGB渐变色动画
最新发布
Zwwxd666的博客
07-28 257
自己可以设置时间长一点。
CSS渐变-动画
cggzsl的博客
07-21 192
可以只写时间，其他两个值默认填充 all 和 linear。第一个值是属性 一般是all，也可以是其他属性名称。第二个值是时间 单位是时间单位 通常是s。第三个值是 过渡速度 linear 匀速。top left bottom right center 两两组合使用。缩放 默认值是1 小于1就是缩小，大于1就是放大。平移 translate。第一个值是 横向偏移量。第二个值是 纵向偏移量。
css渐变 动画
weixin_73807171的博客
08-08 914
css3过渡是元素从一种样式逐渐改变为另一种的效果。开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top、bottom（可组合使用）（像素/百分比 X轴：left/right/center Y轴：top/bottom/center）skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。属性：radial-gradinet()(形状 发散方向，起始颜色，终止颜色)matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
CSS渐变动画效果
weixin_63449105的博客
07-22 401
开始位置：渐变开始的位置，属性值可以为百分比，长度，left/right/top/bottom（可组合使用）与to搭配。发散方向：center，left，right，top，bottom（与at搭配）ease-in-out：慢速开始及结束。matrix：有六个参数，包含旋转，缩放，移动（平移），倾斜。-duration：时间，单位时时间单位，一般为秒（s)linear-gradient（开始位置/角度，起始颜色，终止颜色）radial-gradient（形状，发散方向，起始颜色，终止颜色）
神奇！js+CSS+DIV实现文字颜色渐变效果
11-23
3. 使用CSS3的伪元素和动画，通过改变伪元素的颜色来模拟渐变效果，这需要更复杂的CSS和JavaScript配合。 4. 如果支持WebGL，还可以利用Three.js等库创建更为复杂和动态的3D颜色渐变。 总的来说，这个实例结合了...
css3实现文字扫光渐变动画效果的示例
09-24
在CSS3中，我们可以利用一些高级特性来创建各种动态效果，其中之一就是文字扫光渐变动画。这个效果可以通过`background-clip`属性结合渐变背景和动画实现，为网页增加视觉吸引力。以下是对如何实现这一效果的详细...
css3实现加载loading特效小动画效果
06-12
本文将深入探讨如何利用CSS3来实现吸引人的加载特效小动画效果。 首先，CSS3中的关键帧动画（@keyframes）是实现这种效果的核心。通过定义动画的起始状态和结束状态，以及可能的中间状态，可以创建平滑过渡的效果。...
纯css无限循环渐变曲线动画效果.rar
10-01
虽然标题中提到的是纯CSS效果，但有时为了增加交互性或者与用户更紧密的交互，开发者可能会结合jQuery来触发或控制CSS动画。例如，使用jQuery的`.click()`函数监听点击事件，然后通过`.animate()`方法或者改变CSS类...
纯css3渐变进度条动画特效
07-24
在本案例中，我们关注的是一个使用纯CSS3实现的渐变进度条动画特效。这个特效利用了CSS3的背景属性和动画特性，为网页界面增添了动态视觉效果，提升了用户体验。 首先，我们要理解"渐变效果"在CSS3中的实现。CSS3...
Css 渐变 动画
m0_65827673的博客
07-21 280
属性：linear-gradient(开始位置 角度，起始颜色，终止颜色 )在这里插入代码片开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top\bottom（可组合使用）角度：渐变终止方向的角度，当开始位置为数值或百分比的时候可用起始颜色终止颜色重复渐变：将属性修改为：repeating-linear-gradinet(divwidth;height;margin;padding;
css渐变动画效果
weixin_44580808的博客
07-31 1233
有趣的渐变边框动画效果 效果： 实现思路： 每一个框一个div，每一个“框”分三部分组成，::before实现渐变边框（实际上是渐变背景），::after实现内部白色背景，最后div的其他子元素作为框内的文字内容显示。使用animation动画实现::before渐变背景旋转，即可模拟边框动画。 问题：li内部子元素被::after覆盖显示不了的问题（::after的显示层级高于正常流元素） 解决办法：给内部子元素加position: relative;z-index: 1;即可 <div cla
css实现颜色渐变小动画
有问题可关注公众号：前端研究院 后台输入问题回复
05-24 542
【代码】css实现颜色渐变小动画。
css-背景渐变色动画
ZhanShenvsDiHuang的博客
04-26 2920
css-背景渐变色动画
css背景渐变（动画）
qq_41974199的博客
10-31 4225
css背景渐变（动画） // css背景渐变（动画） .writeFarming{ background: linear-gradient(-45deg, #2d8cf0, #19be6b, #ff9900, #ed3f14); animation: gradientBG 15s ease infinite; background-size: 400% 400%; } ...
css渐变动画
Dong3283205200的博客
07-21 253
radial-gradient(circle(形状) top left(发散方向)，red(起始颜色),yellow,blue(终止颜色));触发BFC规范的元素，可以形成一个独立的容器，不受外界影响，从而解决一些布局问题。wrap-reverse 改变朝向(自下而上)space-around：两端对齐，中间自适应。缩放:scale (默认值是1,小于1就是缩小，大于1就是放大)linear-gradient(开始位置 角度，起始颜色，终止颜色)第一个值是属性,一般是all，也可以是其他属性名称;
css颜色渐变动画
学习使我快乐_玉祥
04-26 1277
#container{ animation-name: anim1; animation-direction: alternate; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-duration: 10s; } @keyframes anim1{ ..
css边框发光渐变动画
08-31
要实现CSS边框发光渐变动画，可以使用border-radius属性设置圆边框，border-image属性和linear-gradient()函数设置渐变颜色。同时，可以通过动画属性实现边框的发光效果。以下是一个示例代码： .main :nth-child(1)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值