CSS基础-----扇形导航，时钟，选择器，多棱柱函数生成效果的实现

最新推荐文章于 2023-08-23 17:52:49 发布

小绵羊Do

最新推荐文章于 2023-08-23 17:52:49 发布

阅读量1k

点赞数

分类专栏： HTML+CSS 文章标签： css3 css

本文链接：https://blog.csdn.net/m0_54803288/article/details/124128486

版权

大家好，我是小埋，今天我们讲CSS基础之扇形导航，时钟，选择器，多棱柱函数生成效果的实现。前端开发过程中很重要的知识点。可以关注博主
如果大家觉得有用的话可以 关注，点赞，收藏，转发。谢谢！

前言

CSS是学习前端的基础知识，是每一个程序员必学必会的基础知识。

一、具体内容

   扇形导航，时钟，选择器，多棱柱函数生成效果的实现

二、效果图

1.所有效果图

在这里插入图片描述

2.所有代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>扇形导航</title>
    <script>
        window.οnlοad=function(){
   
            // 定义一个改变状态的变量
            var flag=true;
            // 获取home主键
            var home=document.getElementsByClassName("home")[0];
            // 获取所有的img标签；
            var imgArr=document.getElementsByTagName("img");
            // 定义每张图片出去的距离；
            var c=140;
            // 定义每张图片点击时出现放大和透明变化效果；
            // 定义一个回调函数，用来处理过渡结束时触发的事件；
            function fun(){
   
                this.style.transform="rotate(-720deg) scale(1)";
                this.style.opacity=1;
                this.style.transition="0.3s";
                this.removeEventListener("transitionend",fun,false);
            }
            for(var i=0;i<imgArr.length;i++){
   
                imgArr[i].οnclick=function(){
   
                    this.style.transform="rotate(-720deg) scale(2)";
                    this.style.opacity=0.1;
                    this.style.transition="0.5s";
                    this.addEventListener("transitionend",fun,false);
                }
            }
            // 为home主键设置单击相应函数；
            home.οnclick=function(){
   
                if(flag){
   
                    home.style.transform="rotate(-720deg)";
                    for(var i=0;i<imgArr.length;i++){
   
                        imgArr[i].style.transform="rotate(-720deg) scale(1)";
                        imgArr[i].style.transition="1s "+i*0.1+"s";
                        imgArr[i].style.left=-getPoint(c,90*i/(imgArr.length-1)).left+"px";
                        imgArr[i].style.top=-getPoint(c,90*i/(imgArr.length-1)).top+"px";
                    }
                }else{
   
                    home.style.transform="rotate(0deg)";</

最低0.47元/天解锁文章

小绵羊Do

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础-----扇形导航，时钟，选择器，多棱柱函数生成效果的实现

大家好，我是小埋，今天我们讲CSS基础之扇形导航，时钟，选择器，多棱柱函数生成效果的实现。前端开发过程中很重要的知识点。可以关注博主如果大家觉得有用的话可以关注，点赞，收藏，转发。谢谢！文章目录前言一、具体内容二、效果图1.所有效果图2.所有代码总结前言CSS是学习前端的基础知识，是每一个程序员必学必会的基础知识。一、具体内容扇形导航，时钟，选择器，多棱柱函数生成效果的实现二、效果图1.所有效果图2.所有代码<!DOCTYPE html><h.
复制链接

扫一扫