demo1:自动旋转的图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 300px;
height: 300px;
border: 1px solid #000;
border-radius: 50%;
/* 使用动画 */
animation: rotate360 2s infinite linear;
}
/* 定义动画 */
@keyframes rotate360 {
/* 从 */
from {
/* transfrom:表示变形 rotate:表示旋转 */
transform: rotate(0deg);
}
/* 到 */
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<img src="/Demo/dog.jpg" alt="">
</body>
</html>
demo2:渐变的灯泡。
<!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>
.bulb {
/* 绝对定位 */
position: absolute;
top: 100px;
left: 200px;
}
.light {
/* 绝对定位 */
position: absolute;
top: 31px;
left: 126px;
/* 使用动画 infinite 永远 linear 匀速 alternate 反复*/
animation: BlingBling 2s infinite linear alternate;
}
/* 动画定义 */
@keyframes BlingBling {
from {
/* 透明度 */
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
</head>
<body>
<img class="bulb" src="/Demo/bulb.png" alt="">
<img class="light" src="/Demo/light.png" alt="">
</body>
</html>
demo3:飞行的飞船。
<!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>
body {
background-color: black;
}
.sz {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
animation: sz 1s infinite linear alternate;
}
.line1 {
position: absolute;
top: 175px;
left: 187px;
animation: line 1s infinite linear ;
}
.line2 {
position: absolute;
top: 169px;
left: 196px;
animation: line 2s infinite linear ;
}
.line3 {
position: absolute;
top: 175px;
left: 200px;
animation: line 3s infinite linear ;
}
.line4 {
position: absolute;
top: 200px;
left: 212px;
animation: line 4s infinite linear ;
}
/* 定义动画 */
@keyframes sz {
from {
transform: translate(-30px,-30px);
}
to {
transform: translate(30px,30px);
}
}
@keyframes line {
from {
/* translate:表示位移 */
transform: translate(300px,-300px);
}
to {
transform: translate(-300px,300px);
}
}
</style>
</head>
<body>
<img class="line1" src="/Demo/line1.png" alt="">
<img class="line2" src="/Demo/line2.png" alt="">
<img class="line3" src="/Demo/line3.png" alt="">
<img class="line4" src="/Demo/line4.png" alt="">
<img class="sz "src="/Demo/sz.png" alt="">
</body>
</html>
demo5:图片的旋转 X Y Z。
<!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>
/* 舞台 */
.box {
width: 300px;
height: 300px;
margin: 100px;
/* 景深 */
perspective: 300px;
}
img {
width: 300px;
height: 300px;
border: 1px solid #000;
border-radius: 50%;
/* 过度 用户触碰后进行3D旋转*/
transition: all 1s;
}
/* :hover 表示触碰 伪类 用户操作 */
.box:hover .dog {
transform: rotateX(360deg);
}
.box:hover .cat {
transform: rotateY(360deg);
}
.box:hover .elephant {
transform: rotateZ(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="/Demo/cat.jpg" class="cat">
</div>
<div class="box">
<img src="/Demo/elephant.jpg" class="elephant">
</div>
<div class="box">
<img src="/Demo/dog.jpg" class="dog">
</div>
</body>
</html>
demo8:基于vue的轮播图。
<!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>
* {
/* 内边距,外边距 */
margin: 0;
padding: 0;
}
.crousel {
width: 650px;
height: 360px;
border: 1px solid #000;
margin: 10px auto;
/* 相对定位 */
position: relative;
}
.crousel img {
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
/* 透明度 */
opacity: 0;
/* 过渡动画 */
transition: all .6s;
}
.crousel img.courrent {
/* 透明度 */
opacity: 1;
}
.crousel .circles {
width: 170px;
height: 20px;
position: absolute;
/* 绝对定位,居中 */
bottom: 20px;
left: 50%;
/* 水平居中 */
transform:translateX(-50%);
/* 弹性盒容器 */
display: flex;
/* 分空格 */
justify-content: space-between;
}
.crousel .circles p {
background-color: rgba(156, 245, 251, 0.66);
width: 20px;
height: 20px;
border-radius: 50%;
}
.crousel .circles p.courrent {
background-color: deeppink;
}
</style>
</head>
<body>
<div id="app" class="crousel">
<img
v-for="i in 5"
:src="'/Demo/' + (i-1) + '.jpg'"
:class="{courrent: newIdx == i-1}"
>
<div class="circles">
<p
v-for="i in 5"
:class="{courrent: newIdx == i-1}"
@click="newIdx = i-1"
>
</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
// 定义vue在那个div中使用
el: '#app',
// 数据控制视图
data: {
newIdx: 0
}
})
</script>
</body>
</html>
demo9:王者荣耀英雄选择器。
<!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>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
color:#fff;
}
.hero {
float: left;
width: 100px;
height: 180px;
border: 1px solid #fff;
margin: 20px;
text-align: center;
position: relative;
}
.hero img {
width: 100px;
height: 100px;
}
/* 伪元素 */
.mask::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(9, 9, 9, 0.575);
}
</style>
</head>
<body>
<div id="app">
<div>
筛选选项:
<input type="radio" value="不限" v-model="newType">不限
<input type="radio" value="射手" v-model="newType">射手
<input type="radio" value="战士" v-model="newType">战士
<input type="radio" value="法师" v-model="newType">法师
<input type="radio" value="刺客" v-model="newType">刺客
<input type="radio" value="坦克" v-model="newType">坦克
<p>
筛选难度:
<input type="radio" value="不限" v-model="newDiff">不限
<input type="radio" value="简单" v-model="newDiff">简单
<input type="radio" value="中等" v-model="newDiff">中等
<input type="radio" value="困难" v-model="newDiff">困难
</p>>
</div>
<div
class="hero "
:class="{mask: (newType != '不限' && item.hero_type != newType) || (newDiff != '不限' && item.difficulty != newDiff)}"
v-for="item in heroArr"
:key="item.id"
>
<img :src="'http://www.zkt-it.com:5050/images/wzry/'+item.id+'.jpg'" >
<p> {{item.cname}}</p>
<p> {{item.hero_type}}</p>
<p> {{item.difficulty}}</p>
</div>
</div>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- axios是Ajax工具包,当前最流行的 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
// Vue生命周期:Vue创建好之后做的事情
async created () {
// 发出Ajax请求,请求服务器接口数据
const data = await axios.get ('http://www.zkt-it.com:5050/wzry/');
console.log(data.data);
// 设置英雄数组,为服务器返回的数组
this.heroArr = data.data;
},
// 数据
data() {
return {
heroArr: [],
newType: '不限',
newDiff: '简单',
}
},
})
</script>
</body>
</html>