javascript - 这个动画过渡效果，可以用css3实现吗？想了很长时间，没什么思路啊
本文介绍了javascript - 这个动画过渡效果，可以用css3实现吗？想了很长时间，没什么思路啊的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
最开始白色部分就是这样，然后鼠标放上去就变成下面这样，原网站是svg弄得，能不能用css动画做出来他的这个过渡效果，这是原网站
不用跟我说 用什么css过度和动画，我知道，css做出来这个初始样子我也会，我就是不知道这个过渡动画该如何实现，是否可以用css加js实现。求助
解决方案
大概这样？
我的这个动画没回弹，想要回弹自己搞一个吧。
<!DOCTYPE html>
<!--
Author: SpringHack - springhack@live.cn
Last modified: 2017-03-26 10:16:39
Filename: index.html
Description: Created by SpringHack using vim automatically.
-->
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>View</title>
<style>
* {
padding: 0;
margin: 0;
border: 0;
transition: all .25s;
}
body {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.View {
position: relative;
overflow: hidden;
width: 240px;
height: 420px;
background: url(http://page.tobee.me/home/img/1.png);
}
.View img {
z-index: -1;
position: absolute;
top: 0;
}
.View .Title {
background: rgba(0, 0, 0, .2);
height: 420px;
}
.View .Title .TitleText {
color: #52be7f;
font-size: 24px;
padding: 40px;
text-align: center;
background: #ffffff;
}
.View .Title .TitleText p {
color: #aaa;
font-size: 14px;
padding-top: 10px;
text-align: center;
}
.View .Title .TitleArea {
border: 120px #ffffff solid;
border-top: 0px #ffffff solid;
border-bottom: 50px transparent solid;
transition: all 0s;
}
.View .Title .MoreView {
display: flex;
justify-content: center;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
.View .Title .MoreView button {
color: #52be7f;
border: 1px #52be7f solid;
border-radius: 20px;
padding: 5px 20px 5px 20px;
width: 70px;
background: transparent;
transform: scale(0);
}
.View .Title:hover {
background: rgba(0, 0, 0, 0);
}
.View .Title:hover .TitleArea {
animation: .125s ease dealA forwards, .125s ease dealB forwards;
}
.View .Title:hover .MoreView button {
transform: scale(1);
}
.View .Title:hover .TitleText {
padding: 10px;
}
.View .Title:hover .TitleText p {
color: transparent;
height: 0;
}
@keyframes dealA {
to {
border-bottom: 0 transparent solid;
}
}
@keyframes dealB {
from {
border-left: 120px transparent solid;
border-right: 120px transparent solid;
}
to {
border-left: 120px transparent solid;
border-right: 120px transparent solid;
border-top: 30px #ffffff solid;
border-bottom: 0 transparent solid;
}
}
</style>
</head>
<body>
<div class='View'>
<div class='Title'>
<div class='TitleText'>
就是这个
<p>什么鬼的</p>
</div>
<div class='TitleArea'></div>
<div class='MoreView'>
<button class='More'>查看</button>
</div>
</div>
</div>
</body>
</html>这篇关于javascript - 这个动画过渡效果，可以用css3实现吗？想了很长时间，没什么思路啊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
