前端联系9（CSS的阴影和动画效果和过渡）（css实现阴影效果）

25-02-24 14

以上就是给各位分享前端联系9，其中也会对CSS的阴影和动画效果和过渡进行解释，同时本文还将给你拓展12react基础的css过渡动画及动画效果及使用react-transition-group实现动画

以上就是给各位分享前端联系9，其中也会对CSS的阴影和动画效果和过渡进行解释，同时本文还将给你拓展12 react 基础的 css 过渡动画及动画效果及使用 react-transition-group 实现动画、2d旋转（css3实现过度效果和动画效果）、css 动画效果之 transition（动画过渡效果属性）、css 模块的阴影效果等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

前端联系9（CSS的阴影和动画效果和过渡）（css实现阴影效果）
12 react 基础的 css 过渡动画及动画效果及使用 react-transition-group 实现动画
2d旋转（css3实现过度效果和动画效果）
css 动画效果之 transition（动画过渡效果属性）
css 模块的阴影效果

前端联系9（CSS的阴影和动画效果和过渡）（css实现阴影效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div{
        height: 300px;
        width: 500px;
        background-color: red;
        margin:100px auto;

        /*设置中心点*/transform-origin: center center;

        /*设置阴影*/
        Box-shadow: 2px 2px 2px #ccc;
    }
    /*开始动*/
    div:hover{
        /*2d旋转的效果*/
            /* transform: rotate(30deg); */  /*deg是角度*/
        /*3d旋转的效果*/  
             transform: rotateX(50deg);   /*绕x轴3d旋转*/
        /*放大和缩小*/
            /* transform:scale(0.5); */ /*  缩放0.5倍 */
            /* transform:scale(1.2); */  /*放大到1.2倍 */ 
            /* transform:scaleY(1.2);  *//*在y轴的方向放大到1.2倍*/
            /* transform:scale(2,3); */  /*在X轴放大到2倍，在y轴放大到3倍*/
        /*旋转的效果*/
            transition: all 2s;  /*2s内完成效果*/

    }
</style>
<body>
    <div class="Box">
    

    </div>

</body>
<script>

</script>
</html>

12 react 基础的 css 过渡动画及动画效果及使用 react-transition-group 实现动画

一. 过渡动画

　　# index.js

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import App from ‘./app‘;

ReactDOM.render(<App />,document.getElementById(‘root‘));

　　# app.js

import React,{ Component,Fragment } from ‘react‘;
import ‘./style.css‘;
class app extends Component{
    constructor(props){
        super(props);
        this.state = {
            show : true
        };
        this.DivToggle = this.DivToggle.bind(this);
    }
    DivToggle(){
        console.log(this.state.show)
        this.setState({
            show: this.state.show ? false : true
        })
    }
    render() {
        return (
            <Fragment>
                <div className={this.state.show? ‘show‘: ‘hide‘}>你好啊</div>
                <button onClick={this.DivToggle}>toggle</button>
            </Fragment>
        )
    }
}
export default app;

　　# style.css

.show{
    opacity: 1;
    transition: all 1s ease-in;
}
.hide{
    opacity: 0;
    transition: all 1s ease-in;
}

二.动画效果

　　使用 keyframes 进行渲染动画

# style.css

.show{
    /* 使用 forwards  css 动画最后一帧 保存 样式*/
    animation: show-item 2s ease-in forwards;
}
.hide{
     /* 使用 forwards  css 动画最后一帧 保存 样式*/
    animation: hide-item 2s ease-in forwards;
}

@keyframes hide-item {
    0% {
        opacity: 1;
        color: red;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 0;
        color: blue;
    }
}

@keyframes show-item {
    0% {
        opacity: 0;
        color: blue;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 1;
        color: red;
    }
}

三. 使用 react-transition-group 实现动画 (github 地址) (文档)

　　1. 安装 react-transition-group

　　　　yarn add react-transition-group

　　2. 引入 css-transition

　　　　import { Csstransition } fron ‘react-transition-group‘

2d旋转（css3实现过度效果和动画效果）

效果：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0;
        }
        .box{
            width: 240px;
            margin: 100px auto;
        }
        /*过度效果*/
        /*.qq{*/
            /*transition: all 1s;*/
        /*}*/
        /*.qq:hover{*/
            /*transform: rotate(360deg);*/
        /*}*/
        /*动画效果*/
        .qq:hover{
            animation: zhuan 0.1s linear infinite;
        }
        @-webkit-keyframes zhuan {
            from{
                transform: rotate(0);
            }to{
            transform: rotate(360deg);
                         }
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="zhuan.jpg" alt="" class="qq">
    </div>
<script type="text/javascript">

</script>
</body>
</html>

图片：

css 动画效果之 transition（动画过渡效果属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<!-- transition:动画过渡效果属性
功能：使css的属性值在一定的时间内平滑的过渡。这种效果可以在鼠标
点击、划过、获取焦点或对元素任何改变中触发，并圆滑的以动画效果改变css属性值。

可定义的属性有：
transition-property：设置那些属性进行过渡，all：所有属性
transition-duration：完成过渡动画效果的时间，默认是0
transition-timing-function：设置动画的缓动效果，默认是ease（逐渐变慢）。
    （其他常用值：ease-in，加速；ease-out，减速；ease-in-out，加速然后减速)
transition-delay：设置动画开始的延迟时间，默认是0

示例：
使用transition，实现过渡动画。一个红色的正方形，当鼠标移入该区域后，红色正方形放大一倍，并且颜色变为灰色。鼠标移开，还原到初始状态。 -->

<style>
    .box{
        width: 100px;
        height: 100px;
        margin:50px auto;
        background-color: #f00;
        /* 为离开的动作也添加过渡效果 */
        transition: all 1s ease-in 1s;
    }
    .box:hover{
        height: 200px;
        width: 200px;
        border-radius: 50%;
        background-color: #666;
        /* transition-property:width,height,border-radius;
        transition-duration: 1s;
        transition-timing-function:ease-in;
        transition-delay:1s; */
        transition: all 1s ease-in 1s;
    }

</style>
<body>
    <div class="box"></div>
</body>
</html>

Document

css 模块的阴影效果

比如：

webkit-box-shadow: 0 4px 20px rgba(0,0,0,.2);
box-shadow: 0 4px 20px rgba(0,0,0,.2);
-webkit-transition: .25s;
transition: .25s;

关于前端联系9和CSS的阴影和动画效果和过渡的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于12 react 基础的 css 过渡动画及动画效果及使用 react-transition-group 实现动画、2d旋转（css3实现过度效果和动画效果）、css 动画效果之 transition（动画过渡效果属性）、css 模块的阴影效果等相关知识的信息别忘了在本站进行查找喔。

本文标签：