CSS3 新特性学习案例
Posted GoldenaArcher
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 新特性学习案例相关的知识，希望对你有一定的参考价值。
CSS3 新特性学习案例
先放一个结合了 javascript 的案例，做完了之后发现 CSS 的动画真的蛮有意思的，怪不得之前看到 PVZ（植物大战僵尸, Plant vs Zombie）也有用 H5C3 + JS 实现的:
案例 1,使用伪元素完成导航栏悬浮切割
这种轮播的功能其实真的还蛮适合拆出来单独作为组件的拆分，只要将轮换的宽度传进去，就可以做到复用了——毕竟点击事件的效果都是一样的。
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@font-face {
font-family: "iconfont";
src: url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.eot");
src: url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.eot?#iefix") format("embedded-opentype"),
url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.woff2") format("woff2"),
url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.woff") format("woff"),
url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.ttf") format("truetype"),
url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.svg#iconfont") format("svg");
}
.iconfont {
font-family: "iconfont";
}
.banner {
position: relative;
margin: 100px auto;
width: 500px;
height: 200px;
background-color: #eee;
}
.banner::before,
.banner::after {
display: none;
top: calc(50% - 9px);
font-family: "iconfont";
font-size: 18px;
}
.banner::before {
position: absolute;
left: 0;
/*  */
content: "\\e63b";
}
.banner::after {
position: absolute;
right: 0;
/*  */
content: "\\e639";
}
.banner:hover::before,
.banner:hover::after {
display: block;
}
</style>
</head>
<body>
<div class="banner"></div>
</body>
</html>
案例 2，初试 transition
使区域可以自动伸缩：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: #aaa;
transition: width 1s ease 0s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例 2，transition 结合 JavaScript 模拟血量增长
其实就像以前玩的页游，用血瓶会加血的简单效果
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.blood {
box-sizing: border-box;
padding: 5px;
margin-bottom: 20px;
width: 200px;
height: 50px;
border: 1px solid red;
}
.blood-percentage {
height: 100%;
max-width: 100%;
/* width: 50%; */
background-color: red;
transition: width 0.5s;
}
</style>
</head>
<body>
<div class="blood">
<div class="blood-percentage"></div>
</div>
<button>点我加血</button>
<script>
const btn = document.querySelector("button");
const bloodPercentage = document.querySelector(".blood-percentage");
bloodPercentage.style.width = "50%";
console.log(btn);
btn.onclick = function () {
// console.log(bloodPercentage.style.width);
bloodPercentage.style.width =
parseInt(bloodPercentage.style.width) + 10 + "%";
console.log(bloodPercentage.style.width);
};
</script>
</body>
</html>
案例 3，transition 结合 hover 的使用
其实就是当鼠标悬浮在图片上，用 transition 完成页面切换的延时效果
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.zombie {
background-image: url("https://wdrfree.com/public/demos/animatespritekeyframes/walkingdead.png");
height: 312px;
width: 200px;
transition: all 0.5s;
}
.zombie:hover {
background-position: -200px;
}
</style>
</head>
<body>
<div class="lawn">
<div class="zombie"></div>
</div>
</html>
后来我发现，不用 transition 看起来效果更有意思一点：
我就想到了之前偶然看到的植物大战僵尸前端版，于是就想着用 setInterval 结合 transition 与精灵图特效——精灵图部分可以参考 CSS 的十个高级使用技巧 中的对应部分——或许能够完成一个移动的僵尸？
最后自然也是实现了效果：
实现的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.zombie {
position: absolute;
right: 0;
background-image: url("https://wdrfree.com/public/demos/animatespritekeyframes/walkingdead.png");
height: 312px;
width: 200px;
transition: right 0.5s;
/* transition: all 0.5s; */
}
.lawn {
position: relative;
height: 312px;
width: 500px;
border-bottom: 1px solid green;
}
</style>
</head>
<body>
<div class="lawn">
<div class="zombie"></div>
</div>
<script>
const div = document.querySelector(".zombie");
div.onmouseenter = function () {
console.log(div.style);
setInterval(function () {
div.style.backgroundPosition =
(parseInt(div.style.backgroundPosition) || 0) - 200 + "px";
div.style.right = (parseInt(div.style.right) || 0) + 10 + "px";
}, 200);
};
</script>
</body>
</html>
以上是关于CSS3 新特性学习案例的主要内容，如果未能解决你的问题，请参考以下文章