css11动态效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>transform的使用</title>
<style>
li{
list-style: none;
float: left;
width: 80px;
line-height: 40px;
background: rgba(242, 123, 5, 0.61);
border-radius: 6px;
font-size: 16px;
margin-left: 3px;
}
li a{
text-decoration: none;
color: #fff;
display: block;
text-align: center;
height: 40px; }
li a:hover{
background: rgba(242, 88, 6, 0.87);
border-radius: 6px;
/*设置a元素在鼠标移入时向右下角移动4px，8px*/
/* transform: translate(4px,8px); 平移*/
/*鼠标放入 显示1.5倍的效果
transform: scale(1.5);*/
/* transform: skewX(15deg);只针对X轴
transform: skewY(15deg);只针对Y轴*/
transform: skew(15deg,-15deg);
} img:hover{
/*旋转 默认是 顺时针旋转*/
transform: rotate(90deg) scale(1.5);
}
</style>
</head>
<body>
<ul>
<li><a href="#">服装城</a></li>
<li><a href="#">美妆馆</a></li>
<li><a href="#">超市</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">金融</a></li>
</ul>
<img src="cat.jpg" alt="小猫咪" height="100px" width="100px">
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>transition属性</title>
<style type="text/css">
/*
transition属性的值：
transition-property：过渡效果的css属性的名称（color,background,font-size....）!
可以只设置一个属性， 一般方便起见使用all！针对于所有的属性
transition-duration:过渡效果需要多少秒
transition-timing-function：速度曲线！
ease：慢速开始，之后变快！
linear：匀速！
ease-in:慢速开始!
ease-out:慢速结束：
ease-in-out:慢速开始!慢速结束!
transition-delay:过度效果开始前的等待时间！ 默认是0s！
*/
div{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: orange;
/*过度效果*/
transition:all 1s linear;
}
div:hover{
background-color: red;
font-size: 25px;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
能旋转不？
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>animation的使用</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
/*调用动画*/
animation:animates 3s linear infinite;
}
/*创建关键帧*/
@keyframes animates{
0%{
width: 0px;
transform: translate(50px,0) ;
}
25%{
width: 25px;
height: 150px;
transform: translate(150px,0) rotate(90deg);
background-color: pink;
}
50%{
width: 50px;
height: 300px;
background-color: aqua;
transform: translate(300px,0) rotate(180deg);
}
75%{
width: 75px;
height: 150px;
background-color: orange;
transform: translate(150px,0) rotate(270deg);
}
100%{
width: 100px;
transform: translate(50px,0) rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css11动态效果的更多相关文章
- jQuery动态效果实例
jQuery常见的动态效果: 隐藏/显示效果: 1.(1):隐藏,显示:通过 jQuery,使用 hide() 和 show() 方法可以用来隐藏和显示 HTML 元素. (2):隐藏/显示的速度: ...
- JS中for循序中延迟加载实现动态效果
JS中for循序中延迟加载实现动态效果 今天在做一个前端的效果的时候碰到一个棘手的问题,就是实现一个动态的圆柱效果,废话不多少,直接上代码. <script src="js/jquer ...
- D3.js：动态效果
D3 提供了 4 个方法用于实现图形的过渡: - transition() 启动过渡效果,其前后是图形变化前后的状态(形状.位置.颜色等等),例如: .attr("fill",&q ...
- 3个简单CSS实现的动态效果
这里只是鼠标移入的时候出现的动态效果,并没有使用CSS的动画属性animation和变形属性transform.后面再补... HTML代码如下: <!DOCTYPE html><h ...
- jQuery实现点赞动态效果
实现动态效果基本上都是用到定时器,修改标签的位置大小颜色属性 <!DOCTYPE html> <html lang="en"> <head> & ...
- atitit.按钮光标滑过高亮切换以及其他动态效果的实现css html js --attilax总结
atitit.按钮光标滑过高亮切换以及其他动态效果的实现css html js --attilax总结 4. 鼠标越过动态图片切换实现 1 4.1. 优先模式::css模式... 1 4.2. 其次 ...
- D3.js系列——动态效果和Update、Enter、Exit的理解
一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再 ...
- HTML5 Canvas 六角光阑动态效果
光阑是光具组件中光学元件的边缘.框架或特别设置的带孔屏障,本人实现了结构比较简单的六角光阑,效果有点像宇航员在徐徐张开的飞船舷窗中看到逐渐完整的地球,下面四张图可以感受一下. 当然看动态效果才能真正体 ...
- Unity---DOTween插件学习(4)---Andy老师自己写的动态效果工具插件
本文及系列参考于Andy老师的DOTween系列 欢迎大家关注Andy老师 13.动态效果工具插件 这个插件是Andy老师自己利用DOTween写的按钮点击和显示的效果控件,有非常多的种类,还是挺好用 ...
随机推荐
- Linux学习笔记（9）linux网络管理与配置之一——Linux基础网络命令与学习大纲（0）
大纲目录 0.常用linux基础网络命令 1.配置主机名 2.配置网卡信息与IP地址 3.配置DNS客户端 4.配置名称解析顺序 5.配置路由与默认网关 6.双网卡绑定 [1] ping [2]net ...
- laravel queue队列使用
一篇文章: laravel中的队列服务跟其他队列服务也没有什么不同,都是最符合人类思维的最简单最普遍的流程:有一个地方存放队列信息,一个PHP进程在运行时将任务写入,另外一个PHP守护进程轮询队列信息 ...
- 解决 hybird 应用中重复获取 WebView，导致页面元素无法识别的问题
转载地址:http://blog.csdn.net/testman930/article/details/50799532 问题描述 在测APP的业务流,WebView和Native模式耦合在一起.例 ...
- python s13 day04
1.1 all() 和 any( ) all() any() 0,None,"", [], (),{} #布尔值为0的 列举,None ,空列表,空元祖,空. print( ...
- go——安装与设置
1.下载安装 官方下载地址:https://golang.org/dl/ 备用下载地址:https://golang.google.cn/dl/ 在windows下面直接运行.msi程序文件就可以安装 ...
- Linux开发工具教程
今天把上个星期写的Linux开发工具相关的教程整理一下,方便阅读: 1.第一课 GCC入门: 2.第二课 GCC入门之静态库以及共享库: 3.第三课 Makefile文件的制作(上) : 4.第四课 ...
- 28. Implement strStr()(KMP字符串匹配算法)
Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...
- springboot的Scheduled定时器不工作
问题情况 使用springboot,使用注解方式启动定时器进行业务调度. 在入口类中加了注解如下: package org.test.xyz; @SpringBootApplication @Enab ...
- ajax 事件使用
error: function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLH ...
- ReactNative之Android打包APK方法（趟坑过程）
欢迎大家加群讨论 点击链接加入群[ReactNative-解决问题交流群] :644124441 点击链接加入群[ReactNative技术交流群2] :687663534 多余的不解释了.直接上车吧 ...