文档章节

css实现博客简单动画-菜鸟初学

zhaoliheng123
 zhaoliheng123
发布于 2016/06/01 01:41
字数 854
阅读 228
收藏 0
css

 

步入前段已经好几个月了,一直在打基础,不知道学的如何,今天按照自己的思路用css做了一个博客的简单动画,主要是transform属性的运用,虽然js对于实现动画来说更加到位一点,但css有它的强大之处,可以用transform属性简单的动画,例如旋转,斜切,缩放,平移。同样的功能用js实现的话会复杂许多。

transform-translate:

        translate:指定对象的2Dtranslation(2D平移)

        语法:transform:translate(x,y);

        第一个参数对应x轴;

        第二个参数对应y轴;

transform-rotate:

        rotate:指定对象的2Drotate(2D旋转)需先有transform-origin(设置旋转中心点)属性定义

        语法:transform-rotate(0deg)

        参数为旋转角度,正值顺时针旋转,负值逆时针旋转

transform-scale

        scale:指定对象的2D缩放

        语法:transform-scale(x,y)

        第一个参数对应x轴,为数字,即放大的倍数。

        第二个参数对应Y轴

        如第二个参数未提供,则默认取第一个参数

transform-skew

        skew:指定对象的斜切,扭曲程度

        语法:transform-skew(x,y)

        第一个参数对应的是X轴

        第二个参数对应的是Y轴

        如第二个未提供,默认为0

        值为扭曲的角度,正值顺时针变化,负值逆时针变化

transition属性

        property:检索或设置对象中的参与过渡属性

        duration:过渡动画持续时间

        timing-function:检索或设置对象过渡的动画类型(linear,ease,ease-in,ease-out,ease-in-out)

        delay:检索或设置对象延迟过渡时间

        

<style>
body{
    font-size:20px;
    margin:0px 15%;
    background:#999;
    font-family:"微软雅黑";
    }
ul{
    padding:5px;
    line-height:30px;
}
li{    background:#333;
    margin:5px;
    border-radius:10px;
    list-style:none;
    float:left;
    text-align:center;
    transition:1s;}
li:hover{transform:scale(1.2);
transition:1s;
    }
    
ul li a{
    padding:5px;
    color:#FFF;
    text-decoration:none;
    line-height:20px;
    }
ul li a:hover{
    color:#000;
    background:#FFF;
    border-radius:10px;

    }
#text{
    wodth:100%;}
img{
    margin-top:50px;
    width:400px;
    height:300px;
    border:5px solid #FFF;
    float:left;
    display:block;
    transition:1s;}
p{
    position:absolute;
    top:250px;
    width:30%;
    left:625px;
    line-height:50px;
    transition:1s;}

#textname:hover{
    transform:skew(-60deg);
    transition:1s;}
img:hover{
    transform:rotate(360deg);
    }

</style>
</head>

<body>
<h1>因为有你,我很幸福</h1>
<ul>
    <li><a class="pic1" href="img/照片墙/1.jpg" onclick="showPic(this);return false"title="努力是为了让情怀落地">最美贵阳</a></li>
    <li><a class="pic2" href="img/照片墙/2.jpg"onclick="showPic(this);return false"title="相识十年,从年少到青春,与你相伴如此幸运">春风十里不如你</a></li>
    <li><a class="pic3" href="img/照片墙/3.jpg"onclick="showPic(this);return false"title="一声得几知己,实在是幸哉">一路货色</a></li>
    <li><a class="pic4" href="img/照片墙/4.jpg"onclick="showPic(this);return false"title="因为有你,我知道了努力的意义">因为有你</a></li>
    <li><a class="pic5" href="img/照片墙/5.jpg"onclick="showPic(this);return false"title="余生我陪你走">心路历程</a></li>
    <li><a class="pic6" href="img/照片墙/6.jpg"onclick="showPic(this);return false"title="孤独是人生常态,陪伴才显得难得可贵">一生相伴</a></li>

<li><a class="pic7" href="img/照片墙/7.jpg"onclick="showPic(this);return false"title="我在这里,不会走,有你的地方就有我">我在这里</a></li>

 

</ul>
<div id="text">
    <img id="picname" src="img/照片墙/9.jpg" />
    <p id="textname">人们都说故事与酒更配,却不知这样更容易让人落泪</p>
</div>
</body>
<script>
function showPic(whichpic){
    var oldpic=document.getElementById("picname");
    var newpic=whichpic.getAttribute("href");
    oldpic.setAttribute("src",newpic);
    var textchange=document.getElementById("textname");
    var title=whichpic.getAttribute("title");
    textchange.firstChild.nodeValue=title;
    }

</script>
</html>

© 著作权归作者所有

zhaoliheng123
粉丝 1
博文 1
码字总数 854
作品 0
沙坪坝
私信 提问
程序员2600行代码写个易懂28个纯css3加载loading动画特效

     28个纯css3加载loading动画特效      css3加载loading动画特效      css3加载loading动画特效   写在前面   今日在逛论坛时看到一位程序员共享了他做的一个用纯CSS3加载...

学习web前端
2017/10/23
0
0
web前端loading加载动画,这些方法可知道?

这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现 前言 loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很好的交互体验。 今天这篇文章我们一起来看...

编程需要艺术
2017/12/20
0
0
[练习]利用CSS steps 实现逐帧动画

网页逐帧动画的实现方式 网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用JS控制,和单纯使用CSS实现,两者的优劣总体概括来说就是: JS动画可控性更强,但开销大,实现复杂。 CS...

囧囧
09/29
0
0
个人总结(css3新特性)

1.前言 css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但是很难用得好,用...

守候i
2017/12/04
0
0
纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢?

本文转载于:猿2048网站纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢? 前言 使用HTML+CSS能写出什么惊人的效果呢? 针对这个问题,我总会看到类似的回答,比如没有JS,前端永远都是静态的...

前端老手
08/27
30
0

没有更多内容

加载失败,请刷新页面

加载更多

关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
6
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0
面试套路题目

作者:抱紧超越小姐姐 链接:https://www.nowcoder.com/discuss/309292?type=3 来源:牛客网 面试时候的潜台词 抱紧超越小姐姐 编辑于 2019-10-15 16:14:56APP内打开赞 3 | 收藏 4 | 回复24 ...

MtrS
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部