Hibop.github.io css 3.0动画动效实现方案

css 3.0动画实现方案：

需要的准备知识

动画触发条件：

focus
hover: 包括 .a:hover > .b:first-child 兄弟触发 .a:hover::before 伪类触发
scroll

常见实现思路：

图片hover上去，变色：

有换background-image 多一个请求
准备雪碧图变色前和后===> 父组件overflow:hidden, 改变img的margin-top： 0 => -100% [金山云官网]

hover上去卡片立体效果改变box-shadow，以及tranlateY(-5px); box-shadow: 0 4px 8px 0 rgba(0,0,0,.15);
hover上去图片变大：一般在container上设置触发条件:hover .container image:hover { transform: scale(1.15) }
还有一般的循环动画实现 animation:
数字上升动画实现：

document.addEventListener("DOMContentLoaded",() => {
window.requestAnimationFrame(() => {
!function(e) {
var n = 0;
var timer = window.setInterval(() => {
n++;
if(n === e && clearInterval(a)) return;
$('#salesDiscount').html(n);
})
}
})
})

卡片翻转效果这个需要transform-3D, 还需要做ie9-降级处理
视差滚动网页的设计；Parallax.js

background-position： https://blog.csdn.net/konglingnan999/article/details/54837863
preserve-3d实现视差滚动： http://www.zhangxinxu.com/wordpress/2015/03/css-only-
熟悉css 3.0动画实现：
- 过渡：transition: all[] 2s(duration) ease 0.3s(delay) Internet Explorer 9 以及更早的版本，不支持 transition 属性。
- 动画：animation: keyframes duration ease delay infinite(循环) .... @keyframes name {} 可以实现循环动画
- 转换: transform: 移动： translate(px, px); left: top: 旋转： rotate(deg, deg); 尺寸(伸缩)： scale(2, .5);//无单位 width height 翻转： skew(deg, deg)
  - [x] 翻转和旋转的区别：旋转尺寸不变，绕轴变化；翻转尺寸变化；
  - [x] 四种变换都是可以分解的： translate => translateX(), translateY()
  - [ ] 多个transform类型的设置可以写一起的, 以空格分割: transform:rotate(45deg) skew(30deg,10deg) translate(10px,15px)
- 3D transform 透视距离：perspective：none | length > 0, 越远3D效果越不明显，一般要设置透视元素的父级元素才可以产生透视效果透视源：perspective-origin：50% 50% 透视源平面的左右距离，必须设置在元素的父元素或祖先元素变形原点: transform-origin 值: x轴 y轴 z轴 Or 50% 50% 背景可见: backface-visible: 默认可见变形风格： transform-style: flat | preserve-3d 设置了overflow：hiden时 3d失效 https://www.cnblogs.com/xiaohuochai/p/5351477.html

parallax-effect/ https://blog.csdn.net/chenlycly/article/details/25046969

Hack思路：

鼠标事件除了hover，还有click，当然还有滚动

怎样使用单纯的css样式来实现click呢？

check-box Hack

<style>
    input:checked~.content {
      opacity: 0;
    }
    .content {
      width: 100px;
      transition: opacity 0.5s;
    }
</style>

<body>
  <input type="checkbox" id="input_checkbox" style="position: absolute;left: -99999px">
  <label for="input_checkbox" style="cursor: pointer">点我隐藏下面内容</label>
  <div class="content">这个是被控制的内容这个是被控制的内容这个是被控制的内容这个是被控制的内容这个是被控制的内容这个是被控制的内容</div>
</body>

a-target Hack

<style>
    .to-be-changed {
      color: black;
    }
    .to-be-changed:target {
      color: red;
    }
</style>

<body>
    <a href="#id">Click me!</a>
    <p id="id" class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
</body>

tabindex-focus

<style>
    span:focus ~ .to-be-changed {
      color: red;
    }
</style>

<body>
    <span tabindex="0">Click me!</span>
   <p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
</body>

transition-container

<style>
    .to-be-changed {
      transition: all 0s 9999999s;
    }

    span:active ~ .to-be-changed {
      transition: all 0s;
      color: red;
    }
</style>

<body>
    <span>Click me!</span>
    <p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
</body>

May 21 '18 13:05 Hibop

::selection {
    background: rgba(0,152,195,0.66);
    text-shadow: none;
    color: #fff;
}

// 焦点不在window内
::selection:window-inactive {
    background: rgba(80,78,78,0.3);
}

h1::selection {
    -webkit-text-stroke: 1px #000; // 文字有边框
}

a::selection,h2::selection,h3::selection,strong::selection {
    color: #222;
}

Sep 27 '18 06:09 Hibop

<ruby>偏函数应用<rt>partial application</rt></ruby>

github 点击预览

<a target="_blank" rel="noopener noreferrer" href="linkUrl">
<img src="linkUrl" alt="logo" data-canonical-src="linkUrl" style="max-width:100%;">
</a>

Sep 27 '18 06:09 Hibop