CSS3动画闪跳
2024-08-31 13:10:35
Alloy Team首页的元素Hover效果
效果预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 100%;
height: 200px;
background-color: #1BBBC3;
position: relative;
}
.box .line{
cursor: pointer;
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg)
}
.box:hover .line{
-webkit-transition: all .5s ease;
transition: all .5s ease;
left: 100%
} .box2{
margin-top: 20px;
width: 265px;
height: 200px;
border-radius: 5px;
background-color: #89d04f!important;
position: relative;
padding: 20px 10px;
color: #fff;
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
.box2:hover{
transform: translateY(-6px);
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
-webkit-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
-moz-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
}
</style>
</head>
<body>
<div class="box">
<div class="line"></div>
</div> <div class="box box2">
<div class="line"></div>
</div>
</body>
</html>
CSS3七彩文字
效果预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: #333;
} @media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
.text{
background-image: -webkit-linear-gradient(left,#cddc39,#ff9800 25%,#cddc39 50%,#ff9800 75%,#cddc39)!important;
-webkit-text-fill-color: transparent!important;
-webkit-background-clip: text!important;
-webkit-background-size: 200% 100%!important;
-webkit-animation: masked-animation 2s infinite linear!important;
} .text:hover {
color: #f2b535;
background: none;
}
}
.text:hover{
-webkit-animation: masked-animation 1s infinite linear!important;
}
@-webkit-keyframes masked-animation {
0% {
background-position: 0 0
} to {
background-position: -100% 0
}
}
</style>
</head>
<body>
<div><a href="" class="text">勇士是冠军</a></div>
<div><span class="text">勇士是冠军</span></div>
<div><span class="text">勇士是冠军</span></div> </body>
</html>
最新文章
- Android自定义控件7--自定义开关--绘制界面内容
- 安装 webpack
- 物化视图刷新慢--有可能是mv log被多个mv使用造成的
- visual studio 2010 破解版 破解方法
- Leetcode: Alien Dictionary && Summary: Topological Sort
- Tomcat中JSP引擎工作原理
- C#笔记（Hex转JPG）
- Unity 功夫猫
- 反思java web的发展
- bootstrap-js(3)滚动监听
- insertable = false, updatable = false的使用
- thinkphp pdo 重写问题
- 二叉树，平衡树，红黑树，B~/B+树汇总
- --@angularjs-- $location.path('/login')-$location服务用法示例
- 用keras实现人脸关键点检测(2)
- elasticsearch篇之mapping
- pyqt5界面使用
- python基础一 -------如何在列表字典集合中根据条件筛选数据
- Py之set操作【转载】
- IDA*（以The Ratotion Game POJ--2286 UVa1343为例）