基于css的一些动画
最近因为期末复习周，博客更新鸽了很久，趁着考完试还记得这件事，把之前的大作业里出现过的css动画总结一下
页脚的联系方式图标
这个图片原型是一个静态图
动画效果如下
html
<div class='footer'>
<div class='container'>
<div class='footer-main'>
<div class='col-md-6 footer-left'>
<ul>
<li><a href='#'><span class='fb'> </span></a></li>
<li><a href='#'><span class='twit'> </span></a></li>
<li><a href='#'><span class='in'> </span></a></li>
</ul>
</div>
</div>
</div>
</div>
css
.footer{
background: #3193d1;/*可选，动画的父级div的背景颜色*/
padding: 2em 0;
width: 100%;/*decide by yourself*/
margin-left: 0;
}
.footer-left ul{
padding: 0;
}
.footer-left ul li{
list-style: none;
display: inline-block;
}
.footer-left ul li span{
background-image: url(../img/footer-sprit.png);
width: 30px;
height: 30px;
/*这样设置行高考虑到图片的大小，只展现这么大的方块来显示图标*/
display: block;
/*以块形式呈现元素*/
transition: 0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
/*display on different browsers*/
}
.footer-left ul li span.fb{
background-position: 0 0;
}
.footer-left ul li span.twit{
background-position: -30px 0;
/*向右移动30px，显示中上位置的图标*/
}
.footer-left ul li span.in{
background-position: -60px 0;
}
.footer-left ul li span.fb:hover{
background-position:0px -30px;
/*第一个参数是向左偏移，第二个是向下偏移，取负数则向相反的方向移动*/
}
.footer-left ul li span.twit:hover{
background-position:-30px -30px;
}
.footer-left ul li span.in:hover{
background-position:-60px -30px;
}
展示板块
该展示板块用css过渡，鼠标指针悬浮出现动画
html
<div class='mg' style='margin-left: 20px'>
<div class='tile' style='margin-left: 120px'>
<div class='text11'>
<h1>text</h1>
<!--<img src='#'> 方块的背景图-->
<h2 class='animate-text'>text</h2>
<p class='animate-text'>text</p>
<div class='dots'>
<span></span> <span></span> <span></span>
</div>
</div>
</div>
</div>
css
.mg .tile{margin-left: 120px}
.tile {
width: 570px;
height: 300px;
margin: 20px;
background-color: #99aeff;/*加载动画后的方块的颜色*/
display: inline-block;
/*block和inline-block的区别，前者独占一行，后者可以并排*/
background-size: cover;/*把图片放大到元素容器合适的尺寸*/
/*如果设置一个100%，平铺x轴，两个100%铺满容器，图片可能会被拉伸*/
position: relative;
cursor: pointer;
transition: all 0.4s ease-out;
/*默认值为all 0 ease
all是设置过渡效果 第一个数字是过渡时间 ease是一个函数，用来控制过渡的快慢状态*/
box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);
/*四个数字，水平阴影位置，垂直阴影位置，模糊距离(可选)，阴影大小(可选)，阴影颜色*/
overflow: hidden;/*隐藏溢出部分*/
color: white;
font-family: 'HPE';
}
read more
同上一个，也是通过指针悬浮来显示动画
html
<div class='tool'>
<a class='tooltips' href='#'><span>Read more</span></a>
</div>
css
.tool{position: relative; display: inline;}
a.tooltips span {
position: absolute;
width: 168px;
background: #FFFFFF;
border: 2px solid #ea5b60;
height: 42px;
text-align: center;
color: #000;
padding: 14px 0px 0px 0px;
}
a.tooltips span:hover {
background: #ea5b60;
color: #fff;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
a.tooltips span:before {
content: '';
position: absolute;
top: 22%;
left: 81%;
margin-left: -12px;
width: 0;
height: 0;
border-top: 29px solid #ea5b60;
border-right: 28px solid transparent;
border-left: 28px solid transparent;
transform: rotate(90deg);
}
a.tooltips span:after {
content: '';
position: absolute;
top: 21%;
left: 79%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 30px solid #FFFFFF;
border-right: 31px solid transparent;
border-left: 30px solid transparent;
transform: rotate(90deg);
}
.container1{
padding-right: 15px;
padding-left: 15px;
margin-left: auto;
margin-right: auto;
}
划线动态
在文字上下方加动态划线
html
<div class='text1'>
<a href='#'>text</a>
</div>
css
.text1{
position: relative;
}
.text1::before,
.text1::after{
content: "";
z-index: -1;
position: absolute;
left: 0;
right: 0;
height: 2px;
background: lightskyblue;
transform: scaleX(0);
transition: transform 0.2s ease-in-out;
}
.text1::before{
top: 0;
tranform-origin: center right;
}
.text1::after{
bottom: 0;
transform-origin: center left;
}
.text1:hover{
cursor: pointer;
}
.text1:hover::before{
transform-origin: center left;
transform: scaleX(1);
}
.text:hover::after{
transform-origin: center right;
transform: sclaeX(1);
}
划线动画(升级版)
在上一个的基础上，对相关元素重写，呈现如下图效果
html
<div class="row">
<div class="type both clock">text
<div class="inner"></div>
</div>
</div>
css
.type {
position: relative;
/* font-size: 1em; */
/* 不加relative会显示全屏划线 */
}
.type .inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 如果说只要上下或者左右划线动画，可以不用加.inner标签，如果需要四条边，
则需要加上.inner标签的before和after，并设置相关属性 */
.type::before, .type::after, .type .inner::before, .type .inner::after
/* 这里有个一定要设置四个对象，一个对象对应一条边，before对应左和上，after对应右和下 */
{
position: absolute;
content: '';
display: block;
background: lightskyblue;
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
}
.type.both::before, .type.both::after {
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.type.both .inner::after, .type.both .inner::before {
top: 0;
width: 2px;
height: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.type.both .inner::before {
left: 0;
}
.type.both .inner::after {
right: 0;
}
.type.both .inner:hover::before, .type.both .inner:hover::after {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
.type.both::before {
top: 0;
}
.type.both::after {
bottom: 0;
}
.type.both:hover::before, .type.both:hover::after {
transform: scaleX(1);
-webkit-transform: scaleX(1);
}
.type.both:hover .inner::before, .type.both:hover .inner::after {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
/* 关于transform-origin属性
top left | left top 等价于 0 0；
top | top center | center top 等价于 50% 0
right top | top right 等价于 100% 0
left | left center | center left 等价于 0 50%
center | center center 等价于 50% 50%（默认值）
right | right center | center right 等价于 100% 50%
bottom left | left bottom 等价于 0 100%
bottom | bottom center | center bottom 等价于 50% 100%
bottom right | right bottom 等价于 100% 100%
*/
.type.both.clock .inner::before {
transform-origin: top center;
-webkit-transform-origin: top center;
}
.type.both.clock .inner::after {
transform-origin: bottom center;
-webkit-transform-origin: bottom center;
}
.type.both.clock::before {
transform-origin: right center;
-webkit-transform-origin: right center;
}
.type.both.clock::after {
transform-origin: left center;
-webkit-transform-origin: left center;
}
.type.both.clock:hover .inner::before {
transform-origin: bottom center;
-webkit-transform-origin: bottom center;
}
.type.both.clock:hover .inner::after {
transform-origin: top center;
-webkit-transform-origin: top center;
}
.type.both.clock:hover::before {
transform-origin: left center;
-webkit-transform-origin: left center;
}
.type.both.clock:hover::after {
transform-origin: right center;
-webkit-transform-origin: right center;
}
.row {
/* padding: 0.5em 1em 0.65em; */
width: 50px;
height: 20px;
}
.type {
padding: 0.5em 1em 0.5em;
/* margin: 0 10px; */
width: 22px;
height: 20px;
}
如果不设置transform-origin属性，将会变为这种形式
css
.type {
position: relative;
/* font-size: 1em; */
/* 不加relative会显示全屏划线 */
}
.type .inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 如果说只要上下或者左右划线动画，可以不用加.inner标签，如果需要四条边，
则需要加上.inner标签的before和after，并设置相关属性 */
.type::before, .type::after, .type .inner::before, .type .inner::after
/* 这里有个一定要设置四个对象，一个对象对应一条边，before对应左和上，after对应右和下 */
{
position: absolute;
content: '';
display: block;
background: lightskyblue;
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
}
.type.both::before, .type.both::after {
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.type.both .inner::after, .type.both .inner::before {
top: 0;
width: 2px;
height: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.type.both .inner::before {
left: 0;
}
.type.both .inner::after {
right: 0;
}
.type.both .inner:hover::before, .type.both .inner:hover::after {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
.type.both::before {
top: 0;
}
.type.both::after {
bottom: 0;
}
.type.both:hover::before, .type.both:hover::after {
transform: scaleX(1);
-webkit-transform: scaleX(1);
}
.type.both:hover .inner::before, .type.both:hover .inner::after {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
.row {
/* padding: 0.5em 1em 0.65em; */
width: 50px;
height: 20px;
}
.type {
padding: 0.5em 1em 0.5em;
/* margin: 0 10px; */
width: 22px;
height: 20px;
}
其他总结
- 一个div里套了多个div，如果浏览器在低分辨率下，子div换行，除了检查子div有没有设置
display: inline-block;，还要看看父div有没有设置具体宽度- 如果很多时候如果样式的效果和图片不符，不妨检查下div的相关css参数，如长宽、
display，position等- 浏览器f12里的element一栏里可对css进行实时调试
transform-origin的方向，决定了动画线条的移动方向，在设置参数时自己在脑里演示一遍
参考链接
基于css的一些动画的更多相关文章
- 第四十二课：基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- CSS VS JS动画，哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- 使用javascript和css模拟帧动画的几种方法浅析
我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- 分享一款基于jquery的圆形动画按钮
之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...
- 基于js全屏动画焦点图幻灯片
今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="sl ...
- 一款基于jquery的喜欢动画按钮
今天给大家带来一款基于jquery的喜欢动画按钮.这个实例中给了三种动画特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <p class='heading'> C ...
- How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能
个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...
随机推荐
- [TJOI2007]书架 题解
文中给了你一些句子,以及让你任意插入某个位置以及查询某个位置的句子. 发现因为是句子很难搞,所以开个 map 离散一下成数字.然后在额外开一个 map 记录这个数字对应的句子. 然后你要写一种支持插入 ...
- 「NOIP2017」宝藏
「NOIP2017」宝藏 题解 博客阅读效果更佳 又到了一年一度NOIPCSP-S 赛前复习做真题的时间 于是就遇上了这道题 首先观察数据范围 \(1 \le n \le 12\) ,那么极大可能性是 ...
- java+selenium UI自动化001
selenium是一个用于Web应用程序测试的工具,可以用来模拟用户在浏览器上的操作. 支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Firefox,Safari,Googl ...
- Selenium自动化测试框架Ride使用XLRD对于Excel测试数据的管理和操作
Python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 一.安装xlrd模块 到python官网下载http://pypi.pytho ...
- 关于如何在mysql中插入一条数据后，返回这条数据的id
简单的总结一下如何在mysql中出入一条数据后,返回该条数据的id ,假如之后代码需要这个id,这样做起来就变得非常方便,内容如下: <insert id="insertAndGetI ...
- ubuntu18.04安装redis-desktop-manager
通过proxychains4 clone项目,否则安装不成功 教程:https://www.cnblogs.com/bignode/p/9254500.html 1 git clone --recur ...
- Select、Poll、Epoll IO复用技术
简介 目前多进程方式实现的服务器端,一次创建多个工作子进程来给客户端提供服务, 但是创建进程会耗费大量资源,导致系统资源不足 IO复用技术就是让一个进程同时为多个客户端端提供服务 IO复用技术 之 S ...
- NPM 所有的指令已经问题 使用淘宝镜像 出现code EAI_AGAIN
windows怎么卸载cnpm? npm uninstall cnpm -g windows怎么检测cnpm是否安装成功 cnpm -v 我们直接将node的仓库地址换成淘宝仓库地址即可 单次使用 n ...
- mysql采坑笔记
mysqld --initialize-insecure // 初始化数据 mysql -u root -p // 登录 navicat for mysql 1251错误解决方法 ALTER USER ...
- C# MongoDB添加索引
场景: 在最近的项目中,用到了Mongodb,用它来保存大量工业数据.同时是会根据用户自动建立对应的数据表.这要求同时建立索引来加快查询. 解决: 1.在Nuget包中查询"mongocsh ...