search

Hibop / Hibop.github.io

Hibop 个人博客
https://hibop.github.io/
23 stars 1 forks source link

css 3.0动画动效实现方案 #37

Open Hibop opened 6 years ago

Hibop commented 6 years ago

css 3.0动画实现方案：

需要的准备知识

动画触发条件：

常见实现思路：

  1. 图片hover上去，变色：
    • 有换background-image 多一个请求

  1. hover上去卡片立体效果 改变box-shadow，以及tranlateY(-5px); box-shadow: 0 4px 8px 0 rgba(0,0,0,.15);

  2. hover上去图片变大： 一般在container上设置触发条件:hover .container image:hover { transform: scale(1.15) }

  3. 还有一般的循环动画实现 animation:

  4. 数字上升动画实现：

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

  5. 卡片翻转效果 这个需要transform-3D, 还需要做ie9-降级处理

  6. 视差滚动网页的设计；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>
这个是被控制的内容这个是被控制的内容这个是被控制的内容这个是被控制的内容这个是被控制的内容这个是被控制的内容
#### a-target Hack
Click me!

I'm going to be red! It's gonna be legen... Wait for it...

#### tabindex-focus
Click me!

I'm going to be red! It's gonna be legen... Wait for it...


#### transition-container
Click me!

I'm going to be red! It's gonna be legen... Wait for it...

Hibop commented 6 years ago 
::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;
}
Hibop commented 6 years ago 
<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>