CSS3 animation/transform

欢迎光临

<!DOCTYPE html>
<html>
<head>
    <meta content="width =device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <title></title>
    <style>
        html, body { margin: 0px; padding: 0px; height: 100%; width: 100%; }
        p { margin: 0px; padding: 0px; }
        .page { width: 100%; height: 100%; }
        .page .pagehome { height: 100%; width: 100%; background: #24a5cf; position: relative; z-index: 99; }
        .page .an-box { position: absolute; top: 45%; left: 25%; -webkit-animation: hinge 10s cubic-bezier(.44,.44,.54,1.42) infinite; }
        .page .an-box .y { width: 200px; height: 200px; border-radius: 50%; position: absolute; top: 0px; left: 0px; transform-origin: 50% 100%; border-top: 0.1em solid rgba(255,255,255,0.4); box-shadow: 0 1em 2em rgba(0,0,0,0.5); top: 50%; left: 50%; margin-left: -100px; margin-top: -200px; }
        .page .an-box .y0 { background: rgba(16, 63, 236, 0.75); z-index: 100; }
        .page .an-box .y1 { background: rgba(37, 172, 162, 0.75); -webkit-transform: rotateZ(90deg); z-index: 99; }
        .page .an-box .y2 { background: rgba(233, 124, 32, 0.75); -webkit-transform: rotateZ(180deg); z-index: 98; }
        .page .an-box .y3 { background: rgba(235, 67, 35, 0.75); -webkit-transform: rotateZ(270deg); z-index: 97; }

        @-webkit-keyframes myfirst {
            0% { -webkit-transform: rotateZ(0deg); }
            25% { -webkit-transform: rotateZ(360deg); }
            50% { -webkit-transform: rotateZ(180deg); }
            99% { -webkit-transform: rotateZ(360deg); }
            100% { -webkit-transform: rotateZ(0deg); }
        }

        @-webkit-keyframes hinge {
            0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
            16% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); }
            32% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); }
            48% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); }
            64% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); }
            80% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); }
            99% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); }
            100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); }
        }

        .page .biaopai { position: absolute; top: 100px; left: 50%; z-index: 999; -webkit-transform-style: preserve-3d; -webkit-perspective: 700; -webkit-perspective-origin: 50% 50%; }
        .page .biaopai .content { padding: 0px 30px; background: #cb8e8e; border-radius: 10px; -webkit-transform-origin-y: -15px; -webkit-transform: rotateZ(90deg); -webkit-animation: hinge1 cubic-bezier(.44,.44,.54,1.42) 1.3s both; }
        .page .biaopai .content:before { content: ‘‘; width: 15px; height: 15px; background: #eb5757; border: 2px solid #c62a2a; box-shadow: 0px 2px 5px #2b2929; position: absolute; left: 50%; border-radius: 15px; top: -30px; margin-left: -12px; z-index: 99; }
        .page .biaopai .content:after { content: ‘‘; display: block; width: 0px; height: 0px; overflow: hidden; border: 40px dashed transparent; border-bottom: 50px solid #cb8e8e; position: absolute; left: 50%; top: -90px; margin-left: -45px; }
        .page .biaopai .content p { line-height: 145px; text-align: center; font-size: 75px; font-family: ‘Microsoft YaHei‘; text-shadow: 0px 5px 5px #888; color: #ee492b; font-weight: bold; }

        @-webkit-keyframes hinge1 {
            0% { }
            20% { -webkit-transform: rotate3d(0, 0, 1, -55deg); }
            40% { -webkit-transform: rotate3d(0, 0, 1,55deg); }
            60% { -webkit-transform: rotate3d(0, 0, 1,-20deg); }
            80% { -webkit-transform: rotate3d(0, 0, 1, 20deg); }
            100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-animation-timing-function: ease-in; }
        }
    </style>

</head>
<body>

    <div class="page">
        <div class="pagehome">
            <div class="an-box">
                <div class="y y0"></div>
                <div class="y y1"></div>
                <div class="y y2"></div>
                <div class="y y3"></div>
            </div>
        </div>
        <div class="biaopai">
            <div class="content">
                <p>欢迎光临</p>
            </div>
        </div>
    </div>
</body>
</html>

　　

时间： 2024-11-05 19:45:14

CSS3 animation/transform的相关文章

css3 animation transform 信封翻转

纯动画制作,图片自己切的,很粗糙,如果哪位仁兄能加工一下,就再好不过了 github演示地址:css3mail,(加载图片很慢,最好是不要在线观看演示~) 源码下载地址:css3mail 效果如下

HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结

<h1>HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结</h1> <h1>HTML5,animation,keyframe,transform,transition,2D translate,3D translate,CSS3</h1> CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CS

css3 变形(transform)、转换(transition)和动画(animation)

http://www.w3cplus.com/content/css3-transform/  在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix http://www.w3cplus.com/content/css3-transition/  transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间

自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div{ width: 200px; height: 100px; background: pink; border: 1px solid #ccc; margin-bottom: 10px; } .box1{ transform: translate(20px, 1

css3 动画 animation transform

<!DOCTYPE html><!-- saved from url=(0073)http://www.w2bc.com/demo/201504/2015-04-27-jquery-tecent-focus/index.html --><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <m

CSS3 transition动画、CSS3 transform变换、CSS3 animation动画

CSS3 transition动画 1.transition-property 设置过渡的属性,比如:width height background-color2.transition-duration 设置过渡的时间,比如:1s 500ms3.transition-timing-function 设置过渡的运动方式 linear 匀速 ease 开始和结束慢速 ease-in 开始是慢速 ease-out 结束时慢速 ease-in-out 开始和结束时慢速 cubic-bezier(n,n,

实现了一个百度首页的彩蛋——CSS3 Animation简介

在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩蛋 简单来说可以分三步: 1.实现一些css动画类,等待调用: 2.设立关键字与动画匹配方法: 3.每当页面加载完成,根据关键字为body添加指定动画类. 查看DEMO:百度搜索彩蛋 CSS3 Animation animation: name duration timing-function de

css3动画transform在ie内核动画结束后子元素a标签不能点击（本人未解决，求大神带飞）

问题描述: css3的动画 animation属性,如果动画里面需要动画的元素是transform,那么动画的这个元素的子元素a标签就不能 点击跳转,也不能运行点击事件,就好像个a标签被透明的东西挡住了一样,目前只是发现这个问题在ie内核的浏览器上面,比如 360浏览器,ie11(考虑到测试css3动画的,没有测试ie789 10.).而在火狐,谷歌正常. 百度了一大堆,都没有找到好的解决办法,比较接近的一个说法是,transform属性改变了元素的层级,也就是z-index属性,不过在这里a标

css3 animation 属性众妙

转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需要了解的同学可先移步 MDN),而是结合实际的开发经验,介绍 css3 animation 属性的一些使用场景及技巧. 1. animation-delay MDN 中的介绍: animation-delay CSS 属性定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度. 该属性值