CSS3动画demmo和Vue轮播图
2024-05-20 09:30:38
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"><pv-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>CSS3动画demmo和Vue轮播图相关推荐
- 利用CSS 3 的动画相关属性制作轮播图特效
本示例给出了只利用CSS3的动画属性制作下图所示的轮播图特效的步骤. Step 1:定义用来展示效果的容器div (1)设置其背景色 (2)让其大小与浏览器的比例合适,并且让其水平.垂直居中: 例如: ...
- Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
- Swift项目，超美的动画和tableView,collectionView,轮播图的使用,网络请求的封装等
<一>项目介绍: 这是一个Swift语言的项目,但是其中也有使用一些OC的三方库,比SDWebImage.WebViewJavascriptBridge等,同时实现了基本App的框架功能, ...
- JavaScript动画：offset和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介 我们知道,三大家族包括:offset/scroll/c ...
- Javascript-API-BOM、动画函数、网页轮播图、节流阀、筋斗云、固定侧边栏返回顶部案例
动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 ...
- jQuery和CSS3商品图片预览轮播图插件
这是一款非常实用的 jQuery和 CSS3创意商品图片预览 轮播图插件.该轮播图插件以每个商品作为一个轮播图,用户可以在每个商品缩略图中查看该商品的颜色和款式.一般的商务网站都是通过图片来吸引用户, ...
- 【python教程入门学习】用pyecharts绘制带动画效果的“时间轮播图
今天我们要分享的是一个数据可视化的案例. 在讲述本文之前,为了满足大家的好奇心,我们先来看看最终做出来的效果呈现. 不管学习什么技术,官网是最好的老师.对于pyecharts绘图库,知道了他的绘图原理 ...
- 微信小程序vue轮播图_微信小程序-swiper（轮播图）抖动问题
ps:问题 组件swiper(轮播图)真机上不自动滚动 一直卡在那里抖动 以前遇到这个问题,官方一直没有正面回复.就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东 ...
- 微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
最新文章
- 代码整洁之道（一）最佳实践小结
- 16个新职业公布，有的出现在疫情服务中，蕴藏了哪些新机会
- 三级计算机网络技术考试题,2017年计算机三级网络技术考试题
- vs 2012/2013 等工具中，使用正则表达式，查找、替换
- Openstack Nova network
- 清理C盘空间，给Win7释放更多C盘容量
- C Primer Plus 第四章 复习题编程练习 答案
- 快递物流类API推荐
- 解决PHP ＂headers already sent＂错误
- 我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：JVM的发展历程
- PicPick Pro v7.0.0 屏幕截图编辑工具解锁全功能单文件版
- 靶机渗透练习02-driftingblues2
- 利用 CSS3 实现僵尸行走动画
- 201606120030-软一-周翊涵
- CTF初体验：Web18秋名山车神
- LED驱动电源有哪些特点
- 破项目，已经折腾三年了！我是乙方项目经理……
- 2022-08-01 零基础吉他入门知识(二) 吉他上的十二平均律,给吉他调弦,规范化弹吉他:节拍器,持琴姿势和拨弦手势
- ubuntu 14.04 systemd开机启动方式安装
- 廿柒- 客制化爬虫以及爬虫调参